diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..ebb09aa0c 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,38 @@ -function setAlarm() {} +function setAlarm() { + const input = document.getElementById("alarmSet"); + const heading = document.getElementById("timeRemaining"); + + let remainingSeconds = Number(input.value); + + function formatTime(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"); + + return `${mm}:${ss}`; + } + + heading.innerText = `Time Remaining: ${formatTime(remainingSeconds)}`; + + const intervalId = setInterval(() => { + remainingSeconds -= 1; + + if (remainingSeconds > 0) { + heading.innerText = `Time Remaining: ${formatTime(remainingSeconds)}`; + } else { + heading.innerText = "Time Remaining: 00:00"; + clearInterval(intervalId); + playAlarm(); + document.body.classList.add("flash"); + } + }, 1000); +} + +function stopFlashingBackground() { + document.body.classList.remove("flash"); +} // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..ff2d3b453 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Title here + Alarm clock app
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..f2ccb38e6 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -13,3 +13,13 @@ h1 { text-align: center; } + +.flash { + animation: flash-bg 0.5s infinite alternate; +} + +@keyframes flash-bg { + from { background-color: white; } + to { background-color: red; } +} +