diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..0e28e61b0 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,54 @@
-function setAlarm() {}
+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
+
+ // 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
+ }
+
+ 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
+
+ // change background color when the alarm clock finishes
+ document.body.style.backgroundColor = "red";
+ }
+
+ }, 1000); // run every one second
+
+
+}
+
+
+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
@@ -20,6 +70,18 @@ function playAlarm() {
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;
+ }
}
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
+