From f1e764ed9d6616bd0a1eef8fa790f9054fc41c05 Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sat, 13 Sep 2025 22:46:45 +0100 Subject: [PATCH 01/10] Fix alarm clock: correctly read input, start countdown, update display, and play alarm --- .../{index.html => Alarm clock app.html} | 2 +- Sprint-3/alarmclock/alarmclock.js | 56 ++++++++++++++++++- 2 files changed, 56 insertions(+), 2 deletions(-) rename Sprint-3/alarmclock/{index.html => Alarm clock app.html} (94%) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/Alarm clock app.html similarity index 94% rename from Sprint-3/alarmclock/index.html rename to Sprint-3/alarmclock/Alarm clock app.html index 48e2e80d9..4a91379d3 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/Alarm clock app.html @@ -4,7 +4,7 @@ - Title here + Alarm Clock App
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..3c78c0196 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,58 @@ -function setAlarm() {} +// alarmclock.js + +let timerId = null; // stores the setInterval id so we can clear it +let remainingSeconds = 0; // seconds left in the countdown + +function setAlarm() { + // Read input value (lowercase .value) and parse to integer seconds + const raw = document.getElementById("alarmSet").value; + const secs = parseInt(raw, 10); + + + // Validate input + if (Number.isNaN(secs) || secs <= 0) { + // show 00:00 for invalid input and do nothing + remainingSeconds = 0; + updateDisplay(); + return; + } + + // Set remaining seconds and clear any existing timer + remainingSeconds = Math.floor(secs); + if (timerId !== null) { + clearInterval(timerId); + timerId = null; + } + + // Update display immediately + updateDisplay(); + + // Start the countdown + timerId = setInterval(() => { + remainingSeconds -= 1; + + // Update display on every tick + updateDisplay(); + + if (remainingSeconds <= 0) { + // Ensure display shows 00:00, stop timer and play alarm + remainingSeconds = 0; + clearInterval(timerId); + timerId = null; + playAlarm(); + } + }, 1000); +} + +// Helper to format and write the time as MM:SS +function updateDisplay() { + const minutes = String(Math.floor(remainingSeconds / 60)).padStart(2, "0"); + const seconds = String(remainingSeconds % 60).padStart(2, "0"); + const el = document.getElementById("timeRemaining"); + if (el) { + el.textContent = `Time Remaining: ${minutes}:${seconds}`; + } +} // DO NOT EDIT BELOW HERE From ee835549289f29dda86180af2139d3dd44f9e989 Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sat, 13 Sep 2025 22:52:53 +0100 Subject: [PATCH 02/10] Reset the input box after reading the value --- 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 3c78c0196..1338b0cb1 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -7,6 +7,7 @@ function setAlarm() { // Read input value (lowercase .value) and parse to integer seconds const raw = document.getElementById("alarmSet").value; const secs = parseInt(raw, 10); + document.getElementById("alarmSet").value = ""; // Validate input From 202180a8b6269a928c00c734e770d5e568a0ff7d Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sat, 13 Sep 2025 22:56:53 +0100 Subject: [PATCH 03/10] Add flashing option in the CSS file --- Sprint-3/alarmclock/style.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..747f2e854 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -13,3 +13,17 @@ h1 { text-align: center; } +/* Add the advanced task that make the screen flashing */ +.flash { + animation: flash-bg 1s infinite alternate; +} + +@keyframes flash-bg { + from { + background-color: white; + } + + to { + background-color: red; + } +} From 626a06b001fe342c0e187f683d8756d5e93527d5 Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sat, 13 Sep 2025 22:58:08 +0100 Subject: [PATCH 04/10] Add class flash to playalarm function --- 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 1338b0cb1..303dced92 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -71,6 +71,7 @@ function setup() { function playAlarm() { audio.play(); + document.body.classList.add("flash"); } function pauseAlarm() { From 51ca30ba983026006b70e06851cdfd951d16afae Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sat, 13 Sep 2025 23:01:04 +0100 Subject: [PATCH 05/10] Remove flashing when the user pause the alarm --- 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 303dced92..9e8b0e3b6 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -76,6 +76,7 @@ function playAlarm() { function pauseAlarm() { audio.pause(); + document.body.classList.remove("flash"); } window.onload = setup; From 67ceaaa19399e1b3187195c9313ed4bf69faf675 Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sat, 13 Sep 2025 23:03:58 +0100 Subject: [PATCH 06/10] Add pausecountdown function --- Sprint-3/alarmclock/alarmclock.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 9e8b0e3b6..d5fc54efc 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -54,6 +54,13 @@ function updateDisplay() { el.textContent = `Time Remaining: ${minutes}:${seconds}`; } } +function pauseCountdown() { + if (timerId !== null) { + clearInterval(timerId); + timerId = null; + } +} + // DO NOT EDIT BELOW HERE From 1788f51432a73be25a8074ec3ca1ba773dd57d47 Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sat, 13 Sep 2025 23:05:31 +0100 Subject: [PATCH 07/10] Add pause alarm button to the page HTML --- Sprint-3/alarmclock/Alarm clock app.html | 1 + 1 file changed, 1 insertion(+) diff --git a/Sprint-3/alarmclock/Alarm clock app.html b/Sprint-3/alarmclock/Alarm clock app.html index 4a91379d3..a9930ee72 100644 --- a/Sprint-3/alarmclock/Alarm clock app.html +++ b/Sprint-3/alarmclock/Alarm clock app.html @@ -14,6 +14,7 @@

