From 0a669a9dffe5fd925cc6153d3b99ef01c7cbfab5 Mon Sep 17 00:00:00 2001 From: iswat Date: Wed, 19 Nov 2025 12:26:05 +0000 Subject: [PATCH 1/9] Update title in index.html to "Alarm clock app" --- 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 4131d89c49b3416e39d912456548a922efebe8bd Mon Sep 17 00:00:00 2001 From: iswat Date: Wed, 19 Nov 2025 12:56:00 +0000 Subject: [PATCH 2/9] Add pseudocode for setAlarm implementation --- Sprint-3/alarmclock/alarmclock.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..75c644be2 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,22 @@ -function setAlarm() {} +function setAlarm() { + // When I press the “Set Alarm” button: + // Read the number typed in the input field (in seconds) + // Store this value in a variable called timeRemaining + // Convert timeRemaining into minutes and seconds + // Format minutes and seconds so they always have 2 digits (mm:ss) + // Display "Time Remaining: mm:ss" on the UI + // Start a repeating timer using setInterval that runs every 1 second: + // Decrease timeRemaining by 1 + // Convert the new time into mm:ss + // Update the display + // If timeRemaining reaches 0: + // Stop the interval + // Display "00:00" + // Call playAlarm() + + // When I press the “Stop Alarm” button: + // Call pauseAlarm() to stop the sound +} // DO NOT EDIT BELOW HERE @@ -23,3 +41,4 @@ function pauseAlarm() { } window.onload = setup; + From 37c1d954f3d4bd0f6261a701ae690cc852c18472 Mon Sep 17 00:00:00 2001 From: iswat Date: Wed, 19 Nov 2025 14:59:21 +0000 Subject: [PATCH 3/9] Update setAlarm to capture input field value as the user types --- Sprint-3/alarmclock/alarmclock.js | 20 ++------------------ 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 75c644be2..782f9f737 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,21 +1,6 @@ function setAlarm() { - // When I press the “Set Alarm” button: - // Read the number typed in the input field (in seconds) - // Store this value in a variable called timeRemaining - // Convert timeRemaining into minutes and seconds - // Format minutes and seconds so they always have 2 digits (mm:ss) - // Display "Time Remaining: mm:ss" on the UI - // Start a repeating timer using setInterval that runs every 1 second: - // Decrease timeRemaining by 1 - // Convert the new time into mm:ss - // Update the display - // If timeRemaining reaches 0: - // Stop the interval - // Display "00:00" - // Call playAlarm() - - // When I press the “Stop Alarm” button: - // Call pauseAlarm() to stop the sound + // Grab the input element when the user types the number of seconds + let inputElement = document.getElementById("alarmSet"); } // DO NOT EDIT BELOW HERE @@ -41,4 +26,3 @@ function pauseAlarm() { } window.onload = setup; - From 51e3ab2afd6ccbd81261238fbb80b7880c8c6544 Mon Sep 17 00:00:00 2001 From: iswat Date: Wed, 19 Nov 2025 20:31:25 +0000 Subject: [PATCH 4/9] Add setAlarm function to start countdown and play alarm at 0 --- Sprint-3/alarmclock/alarmclock.js | 56 +++++++++++++++++++++++++++++-- Sprint-3/alarmclock/package.json | 6 +++- package.json | 6 ++++ 3 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 package.json diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 782f9f737..0b6fa6f4a 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,6 +1,58 @@ +// Declare a global variable to store the countdown currently running +let intervalId; + function setAlarm() { - // Grab the input element when the user types the number of seconds - let inputElement = document.getElementById("alarmSet"); + if (intervalId) { + clearInterval(intervalId); // when the set alarm button is clicked, if there is a countdown running, clear it + } + // When I press the “Set Alarm” button: + // Read the number typed in the input field (in seconds) + // Store this value in a variable called totalSeconds + // Convert totalSeconds into minutes and seconds and save them inside timeRemainingMinutes and timeRemainingSeconds respectively + // Format timeRemainingMinutes and timeRemainingSeconds so they always have 2 digits (mm:ss) + // Display "Time Remaining: mm:ss" on the UI + // Start a repeating timer using setInterval that runs every 1 second: + // Decrease timeRemaining by 1 + // Convert the new time into mm:ss + // Update the display + // If timeRemaining reaches 0: + // Stop the interval + // Display "00:00" + // Call playAlarm() + + let inputElement = document.getElementById("alarmSet"); // this is used to grab the input element so I can read whatever the user typed + let totalSeconds = Number(inputElement.value); //this converts the input from string to number + let timeRemainingMinutes = Math.floor(totalSeconds / 60); + let timeRemainingSeconds = totalSeconds % 60; + + timeRemainingMinutes = timeRemainingMinutes.toString().padStart(2, "0"); + timeRemainingSeconds = timeRemainingSeconds.toString().padStart(2, "0"); + + document.getElementById( + "timeRemaining" + ).textContent = `Time Remaining: ${timeRemainingMinutes}:${timeRemainingSeconds}`; + + intervalId = setInterval(() => { + // the code you write here will run every one second or 1000 milliseconds + totalSeconds = totalSeconds - 1; + if (totalSeconds <= 0) { + clearInterval(intervalId); + playAlarm(); + document.getElementById("timeRemaining").textContent = + "Time Remaining: 00:00"; + return; + } + + let timeRemainingMinutes = Math.floor(totalSeconds / 60); + let timeRemainingSeconds = totalSeconds % 60; + + timeRemainingMinutes = timeRemainingMinutes.toString().padStart(2, "0"); + timeRemainingSeconds = timeRemainingSeconds.toString().padStart(2, "0"); + + document.getElementById( + "timeRemaining" + ).textContent = `Time Remaining: ${timeRemainingMinutes}:${timeRemainingSeconds}`; + }, 1000); } // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json index e1331e071..491406869 100644 --- a/Sprint-3/alarmclock/package.json +++ b/Sprint-3/alarmclock/package.json @@ -13,5 +13,9 @@ "bugs": { "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues" }, - "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme" + "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", + "devDependencies": { + "@testing-library/jest-dom": "^6.9.1", + "jest-environment-jsdom": "^30.2.0" + } } diff --git a/package.json b/package.json new file mode 100644 index 000000000..9e2297f0b --- /dev/null +++ b/package.json @@ -0,0 +1,6 @@ +{ + "devDependencies": { + "@testing-library/jest-dom": "^6.9.1", + "jest-environment-jsdom": "^30.2.0" + } +} From eb4d2b8e33e23c8b5870a653956768b9cf64993d Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 01:33:35 +0000 Subject: [PATCH 5/9] Refactor setAlarm implementation to reduce repetition and extract shared time-formatting logic into an updateDisplay helper function --- Sprint-3/alarmclock/alarmclock.js | 38 +++++++++++++++---------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 0b6fa6f4a..c51db0494 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,6 +1,18 @@ // Declare a global variable to store the countdown currently running let intervalId; +// Helper function to format total seconds and update the UI +function updateDisplay(totalSeconds) { + let timeRemainingMinutes = Math.floor(totalSeconds / 60) + .toString() + .padStart(2, "0"); + let timeRemainingSeconds = (totalSeconds % 60).toString().padStart(2, "0"); + + document.getElementById( + "timeRemaining" + ).textContent = `Time Remaining: ${timeRemainingMinutes}:${timeRemainingSeconds}`; +} + function setAlarm() { if (intervalId) { clearInterval(intervalId); // when the set alarm button is clicked, if there is a countdown running, clear it @@ -22,36 +34,22 @@ function setAlarm() { let inputElement = document.getElementById("alarmSet"); // this is used to grab the input element so I can read whatever the user typed let totalSeconds = Number(inputElement.value); //this converts the input from string to number - let timeRemainingMinutes = Math.floor(totalSeconds / 60); - let timeRemainingSeconds = totalSeconds % 60; - - timeRemainingMinutes = timeRemainingMinutes.toString().padStart(2, "0"); - timeRemainingSeconds = timeRemainingSeconds.toString().padStart(2, "0"); - - document.getElementById( - "timeRemaining" - ).textContent = `Time Remaining: ${timeRemainingMinutes}:${timeRemainingSeconds}`; + updateDisplay(totalSeconds); + // start the countdown intervalId = setInterval(() => { // the code you write here will run every one second or 1000 milliseconds totalSeconds = totalSeconds - 1; - if (totalSeconds <= 0) { + if (totalSeconds === 0) { clearInterval(intervalId); playAlarm(); document.getElementById("timeRemaining").textContent = "Time Remaining: 00:00"; + document.getElementById() return; } - let timeRemainingMinutes = Math.floor(totalSeconds / 60); - let timeRemainingSeconds = totalSeconds % 60; - - timeRemainingMinutes = timeRemainingMinutes.toString().padStart(2, "0"); - timeRemainingSeconds = timeRemainingSeconds.toString().padStart(2, "0"); - - document.getElementById( - "timeRemaining" - ).textContent = `Time Remaining: ${timeRemainingMinutes}:${timeRemainingSeconds}`; + updateDisplay(totalSeconds); }, 1000); } @@ -78,3 +76,5 @@ function pauseAlarm() { } window.onload = setup; + + From c9e5625fa9afa0f14ba68097db9865f365ea8f1e Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 01:48:36 +0000 Subject: [PATCH 6/9] Clear the input field automatically after the countdown reaches zero --- Sprint-3/alarmclock/alarmclock.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index c51db0494..8c58e358c 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -35,6 +35,12 @@ function setAlarm() { let inputElement = document.getElementById("alarmSet"); // this is used to grab the input element so I can read whatever the user typed let totalSeconds = Number(inputElement.value); //this converts the input from string to number + // Validate input + if (totalSeconds <= 0 || isNaN(totalSeconds)) { + alert("Please enter a positive number!"); + return; + } + updateDisplay(totalSeconds); // start the countdown intervalId = setInterval(() => { @@ -45,7 +51,7 @@ function setAlarm() { playAlarm(); document.getElementById("timeRemaining").textContent = "Time Remaining: 00:00"; - document.getElementById() + document.getElementById("alarmSet").value = ""; return; } From 06816bc0029dcb49223049207cc78385d1c04282 Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 11:53:21 +0000 Subject: [PATCH 7/9] Fix countdown to stop at 00:00 and prevent negative values; change timeRemaining title background to blue at end and reset to default at start --- Sprint-3/alarmclock/alarmclock.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 8c58e358c..9a53f238a 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -40,17 +40,20 @@ function setAlarm() { alert("Please enter a positive number!"); return; } - + + document.getElementById("timeRemaining").style.backgroundColor = ""; + updateDisplay(totalSeconds); // start the countdown intervalId = setInterval(() => { // the code you write here will run every one second or 1000 milliseconds totalSeconds = totalSeconds - 1; - if (totalSeconds === 0) { + if (totalSeconds <= 0) { clearInterval(intervalId); playAlarm(); document.getElementById("timeRemaining").textContent = "Time Remaining: 00:00"; + document.getElementById("timeRemaining").style.backgroundColor = "blue"; document.getElementById("alarmSet").value = ""; return; } @@ -82,5 +85,3 @@ function pauseAlarm() { } window.onload = setup; - - From 57749a190c757022a742dc24af05d8761fee3c0a Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 12:25:29 +0000 Subject: [PATCH 8/9] Upgrade Jest version in package.json --- Sprint-3/alarmclock/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json index 491406869..0208f80af 100644 --- a/Sprint-3/alarmclock/package.json +++ b/Sprint-3/alarmclock/package.json @@ -16,6 +16,7 @@ "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", "devDependencies": { "@testing-library/jest-dom": "^6.9.1", + "jest": "^30.2.0", "jest-environment-jsdom": "^30.2.0" } } From 748f887138475f0c8e7f44f3ac8697068ffc1d39 Mon Sep 17 00:00:00 2001 From: iswat Date: Sat, 22 Nov 2025 13:48:29 +0000 Subject: [PATCH 9/9] =?UTF-8?q?Refactor:=20Store=20=E2=80=9CTime=20Remaini?= =?UTF-8?q?ng:=E2=80=9D=20label=20in=20a=20constant=20to=20avoid=20duplica?= =?UTF-8?q?tion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Sprint-3/alarmclock/alarmclock.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 9a53f238a..468110e71 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,5 +1,6 @@ // Declare a global variable to store the countdown currently running let intervalId; +const timesRemaining = "Time Remaining:"; // Helper function to format total seconds and update the UI function updateDisplay(totalSeconds) { @@ -10,7 +11,7 @@ function updateDisplay(totalSeconds) { document.getElementById( "timeRemaining" - ).textContent = `Time Remaining: ${timeRemainingMinutes}:${timeRemainingSeconds}`; + ).textContent = `${timesRemaining} ${timeRemainingMinutes}:${timeRemainingSeconds}`; } function setAlarm() { @@ -52,7 +53,7 @@ function setAlarm() { clearInterval(intervalId); playAlarm(); document.getElementById("timeRemaining").textContent = - "Time Remaining: 00:00"; + `${timesRemaining} 00:00`; document.getElementById("timeRemaining").style.backgroundColor = "blue"; document.getElementById("alarmSet").value = ""; return;