From 41a8a0c50d6a9e3b9dc5c7d64dfbc155092a912e Mon Sep 17 00:00:00 2001 From: Konvaly Date: Mon, 1 Dec 2025 03:14:54 +0000 Subject: [PATCH 1/4] Changed title in to 'Alarm clock app' --- Sprint-3/alarmclock/index.html | 37 ++++++++++++++++++---------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..36715d7d9 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -1,20 +1,23 @@ - - - - - Title here - - -
-

Time Remaining: 00:00

- - - - -
- - - + + + + + Alarm clock app + + + +
+

Time Remaining: 00:00

+ + + + + +
+ + + + \ No newline at end of file From e1b9a4e07b11837a67aa85de015af2edd3ecef65 Mon Sep 17 00:00:00 2001 From: Konvaly Date: Mon, 1 Dec 2025 14:20:26 +0000 Subject: [PATCH 2/4] Implemented alarm countdown timer with MM:SS display and sound trigger --- Sprint-3/alarmclock/alarmclock.js | 43 ++++++++++++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..9ae1e02c0 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,45 @@ -function setAlarm() {} +let countdownTimerId = null; +// interval id for the running countdown (null = no countdown running) + +function setAlarm() { + // Stops any previous countdown + stops any currently playing alarm sound + if (countdownTimerId !== null) clearInterval(countdownTimerId); + pauseAlarm(); + + // Reads the number of seconds the user typed + let totalSecRemaining = + parseInt(document.getElementById("alarmSet").value, 10) || 0; + + // Element that displays: "Time Remaining: MM:SS" + const timeRemainingTitle = document.getElementById("timeRemaining"); + + // Updates the title based on totalSecRemaining + const renderTimeRemaining = () => { + const minutesRemaining = String( + Math.floor(totalSecRemaining / 60) + ).padStart(2, "0"); + const secondsRemaining = String(totalSecRemaining % 60).padStart(2, "0"); + timeRemainingTitle.textContent = `Time Remaining: ${minutesRemaining}:${secondsRemaining}`; + }; + + // Shows the starting value after clicking "Set Alarm" + renderTimeRemaining(); + + // Runs every second countdown tick + countdownTimerId = setInterval(() => { + // If time is up, stops ticking and starts the alarm sound + if (totalSecRemaining <= 0) { + clearInterval(countdownTimerId); + countdownTimerId = null; + playAlarm(); + return; + } + + // Otherwise subtracts 1 second and update the display + totalSecRemaining -= 1; + renderTimeRemaining(); + }, 1000); +} // DO NOT EDIT BELOW HERE From f443210967ee87ca2f3da52593d5b962896d86e1 Mon Sep 17 00:00:00 2001 From: Konvaly Date: Mon, 1 Dec 2025 14:29:13 +0000 Subject: [PATCH 3/4] Change background colour when alarm finishes --- Sprint-3/alarmclock/alarmclock.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 9ae1e02c0..d862a474a 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,7 +1,12 @@ let countdownTimerId = null; -// interval id for the running countdown (null = no countdown running) + +const finishedBackgroundColor = "#007BA7"; +const normalBackgroundColor = ""; function setAlarm() { + // Resets background each time user sets a new alarm (optional but nice) + document.body.style.backgroundColor = normalBackgroundColor; + // Stops any previous countdown + stops any currently playing alarm sound if (countdownTimerId !== null) clearInterval(countdownTimerId); pauseAlarm(); @@ -31,6 +36,10 @@ function setAlarm() { if (totalSecRemaining <= 0) { clearInterval(countdownTimerId); countdownTimerId = null; + + // Change background when alarm finishes + document.body.style.backgroundColor = finishedBackgroundColor; + playAlarm(); return; } From c7ee3e7ec7a52ea4fa6dd9599472ae8ff0d84cfc Mon Sep 17 00:00:00 2001 From: Konvaly Date: Mon, 1 Dec 2025 14:51:18 +0000 Subject: [PATCH 4/4] Validated alarm input to accept only positive integers --- Sprint-3/alarmclock/alarmclock.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index d862a474a..864c9dff0 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -11,6 +11,19 @@ function setAlarm() { if (countdownTimerId !== null) clearInterval(countdownTimerId); pauseAlarm(); + const input = document.getElementById("alarmSet"); + + // only allows positive integers + const seconds = Number(input.value); + const isValid = Number.isInteger(seconds) && seconds > 0; + + if (!isValid) { + input.setCustomValidity("Please enter a whole number greater than 0."); + input.reportValidity(); + return; + } + input.setCustomValidity(""); + // Reads the number of seconds the user typed let totalSecRemaining = parseInt(document.getElementById("alarmSet").value, 10) || 0;