Time Remaining: 00:00

+
From 82a7c000ea78a940959382b9e54259676e332e93 Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sat, 13 Sep 2025 23:08:22 +0100 Subject: [PATCH 08/10] Add eventlistener to the setup function --- Sprint-3/alarmclock/alarmclock.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index d5fc54efc..47d3e28ec 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -74,6 +74,9 @@ function setup() { document.getElementById("stop").addEventListener("click", () => { pauseAlarm(); }); + document.getElementById("pause").addEventListener("click", () => { + pauseCountdown(); +}); } function playAlarm() { From 7a3855c9d52d7cea40df5fa56940600930bc7989 Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sat, 13 Sep 2025 23:19:00 +0100 Subject: [PATCH 09/10] Add comment to the pausecountdown function --- 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 47d3e28ec..d08d48725 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -54,6 +54,7 @@ function updateDisplay() { el.textContent = `Time Remaining: ${minutes}:${seconds}`; } } +// pauseCountdown stops the countdown timer function pauseCountdown() { if (timerId !== null) { clearInterval(timerId); From 562e5fc57e0b7103114d2a429a99b4dc7c59cf60 Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sun, 14 Sep 2025 00:23:49 +0100 Subject: [PATCH 10/10] Refactor the code without touching DO NOT EDIT BELOW HERE --- Sprint-3/alarmclock/Alarm clock app.html | 1 + Sprint-3/alarmclock/alarmclock.js | 113 ++++++++++++++--------- 2 files changed, 71 insertions(+), 43 deletions(-) diff --git a/Sprint-3/alarmclock/Alarm clock app.html b/Sprint-3/alarmclock/Alarm clock app.html index a9930ee72..46a954bc4 100644 --- a/Sprint-3/alarmclock/Alarm clock app.html +++ b/Sprint-3/alarmclock/Alarm clock app.html @@ -15,6 +15,7 @@

Time Remaining: 00:00

+ diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index d08d48725..e917ac2c3 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,67 +1,96 @@ -// alarmclock.js +// Refactor the Alarm Clock code with advanced features -let timerId = null; // stores the setInterval id so we can clear it -let remainingSeconds = 0; // seconds left in the countdown +let timerId = null; +let remainingSeconds = 0; +let alarmFlashing = false; -function setAlarm() { - // Read input value (lowercase .value) and parse to integer seconds - const raw = document.getElementById("alarmSet").value; - const secs = parseInt(raw, 10); - document.getElementById("alarmSet").value = ""; - - - // Validate input - if (Number.isNaN(secs) || secs <= 0) { - // show 00:00 for invalid input and do nothing - remainingSeconds = 0; - updateDisplay(); - return; - } +// Update the display +function updateDisplay() { + let minutes = String(Math.floor(remainingSeconds / 60)).padStart(2, "0"); + let seconds = String(remainingSeconds % 60).padStart(2, "0"); + document.getElementById( + "timeRemaining" + ).textContent = `Time Remaining: ${minutes}:${seconds}`; +} - // Set remaining seconds and clear any existing timer - remainingSeconds = Math.floor(secs); - if (timerId !== null) { - clearInterval(timerId); - timerId = null; +// Start flashing background +function startFlashing() { + if (!alarmFlashing) { + document.body.classList.add("flash"); + alarmFlashing = true; } +} - // Update display immediately - updateDisplay(); +// Stop flashing background +function stopFlashing() { + if (alarmFlashing) { + document.body.classList.remove("flash"); + document.body.style.backgroundColor = "white"; + alarmFlashing = false; + } +} - // Start the countdown +// Shared countdown logic +function startCountdown() { timerId = setInterval(() => { remainingSeconds -= 1; - - // Update display on every tick + // Update the display each second updateDisplay(); if (remainingSeconds <= 0) { - // Ensure display shows 00:00, stop timer and play alarm + // Time's up remainingSeconds = 0; clearInterval(timerId); timerId = null; - playAlarm(); + playAlarm(); // plays sound only + startFlashing(); // flash background } }, 1000); } -// Helper to format and write the time as MM:SS -function updateDisplay() { - const minutes = String(Math.floor(remainingSeconds / 60)).padStart(2, "0"); - const seconds = String(remainingSeconds % 60).padStart(2, "0"); - const el = document.getElementById("timeRemaining"); - if (el) { - el.textContent = `Time Remaining: ${minutes}:${seconds}`; - } +// Set a new alarm +function setAlarm() { + const input = document.getElementById("alarmSet"); + const time = parseInt(input.value, 10); + + if (isNaN(time) || time <= 0) return; + + clearInterval(timerId); + timerId = null; + remainingSeconds = time; + input.value = ""; + + stopFlashing(); // reset background if previous alarm was active + updateDisplay(); + startCountdown(); } -// pauseCountdown stops the countdown timer + +// Pause countdown function pauseCountdown() { if (timerId !== null) { clearInterval(timerId); timerId = null; } + stopFlashing(); // stop flashing if paused } +// Resume countdown +function resumeCountdown() { + if (timerId === null && remainingSeconds > 0) { + startCountdown(); + } +} + +// --- Event listeners for Pause and Resume moved outside DO NOT EDIT --- +window.addEventListener("DOMContentLoaded", () => { + const pauseBtn = document.getElementById("pause"); + const resumeBtn = document.getElementById("resume"); + const stopBtn = document.getElementById("stop"); + + if (pauseBtn) pauseBtn.addEventListener("click", pauseCountdown); + if (resumeBtn) resumeBtn.addEventListener("click", resumeCountdown); + if (stopBtn) stopBtn.addEventListener("click", stopFlashing); // reset background +}); // DO NOT EDIT BELOW HERE @@ -75,19 +104,17 @@ function setup() { document.getElementById("stop").addEventListener("click", () => { pauseAlarm(); }); - document.getElementById("pause").addEventListener("click", () => { - pauseCountdown(); -}); + } function playAlarm() { audio.play(); - document.body.classList.add("flash"); + } function pauseAlarm() { audio.pause(); - document.body.classList.remove("flash"); + } window.onload = setup;