diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..9e201eb45 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,47 @@ -function setAlarm() {} +let countdownInterval; // Variable to hold the countdown interval + +function setAlarm() { + if (countdownInterval) { + clearInterval(countdownInterval); + } + // Get the input value from the alarm input field + let inputNum = document.getElementById("alarmSet"); + let alarmTime = Number(inputNum.value); + + // reset the background color to white + document.body.style.backgroundColor = "white"; + + // Update the time remaining display + updateTimeRemaining(alarmTime); + + //Setting the interval so that when one second passes, the time remaining will be updated + countdownInterval = setInterval(() => { + alarmTime--; + + if (alarmTime <= 0) { + clearInterval(countdownInterval); + updateTimeRemaining(0); + document.body.style.backgroundColor = "red"; + playAlarm(); + return; + } else { + updateTimeRemaining(alarmTime); + } + }, 1000); +} + +function updateTimeRemaining(seconds) { + // Converting the input value into a time format + const mins = Math.floor(seconds / 60); + const secs = seconds % 60; + const formattedTime = `${mins.toString().padStart(2, "0")}:${secs + .toString() + .padStart(2, "0")}`; + + // Set the alarm time in the Time Remaining display + document.getElementById("timeRemaining").innerText = + "Time Remaining: " + formattedTime; +} // DO NOT EDIT BELOW HERE @@ -11,6 +54,9 @@ function setup() { document.getElementById("stop").addEventListener("click", () => { pauseAlarm(); + //Reset the background color to white when the alarm is stopped + document.body.style.backgroundColor = "white"; + document.getElementById("alarmSet").value = ""; }); } diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..4a91379d3 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ -