From 30f980339ca1ec355b76afa1e15db16798269269 Mon Sep 17 00:00:00 2001 From: Rizqah Date: Sat, 1 Aug 2026 18:29:52 +0100 Subject: [PATCH 1/2] 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/2] 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