diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..9f8f1606c 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,55 @@ -function setAlarm() {} +const heading = document.querySelector("#timeRemaining"); +const input = document.querySelector("#alarmSet"); +const startBtn = document.querySelector("#set"); +const stopBtn = document.querySelector("#stop"); + +let timer = null; + +function renderTime(totalSeconds) { + const minutes = Math.floor(totalSeconds / 60); + const seconds = totalSeconds % 60; + const mm = String(minutes).padStart(2, "0"); + const ss = String(seconds).padStart(2, "0"); + heading.innerText = `Time Remaining: ${mm}:${ss}`; +} + +function setAlarm() { + const rawValue = input.value.trim(); + if (rawValue === "") { + return; + } + + let totalSeconds = Number(rawValue); + if (Number.isNaN(totalSeconds) || totalSeconds < 0) { + return; + } + + if (timer !== null) { + clearInterval(timer); + } + + renderTime(totalSeconds); + + if (totalSeconds === 0) { + playAlarm(); + timer = null; + input.value = ""; + return; + } + + timer = setInterval(() => { + totalSeconds--; + renderTime(totalSeconds); + + if (totalSeconds === 0) { + clearInterval(timer); + timer = null; + playAlarm(); + } + }, 1000); + + input.value = ""; +} // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..36715d7d9 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