From 55bfe4529736ca297b640c3411160dd573aa220f Mon Sep 17 00:00:00 2001 From: Ammad Date: Sat, 8 Nov 2025 11:34:48 +0000 Subject: [PATCH 1/6] Set the title to "Alarm clock app" --- Sprint-3/alarmclock/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..ff2d3b453 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Title here + Alarm clock app
From d79be014c279da9e4e2a7611a5cccf26fba9ffe1 Mon Sep 17 00:00:00 2001 From: Ammad Date: Sat, 8 Nov 2025 12:10:14 +0000 Subject: [PATCH 2/6] Implement the count down functionality --- Sprint-3/alarmclock/alarmclock.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..820dcabdd 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,24 @@ -function setAlarm() {} +function setAlarm() { + const alarmSetInputElement = document.getElementById("alarmSet"); + const timeRemainingElement = document.getElementById("timeRemaining"); + let seconds = Number(alarmSetInputElement.value); + + const updateTimeRemaining = () => { + seconds--; + + if (seconds === 0) clearInterval(intervalID); + + const timeString = new Date(seconds * 1000).toLocaleTimeString([], { + minute: "numeric", + second: "numeric", + }); + + timeRemainingElement.innerHTML = `Time Remaining: ${timeString}`; + }; + + const delay = 1 * 1000; + const intervalID = window.setInterval(updateTimeRemaining, delay); +} // DO NOT EDIT BELOW HERE From b82d141922e6f4925b21813cd8aa23a3fcf4e87e Mon Sep 17 00:00:00 2001 From: Ammad Date: Sat, 8 Nov 2025 12:13:06 +0000 Subject: [PATCH 3/6] Play the alarm when the countdown reaches 0 --- Sprint-3/alarmclock/alarmclock.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 820dcabdd..b610971b8 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -6,7 +6,10 @@ function setAlarm() { const updateTimeRemaining = () => { seconds--; - if (seconds === 0) clearInterval(intervalID); + if (seconds === 0) { + playAlarm(); + clearInterval(intervalID); + } const timeString = new Date(seconds * 1000).toLocaleTimeString([], { minute: "numeric", From c94334d79697f4fc16a4df8297bd8237f551e7f7 Mon Sep 17 00:00:00 2001 From: Ammad Date: Sat, 8 Nov 2025 13:01:48 +0000 Subject: [PATCH 4/6] Flash the webpage background when the countdown reaches 0 --- Sprint-3/alarmclock/alarmclock.js | 2 ++ Sprint-3/alarmclock/style.css | 13 +++++++++++++ 2 files changed, 15 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index b610971b8..3a029b38f 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -7,6 +7,8 @@ function setAlarm() { seconds--; if (seconds === 0) { + document.body.className = "flash"; + playAlarm(); clearInterval(intervalID); } diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..66e6249b6 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -13,3 +13,16 @@ h1 { text-align: center; } + +.flash { + animation: flash 500ms infinite; +} + +@keyframes flash { + 0%, 49% { + background: white; + } + 50%, 100% { + background: red; + } +} \ No newline at end of file From 6d35ec16103f947ffc24dbfca843981784fbe048 Mon Sep 17 00:00:00 2001 From: Ammad Date: Sat, 8 Nov 2025 14:49:52 +0000 Subject: [PATCH 5/6] Format the code --- Sprint-3/alarmclock/alarmclock.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 3a029b38f..fc3cd6f02 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,14 +1,14 @@ function setAlarm() { const alarmSetInputElement = document.getElementById("alarmSet"); const timeRemainingElement = document.getElementById("timeRemaining"); + let seconds = Number(alarmSetInputElement.value); const updateTimeRemaining = () => { seconds--; - if (seconds === 0) { + if (seconds <= 0) { document.body.className = "flash"; - playAlarm(); clearInterval(intervalID); } @@ -22,7 +22,7 @@ function setAlarm() { }; const delay = 1 * 1000; - const intervalID = window.setInterval(updateTimeRemaining, delay); + const intervalID = setInterval(updateTimeRemaining, delay); } // DO NOT EDIT BELOW HERE From de4e1688f025fc914f8b5c7ebe9158d32aca0139 Mon Sep 17 00:00:00 2001 From: Ammad Date: Mon, 10 Nov 2025 14:05:15 +0000 Subject: [PATCH 6/6] Add pause feature to pause the alarm clock and then resume it --- Sprint-3/alarmclock/alarmclock.js | 56 +++++++++++++++++++++++-------- 1 file changed, 42 insertions(+), 14 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index fc3cd6f02..8fa7dce16 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,28 +1,56 @@ +let intervalID = null; +let seconds = 0; +let isPaused = false; + function setAlarm() { const alarmSetInputElement = document.getElementById("alarmSet"); - const timeRemainingElement = document.getElementById("timeRemaining"); - - let seconds = Number(alarmSetInputElement.value); + const setAlarmButton = document.getElementById("set"); + const delay = 1 * 1000; const updateTimeRemaining = () => { - seconds--; - - if (seconds <= 0) { + if (!isPaused && seconds <= 0) { document.body.className = "flash"; playAlarm(); clearInterval(intervalID); + intervalID = null; + setAlarmButton.textContent = "Set Alarm"; + return; } - const timeString = new Date(seconds * 1000).toLocaleTimeString([], { - minute: "numeric", - second: "numeric", - }); - - timeRemainingElement.innerHTML = `Time Remaining: ${timeString}`; + seconds--; + setRemainingTime(seconds); }; - const delay = 1 * 1000; - const intervalID = setInterval(updateTimeRemaining, delay); + if (intervalID) { + clearInterval(intervalID); + intervalID = null; + isPaused = true; + setAlarmButton.textContent = "Resume Alarm"; + return; + } + + if (isPaused) { + isPaused = false; + intervalID = setInterval(updateTimeRemaining, delay); + setAlarmButton.textContent = "Pause Alarm"; + return; + } + + seconds = Number(alarmSetInputElement.value); + setRemainingTime(seconds); + intervalID = setInterval(updateTimeRemaining, delay); + setAlarmButton.textContent = "Pause Alarm"; +} + +function setRemainingTime(seconds) { + const timeString = new Date(seconds * 1000).toLocaleTimeString([], { + minute: "numeric", + second: "numeric", + }); + + document.getElementById( + "timeRemaining" + ).innerHTML = `Time Remaining: ${timeString}`; } // DO NOT EDIT BELOW HERE