From 414b4a6e336048ac43d63b59cf800bb6e6fde865 Mon Sep 17 00:00:00 2001 From: galyna-k Date: Mon, 14 Jul 2025 18:24:31 +0100 Subject: [PATCH 1/4] Update index.html - change the HTML title to 'Alarm clock app'; - add the 'defer' attribute to the alarmclock.js script tag to improve page load performance. --- Sprint-3/alarmclock/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..cfe17fac0 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Title here + Alarm clock app
@@ -15,6 +15,6 @@

Time Remaining: 00:00

- + From bb3f35b3ce14c3381d18cc53e3b5f63ade2e06ba Mon Sep 17 00:00:00 2001 From: galyna-k Date: Mon, 14 Jul 2025 18:38:16 +0100 Subject: [PATCH 2/4] Implement alarm countdown timer functionality Implement alarm countdown timer functionality: - add logic to setAlarm to start a countdown based on user input; - update the display with remaining time; - validate input; - trigger playAlarm when time reaches zero; - handles multiple alarms by clearing previous intervals. --- 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..bcc590af2 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,45 @@ -function setAlarm() {} +let countdownTimer; + +function setAlarm() { + let alarmTime = Number(document.querySelector("input").value); + + if (!alarmTime || isNaN(alarmTime) || alarmTime <= 0) { + alert("Please enter a valid positive number for the alarm time"); + return; + } + + let timeLeft = alarmTime; + + function formatTime(time) { + let minutes = Math.floor(time / 60); + let seconds = time % 60; + return `${minutes.toString().padStart(2, "0")}:${seconds + .toString() + .padStart(2, "0")}`; + } + + function updateTitle(time) { + document.getElementById( + "timeRemaining" + ).innerHTML = `Time Remaining: ${formatTime(time)}`; + } + + updateTitle(alarmTime); + + if (countdownTimer) { + clearInterval(countdownTimer); + } + + countdownTimer = setInterval(() => { + timeLeft--; + updateTitle(timeLeft); + + if (timeLeft <= 0) { + clearInterval(countdownTimer); + playAlarm(); + } + }, 1000); +} // DO NOT EDIT BELOW HERE From 761873e3f81df4d450b71627cc292ba0259ae92d Mon Sep 17 00:00:00 2001 From: galyna-k Date: Mon, 14 Jul 2025 18:55:26 +0100 Subject: [PATCH 3/4] add background color when alarm finishes - clear the background color when setting a new alarm; - sets it to red when the alarm triggers --- Sprint-3/alarmclock/alarmclock.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index bcc590af2..d8376d683 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,6 +1,7 @@ let countdownTimer; function setAlarm() { + document.body.style.backgroundColor = ""; let alarmTime = Number(document.querySelector("input").value); if (!alarmTime || isNaN(alarmTime) || alarmTime <= 0) { @@ -36,6 +37,7 @@ function setAlarm() { if (timeLeft <= 0) { clearInterval(countdownTimer); + document.body.style.backgroundColor = "#ff4444"; playAlarm(); } }, 1000); From 30abf18b51fac3aba6fa0944767aeb5b65473c3e Mon Sep 17 00:00:00 2001 From: galyna-k Date: Mon, 14 Jul 2025 19:21:52 +0100 Subject: [PATCH 4/4] make flashing background - allows the user to stop the flashing by clicking the stop button; - add flashing background effect when the alarm goes off. --- Sprint-3/alarmclock/alarmclock.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index d8376d683..ac20d702f 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,7 +1,15 @@ let countdownTimer; +let flashInterval; function setAlarm() { - document.body.style.backgroundColor = ""; + document.getElementById("stop").addEventListener("click", () => { + if (flashInterval) { + clearInterval(flashInterval); + flashInterval = null; + document.body.style.backgroundColor = ""; + } + }); + let alarmTime = Number(document.querySelector("input").value); if (!alarmTime || isNaN(alarmTime) || alarmTime <= 0) { @@ -27,6 +35,14 @@ function setAlarm() { updateTitle(alarmTime); + function flashingBackground() { + let isRed = false; + flashInterval = setInterval(() => { + document.body.style.backgroundColor = isRed ? "#ffffff" : "#ff4444"; + isRed = !isRed; + }, 400); + } + if (countdownTimer) { clearInterval(countdownTimer); } @@ -37,7 +53,7 @@ function setAlarm() { if (timeLeft <= 0) { clearInterval(countdownTimer); - document.body.style.backgroundColor = "#ff4444"; + flashingBackground(); playAlarm(); } }, 1000);