diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..995e25a12 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,48 @@ -function setAlarm() {} +let timerInterval = null; + +function setAlarm() { + const inputEl = document.getElementById("alarmSet"); + const timeRemainingEl = document.getElementById("timeRemaining"); + + let totalSeconds = parseInt(inputEl.value, 10); + + // If input is invalid or empty, default to 0 + if (isNaN(totalSeconds) || totalSeconds <= 0) { + if (timerInterval) clearInterval(timerInterval); // Stop any running timer + timeRemainingEl.innerText = "Please enter a valid time (greater than 0)"; // Inform the user + return; + } + // Clear any existing timer if the button is clicked again + if (timerInterval) { + clearInterval(timerInterval); + } + // Function to render the formatted time (MM:SS) to the DOM + function updateDisplay() { + const minutes = Math.floor(totalSeconds / 60); + const seconds = totalSeconds % 60; + + const formattedMinutes = String(minutes).padStart(2, "0"); + const formattedSeconds = String(seconds).padStart(2, "0"); + + timeRemainingEl.innerText = `Time Remaining: ${formattedMinutes}:${formattedSeconds}`; + } + // 1. Immediately set heading on button click + updateDisplay(); + + // 2. Start the countdown timer + timerInterval = setInterval(() => { + totalSeconds -= 1; + + if (totalSeconds >= 0) { + updateDisplay(); + } + + if (totalSeconds === 0) { + playAlarm(); + clearInterval(timerInterval); + } + }, 1000); +} // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..409de67ec 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -1,20 +1,23 @@ - - - - - Title here - - -
-

Time Remaining: 00:00

- - - - -
- - - + + + + + Alarm Clock App + + + +
+

Time Remaining: 00:00

+ + + + + +
+ + + + \ No newline at end of file