Skip to content

Commit 6948ee0

Browse files
Baba05206Baba05206
committed
refactored code as per the 3 comments to improve accessibility, prevent invalid inputs and reset clock when new input is accepted
1 parent 9a76928 commit 6948ee0

File tree

3 files changed

+94
-14
lines changed

3 files changed

+94
-14
lines changed

‎Sprint-3/alarmclock/alarmclock.js‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ let intervalId;
66

77
/**
88
* Formats time in seconds to MM:SS format
9-
* @param {number} totalSeconds - The time in seconds to format
10-
* @returns {string} Formatted time string in "Time Remaining: MM:SS" format
119
*/
1210
function formatTimeDisplay(totalSeconds) {
1311
const minutes = Math.floor(totalSeconds / SECONDS_PER_MINUTE);
@@ -24,15 +22,35 @@ function formatTimeDisplay(totalSeconds) {
2422
function setAlarm() {
2523
const input = document.getElementById("alarmSet");
2624
const heading = document.getElementById("timeRemaining");
25+
const errorMsg = document.getElementById("alarmError");
2726

28-
let totalSeconds = Number(input.value);
27+
// Reset alarm sound + flashing background before new countdown
28+
pauseAlarm();
2929

30-
// Input validation: check for invalid or non-positive numbers
31-
if (isNaN(totalSeconds) || totalSeconds <= 0) {
32-
heading.innerText = "Please enter a valid positive number of seconds";
30+
let raw = input.value.trim();
31+
32+
// Clear previous error
33+
errorMsg.textContent = "";
34+
35+
// STRONG VALIDATION: must be digits only
36+
if (!/^\d+$/.test(raw)) {
37+
heading.innerText = "Time Remaining: 00:00";
38+
errorMsg.textContent =
39+
"Invalid input. Please enter a whole number of seconds (e.g., 10, 30, 120). Decimals and text are not allowed.";
40+
return;
41+
}
42+
43+
let totalSeconds = Number(raw);
44+
45+
// Prevent extremely large or zero values
46+
if (totalSeconds === 0 || totalSeconds > 86400) {
47+
heading.innerText = "Time Remaining: 00:00";
48+
errorMsg.textContent =
49+
"Please enter a value between 1 and 86,400 seconds. Examples: 10, 45, 300.";
3350
return;
3451
}
3552

53+
// Reset any existing countdown
3654
clearInterval(intervalId);
3755

3856
heading.innerText = formatTimeDisplay(totalSeconds);
@@ -63,14 +81,21 @@ function setup() {
6381
document.getElementById("stop").addEventListener("click", () => {
6482
pauseAlarm();
6583
});
84+
85+
// Allow Enter key to trigger alarm
86+
document.getElementById("alarmSet").addEventListener("keyup", (e) => {
87+
if (e.key === "Enter") setAlarm();
88+
});
6689
}
6790

6891
function playAlarm() {
6992
audio.play();
93+
document.body.classList.add("alarm-active");
7094
}
7195

7296
function pauseAlarm() {
7397
audio.pause();
98+
document.body.classList.remove("alarm-active");
7499
}
75100

76101
window.onload = setup;

‎Sprint-3/alarmclock/index.html‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,40 @@
66
<link rel="stylesheet" href="style.css" />
77
<title>Alarm clock app</title>
88
</head>
9+
910
<body>
10-
<div class="centre">
11-
<h1 id="timeRemaining">Time Remaining: 00:00</h1>
12-
<label for="alarmSet">Set time to:</label>
13-
<input id="alarmSet" type="number" />
11+
<main class="centre">
12+
<h1 id="timeRemaining" aria-live="polite" role="timer">
13+
Time Remaining: 00:00
14+
</h1>
15+
16+
<label for="alarmSet">Set alarm time (seconds):</label>
17+
18+
<input
19+
id="alarmSet"
20+
type="number"
21+
min="1"
22+
step="1"
23+
inputmode="numeric"
24+
aria-describedby="alarmError"
25+
/>
26+
27+
<!-- Visible and screen-reader friendly error message -->
28+
<p id="alarmError" class="error-message" aria-live="assertive"></p>
29+
30+
<button
31+
id="set"
32+
type="button"
33+
aria-label="Set alarm using the entered number of seconds"
34+
>
35+
Set Alarm
36+
</button>
37+
38+
<button id="stop" type="button" aria-label="Stop the alarm sound">
39+
Stop Alarm
40+
</button>
41+
</main>
1442

15-
<button id="set" type="button">Set Alarm</button>
16-
<button id="stop" type="button">Stop Alarm</button>
17-
</div>
1843
<script src="alarmclock.js"></script>
1944
</body>
2045
</html>

‎Sprint-3/alarmclock/style.css‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
position: fixed;
33
top: 50%;
44
left: 50%;
5-
-webkit-transform: translate(-50%, -50%);
65
transform: translate(-50%, -50%);
6+
text-align: center;
77
}
88

99
#alarmSet {
@@ -13,3 +13,33 @@
1313
h1 {
1414
text-align: center;
1515
}
16+
17+
/* Visible, helpful error message */
18+
.error-message {
19+
color: #b00020;
20+
font-size: 0.9rem;
21+
margin-top: -10px;
22+
margin-bottom: 20px;
23+
min-height: 1.2rem; /* Prevent layout shift */
24+
}
25+
26+
/* Accessible focus outline */
27+
button:focus,
28+
input:focus {
29+
outline: 3px solid #005fcc;
30+
outline-offset: 3px;
31+
}
32+
33+
/* Flashing background when alarm is active */
34+
.alarm-active {
35+
animation: flash 1s infinite alternate;
36+
}
37+
38+
@keyframes flash {
39+
from {
40+
background-color: #fff;
41+
}
42+
to {
43+
background-color: #ffcccc;
44+
}
45+
}

0 commit comments

Comments
 (0)