diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..23f58aede 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,6 +1,33 @@ function setAlarm() {} // DO NOT EDIT BELOW HERE +let countdown; + +function setAlarm() { + let seconds = Number(document.getElementById("alarmSet").value); + + function updateDisplay() { + let mins = Math.floor(seconds / 60); + let secs = seconds % 60; + let mm = String(mins).padStart(2, "0"); + let ss = String(secs).padStart(2, "0"); + document.getElementById("timeRemaining").innerText = + "Time Remaining: " + mm + ":" + ss; + } + + updateDisplay(); + clearInterval(countdown); + + countdown = setInterval(function () { + seconds--; + updateDisplay(); + + if (seconds <= 0) { + clearInterval(countdown); + playAlarm(); + } + }, 1000); +} var audio = new Audio("alarmsound.mp3"); @@ -19,7 +46,10 @@ function playAlarm() { } function pauseAlarm() { + /* Stop the bell and freeze the timer */ + clearInterval(countdown); audio.pause(); + audio.currentTime = 0; } window.onload = setup; diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..5e6780e8f 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -1,9 +1,27 @@ +body { + font-family: Arial, sans-serif; + background: #f5f5f5; + margin: 0; + padding: 0; +} + .centre { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); + background: white; + padding: 30px 40px; + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + text-align: center; +} + +h1 { + margin-bottom: 20px; + font-size: 24px; + color: #333; } #alarmSet { @@ -12,4 +30,29 @@ h1 { text-align: center; + border: 2px solid #ddd; + border-radius: 6px; +} + +button { + padding: 10px 18px; + margin: 5px; + font-size: 15px; + border: none; + border-radius: 6px; + cursor: pointer; +} + +#set { + background: #4caf50; + color: white; +} + +#stop { + background: #e53935; + color: white; +} + +button:hover { + opacity: 0.85; }