From 0aa234b255977f45038ed7cd20fbbfb7d3f8aa2b Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Tue, 18 Nov 2025 21:15:45 +0000 Subject: [PATCH 1/6] Created the updateDisplay function to update the screen Time Remaining with minutes and seconds. --- Sprint-3/alarmclock/alarmclock.js | 20 +++++++++++++++++++- Sprint-3/alarmclock/index.html | 5 +++-- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..68d88ada8 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,19 @@ -function setAlarm() {} +function setAlarm() { + + +} + +function updateDisplay(totalSeconds) { + console.log("updating display with", totalSeconds); + const display = document.getElementById("timeRemaining"); // find h1 element + + if (totalSeconds < 0) totalSeconds = 0; // safety prevent negative time. + + const mins = String(Math.floor(totalSeconds / 60)).padStart(2, "0"); // Math.floor method rounds down and return the larges integer less than or equal to a given number. + const secs = String(totalSeconds % 60).padStart(2, "0"); // calculate remaining seconds. + + display.textContent = `Time Remaining: ${mins}:${secs}`; // update h1 text +} // DO NOT EDIT BELOW HERE @@ -23,3 +38,6 @@ function pauseAlarm() { } window.onload = setup; + + + diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..631003fad 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,9 +4,10 @@ - Title here + Alarm clock app +

Time Remaining: 00:00

@@ -15,6 +16,6 @@

Time Remaining: 00:00

- + From c0ed94240ba487c7deb67854bd9ae04034a2adef Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Tue, 18 Nov 2025 23:39:08 +0000 Subject: [PATCH 2/6] Executed the setAlarm function that we can read the number the user typed, start a countdown from that number, update the display every second and play an alarm when the time reaches zero. --- Sprint-3/alarmclock/alarmclock.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 68d88ada8..645aa37b5 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,7 +1,37 @@ + function setAlarm() { + const input = document.getElementById("alarmSet") // get the input field + let timeLeft = Number(input.value); // convert input value to a number + + // validate the input value + if (!Number.isFinite(timeLeft) || timeLeft <= 0) { // The Number.isFinite() method is a way to test whether a value + // is a finite number value. and also prevents the error if the user types nothing or a negative number. + return "input is invalid"; // input is invalid + } + + updateDisplay(timeLeft); // show the starting time immediately + + if (countdown) { + clearInterval(countdown) + // clear previous countdown if running + // if a countdown is already running stop it before starting a new one. + } + + // start countdown + countdown = setInterval(() => { + timeLeft -= 1; // reduce time by 1 seconds + updateDisplay(timeLeft); // update display + if (timeLeft <= 0) { // when time reaches 0 + clearInterval(countdown); // stop the countdown + countdown = null; // reset variable + playAlarm(); // play the alarm sound + } + + }, 1000); // run every one second } +let countdown = null; function updateDisplay(totalSeconds) { console.log("updating display with", totalSeconds); From ec2a9ff780ad2b1abeac8cef8b69072f6dbd6d47 Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Wed, 19 Nov 2025 19:32:28 +0000 Subject: [PATCH 3/6] Reset the alarm to make sure next time starts from the beginning and clearing the interval stops the countdown immediately if user press Stop alarm. --- Sprint-3/alarmclock/alarmclock.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 645aa37b5..9a86e11d7 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -65,6 +65,12 @@ function playAlarm() { function pauseAlarm() { audio.pause(); + audio.currentTime = 0; // reset to start, make sure next time play alarm starts from the beginning. + + if(countdown) { + clearInterval(countdown); // clearing the interval stops the countdown immediately if user press Stop alarm + countdown = null; + } } window.onload = setup; From 83bf7f832f8bde23e3c1bfb93d6a275d51c39c40 Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Wed, 19 Nov 2025 21:20:08 +0000 Subject: [PATCH 4/6] Made the background color change when the alarm clock finishes and reset the background color when Stop Alarm is pressed. --- 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 9a86e11d7..19f995bfe 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -21,10 +21,14 @@ function setAlarm() { countdown = setInterval(() => { timeLeft -= 1; // reduce time by 1 seconds updateDisplay(timeLeft); // update display + if (timeLeft <= 0) { // when time reaches 0 clearInterval(countdown); // stop the countdown countdown = null; // reset variable playAlarm(); // play the alarm sound + + // change background color when the alarm clock finishes + document.body.style.backgroundColor = "red"; } }, 1000); // run every one second @@ -67,6 +71,9 @@ function pauseAlarm() { audio.pause(); audio.currentTime = 0; // reset to start, make sure next time play alarm starts from the beginning. + // reset the background color to original + document.body.style.backgroundColor = ""; + if(countdown) { clearInterval(countdown); // clearing the interval stops the countdown immediately if user press Stop alarm countdown = null; From b0949248ba4f3017b5547e557e672c0ff6f80b64 Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Sun, 23 Nov 2025 00:23:04 +0000 Subject: [PATCH 5/6] removed 'input is invalid' from the return on line 9 and moved the let countdown = null; above the setAlarm for better readable. --- Sprint-3/alarmclock/alarmclock.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 19f995bfe..ef78419c4 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,4 @@ - +let countdown = null; function setAlarm() { const input = document.getElementById("alarmSet") // get the input field let timeLeft = Number(input.value); // convert input value to a number @@ -6,7 +6,7 @@ function setAlarm() { // validate the input value if (!Number.isFinite(timeLeft) || timeLeft <= 0) { // The Number.isFinite() method is a way to test whether a value // is a finite number value. and also prevents the error if the user types nothing or a negative number. - return "input is invalid"; // input is invalid + return; // input is invalid } updateDisplay(timeLeft); // show the starting time immediately @@ -35,7 +35,7 @@ function setAlarm() { } -let countdown = null; + function updateDisplay(totalSeconds) { console.log("updating display with", totalSeconds); From 3d400c6dc9d6d78188a9fd447f37083ad384e83b Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Sun, 23 Nov 2025 00:34:26 +0000 Subject: [PATCH 6/6] When the set Alarm button is clicked, the backround color reset to its original color. --- 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 ef78419c4..0e28e61b0 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,5 +1,6 @@ let countdown = null; function setAlarm() { + document.body.style.backgroundColor = ""; // reset the background color when set Alarm button is clicked const input = document.getElementById("alarmSet") // get the input field let timeLeft = Number(input.value); // convert input value to a number