From e7a0880997843f88bf502f08a76e440273649ef1 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 14 Jul 2025 08:48:58 +0100 Subject: [PATCH 1/5] title element 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 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 26d876a2ce4434686b93b0f36015a205fa3f5fe2 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 14 Jul 2025 10:57:38 +0100 Subject: [PATCH 2/5] inputting then clicking "set alarm" update timer --- Sprint-3/alarmclock/alarmclock.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..61b31d9ee 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,16 @@ -function setAlarm() {} +function setAlarm() { + const input = document.getElementById("alarmSet"); + const timeDisplay = document.getElementById("timeRemaining"); + + let seconds = parseInt(input.value, 10); + + const minutes = String(Math.floor(seconds / 60)).padStart(2, '0'); + const remainingSeconds = String(seconds % 60).padStart(2, '0'); + + timeDisplay.textContent = `Time Remaining: ${minutes}:${remainingSeconds}`; +} + +document.getElementById("set").addEventListener("click", setAlarm); // DO NOT EDIT BELOW HERE From dd250a3346e7fe0bfa7701ff76a64796ca568aea Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 14 Jul 2025 11:28:45 +0100 Subject: [PATCH 3/5] countdown for remaining time added --- Sprint-3/alarmclock/alarmclock.js | 32 ++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 61b31d9ee..ae79e3876 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,17 +1,39 @@ +let countdownInterval; + +function updateDisplay(seconds) { + const timeDisplay = document.getElementById("timeRemaining"); + const minutes = String(Math.floor(seconds / 60)).padStart(2, "0"); + const remainingSeconds = String(seconds % 60).padStart(2, "0"); + + timeDisplay.textContent = `Time Remaining: ${minutes}:${remainingSeconds}`; +} + + + function setAlarm() { const input = document.getElementById("alarmSet"); - const timeDisplay = document.getElementById("timeRemaining"); - let seconds = parseInt(input.value, 10); - const minutes = String(Math.floor(seconds / 60)).padStart(2, '0'); - const remainingSeconds = String(seconds % 60).padStart(2, '0'); + countdownInterval = setInterval(() => { + seconds--; + + if (seconds <= 0) { + clearInterval(countdownInterval); + updateDisplay(0); + return; + } + + updateDisplay(seconds); + }, 1000); - timeDisplay.textContent = `Time Remaining: ${minutes}:${remainingSeconds}`; } document.getElementById("set").addEventListener("click", setAlarm); +document.getElementById("stop").addEventListener("click", () => { + clearInterval(countdownInterval); +}); + // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); From 82347f154fa0f1600d791171fca701e6c8986a88 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 14 Jul 2025 11:51:18 +0100 Subject: [PATCH 4/5] alarm goes off when timer reaches 0 --- Sprint-3/alarmclock/alarmclock.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index ae79e3876..94614486a 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -14,12 +14,16 @@ function setAlarm() { const input = document.getElementById("alarmSet"); let seconds = parseInt(input.value, 10); + clearInterval(countdownInterval); + updateDisplay(seconds); + countdownInterval = setInterval(() => { seconds--; if (seconds <= 0) { clearInterval(countdownInterval); updateDisplay(0); + playAlarm(); return; } @@ -36,7 +40,7 @@ document.getElementById("stop").addEventListener("click", () => { // DO NOT EDIT BELOW HERE -var audio = new Audio("alarmsound.mp3"); +var audio = new Audio("https://actions.google.com/sounds/v1/alarms/alarm_clock.ogg"); function setup() { document.getElementById("set").addEventListener("click", () => { From 9175cb93a9585efe121f41477845e82f38b46215 Mon Sep 17 00:00:00 2001 From: HassanOHOsman Date: Mon, 14 Jul 2025 12:06:08 +0100 Subject: [PATCH 5/5] background changes to red when timer reaches 0 --- Sprint-3/alarmclock/alarmclock.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 94614486a..fbb5e2ef5 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -24,6 +24,7 @@ function setAlarm() { clearInterval(countdownInterval); updateDisplay(0); playAlarm(); + document.body.style.backgroundColor = "red"; return; }