From 30f980339ca1ec355b76afa1e15db16798269269 Mon Sep 17 00:00:00 2001 From: Rizqah Date: Sat, 1 Aug 2026 18:29:52 +0100 Subject: [PATCH 1/6] alarm clock app done --- Sprint-3/alarmclock/alarmclock.js | 30 +++++++++++++++++++++++++++++- Sprint-3/alarmclock/index.html | 2 +- Sprint-3/alarmclock/style.css | 9 +++++++++ 3 files changed, 39 insertions(+), 2 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..45c4e263a 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,5 +1,33 @@ -function setAlarm() {} +// ## How the clock should work +// When you click the `Set Alarm` button the counter at the top of the screen should change to the number you entered in the `input` field. For example, if the `input` field says `10` then the title should say `Time Remaining: 00:10`. + +// Every one second the title should count down by one. + +// When the `Time Remaining` reaches `00:00` the alarm should play a sound. You can make the sound happen by using `playAlarm()`. + +// You can stop the alarm sound by pressing the `Stop Alarm` button. + +// +const alarmInput = document.querySelector("#alarmSet"); +const setButton = document.querySelector("#set"); +const timeRemaining = document.querySelector("#timeRemaining"); +function setAlarm() { + let totalSeconds = Number(alarmInput.value); + const timer = setInterval(() => { + totalSeconds--; + const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, "0"); + const seconds = String(Math.floor(totalSeconds % 60)).padStart(2, "0"); + const remainingTime = minutes + ":" + seconds; + timeRemaining.innerText = `Time Remaining:${remainingTime}`; + if (totalSeconds === 0) { + clearInterval(timer); + playAlarm(); + } + }, 1000); +} + +setButton.addEventListener("click", setAlarm); // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..f16f1bd6c 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -1,4 +1,4 @@ - + diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..1c5791037 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -12,4 +12,13 @@ h1 { text-align: center; + color: rgb(117, 13, 13); +} +body { + background-color: rgb(197, 107, 122); +} +button { + background-color: rgb(151, 77, 114); + color: white; + padding: 10px; } From 0161e64ffeb613405bfe043f822c54c9c1e45f76 Mon Sep 17 00:00:00 2001 From: Rizqah Date: Sat, 1 Aug 2026 18:30:06 +0100 Subject: [PATCH 2/6] title updated --- 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 f16f1bd6c..ea5fb6bdf 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Title here + Alarm Clock app
From a29695262dc82aa4abbc7b7d6b8ef152b93fa923 Mon Sep 17 00:00:00 2001 From: Rizqah Date: Thu, 13 Aug 2026 19:21:31 +0100 Subject: [PATCH 3/6] input box cleared after set alarm runs --- Sprint-3/alarmclock/alarmclock.js | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 45c4e263a..b714f9576 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -7,27 +7,37 @@ // When the `Time Remaining` reaches `00:00` the alarm should play a sound. You can make the sound happen by using `playAlarm()`. // You can stop the alarm sound by pressing the `Stop Alarm` button. - -// const alarmInput = document.querySelector("#alarmSet"); -const setButton = document.querySelector("#set"); const timeRemaining = document.querySelector("#timeRemaining"); + +let timer; + function setAlarm() { + clearInterval(timer); + pauseAlarm(); let totalSeconds = Number(alarmInput.value); - const timer = setInterval(() => { - totalSeconds--; + alarmInput.value = ""; + if (totalSeconds <= 0 || !Number.isFinite(totalSeconds)) { + timeRemaining.innerText = "Time Remaining: 00:00"; + return; + } + function updateTime() { const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, "0"); - const seconds = String(Math.floor(totalSeconds % 60)).padStart(2, "0"); - const remainingTime = minutes + ":" + seconds; - timeRemaining.innerText = `Time Remaining:${remainingTime}`; + const seconds = String(totalSeconds % 60).padStart(2, "0"); + + timeRemaining.innerText = `Time Remaining: ${minutes}:${seconds}`; + } + updateTime(); + timer = setInterval(() => { + totalSeconds--; + updateTime(); + if (totalSeconds === 0) { clearInterval(timer); playAlarm(); } }, 1000); } - -setButton.addEventListener("click", setAlarm); // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); From 3a14a0e8bb45e186f9aa705aff47c02a972fa3ea Mon Sep 17 00:00:00 2001 From: Rizqah Date: Thu, 13 Aug 2026 23:02:52 +0100 Subject: [PATCH 4/6] input validation for extreme values and non integers --- Sprint-3/alarmclock/alarmclock.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index b714f9576..ff30f42f0 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -11,14 +11,17 @@ const alarmInput = document.querySelector("#alarmSet"); const timeRemaining = document.querySelector("#timeRemaining"); let timer; - function setAlarm() { clearInterval(timer); pauseAlarm(); let totalSeconds = Number(alarmInput.value); alarmInput.value = ""; - if (totalSeconds <= 0 || !Number.isFinite(totalSeconds)) { - timeRemaining.innerText = "Time Remaining: 00:00"; + if (totalSeconds > 36000) { + alert("Please enter a time less than 10 hours."); + return; + } + if (totalSeconds <= 0 || !Number.isInteger(totalSeconds)) { + alert("Please enter a valid positive time."); return; } function updateTime() { @@ -28,6 +31,7 @@ function setAlarm() { timeRemaining.innerText = `Time Remaining: ${minutes}:${seconds}`; } updateTime(); + timer = setInterval(() => { totalSeconds--; updateTime(); From 33c4e013e391438715645b9cf40fa66198db2255 Mon Sep 17 00:00:00 2001 From: Rizqah Date: Sat, 15 Aug 2026 15:45:55 +0100 Subject: [PATCH 5/6] Returned to a clean state always and fixed invalid numbers --- Sprint-3/alarmclock/alarmclock.js | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index ff30f42f0..81495ce3b 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -14,34 +14,36 @@ let timer; function setAlarm() { clearInterval(timer); pauseAlarm(); - let totalSeconds = Number(alarmInput.value); - alarmInput.value = ""; + let totalSeconds = Math.round(Number(alarmInput.value)); + if (totalSeconds > 36000) { alert("Please enter a time less than 10 hours."); + updateTime(0); return; } - if (totalSeconds <= 0 || !Number.isInteger(totalSeconds)) { + if (alarmInput.value === "" || totalSeconds < 0 || !Number.isInteger(0)) { alert("Please enter a valid positive time."); + updateTime(0); return; } - function updateTime() { - const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, "0"); - const seconds = String(totalSeconds % 60).padStart(2, "0"); - - timeRemaining.innerText = `Time Remaining: ${minutes}:${seconds}`; - } - updateTime(); + alarmInput.value = ""; + updateTime(totalSeconds); timer = setInterval(() => { - totalSeconds--; - updateTime(); - - if (totalSeconds === 0) { + if (totalSeconds <= 0) { clearInterval(timer); playAlarm(); } + updateTime(totalSeconds--); }, 1000); } + +function updateTime(secs) { + const minutes = String(Math.floor(secs / 60)).padStart(2, "0"); + const seconds = String(secs % 60).padStart(2, "0"); + + timeRemaining.innerText = `Time Remaining: ${minutes}:${seconds}`; +} // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); From 383b8bf85486f08a2bb2b0a9edabbb0b80508d96 Mon Sep 17 00:00:00 2001 From: Rizqah Date: Sun, 16 Aug 2026 21:29:15 +0100 Subject: [PATCH 6/6] one second delay fixed --- Sprint-3/alarmclock/alarmclock.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 81495ce3b..c3fa8764b 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -18,23 +18,32 @@ function setAlarm() { if (totalSeconds > 36000) { alert("Please enter a time less than 10 hours."); + alarmInput.value = ""; updateTime(0); return; } - if (alarmInput.value === "" || totalSeconds < 0 || !Number.isInteger(0)) { - alert("Please enter a valid positive time."); + if ( + alarmInput.value === "" || + totalSeconds <= 0 || + !Number.isInteger(totalSeconds) + ) { + alert("Please enter a valid number of seconds"); updateTime(0); + alarmInput.value = ""; return; } alarmInput.value = ""; + updateTime(totalSeconds); timer = setInterval(() => { - if (totalSeconds <= 0) { - clearInterval(timer); + totalSeconds--; + updateTime(totalSeconds); + + if (totalSeconds === 0) { playAlarm(); + clearInterval(timer); } - updateTime(totalSeconds--); }, 1000); }