diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..ca8ebedb7 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,10 +1,114 @@ -function setAlarm() {} +// Store the current countdown value in seconds +let remainingSeconds = 0; + +// Store the timer ID so an existing timer can be cleared +let countdownTimerId = null; + +/** + * Converts a number of seconds into mm:ss format. + * Example: + * 19 -> 00:19 + * 119 -> 01:59 + */ +function formatTime(totalSeconds) { + const minutes = Math.floor(totalSeconds / 60); + const seconds = totalSeconds % 60; + + const formattedMinutes = String(minutes).padStart(2, "0"); + const formattedSeconds = String(seconds).padStart(2, "0"); + + return `${formattedMinutes}:${formattedSeconds}`; +} + +/** + * Updates the heading text with the current remaining time. + */ +function updateHeading() { + const heading = document.getElementById("timeRemaining"); + heading.innerText = `Time Remaining: ${formatTime(remainingSeconds)}`; +} + +/** + * Resets the background colour to the default state. + */ +function resetBackground() { + document.body.classList.remove("alarm-finished"); +} + +/** + * Changes the background colour when the timer reaches zero. + */ +function showAlarmFinishedState() { + document.body.classList.add("alarm-finished"); +} + +/** + * Stops any existing countdown timer. + */ +function stopCountdown() { + if (countdownTimerId !== null) { + clearInterval(countdownTimerId); + countdownTimerId = null; + } +} + +/** + * Starts the countdown timer and updates the heading every second. + */ +function startCountdown() { + countdownTimerId = setInterval(() => { + if (remainingSeconds > 0) { + remainingSeconds -= 1; + updateHeading(); + } + + if (remainingSeconds === 0) { + stopCountdown(); + showAlarmFinishedState(); + playAlarm(); + } + }, 1000); +} + +/** + * Reads the value from the input, updates the heading, + * resets the background, stops any existing alarm sound, + * and starts the countdown. + */ +function setAlarm() { + const input = document.getElementById("alarmSet"); + const inputValue = Number(input.value); + + // Prevent invalid negative values + if (Number.isNaN(inputValue) || inputValue < 0) { + return; + } + + // Stop any previous countdown before starting a new one + stopCountdown(); + + // Stop any alarm sound that may already be playing + pauseAlarm(); + + // Reset the page state for a new alarm + resetBackground(); + + // Store the new number of seconds and update the heading immediately + remainingSeconds = Math.floor(inputValue); + updateHeading(); + + // Start counting down every second + startCountdown(); +} // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); function setup() { + // Make the alarm loop continuously until stopped + audio.loop = true; + document.getElementById("set").addEventListener("click", () => { setAlarm(); }); diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..d588e5628 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,17 +4,21 @@ - Title here + Alarm Clock

Time Remaining: 00:00

+ - + - - +
+ + +
+ - + \ No newline at end of file diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..06749aa5e 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -1,15 +1,65 @@ +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + background-color: #f4f4f4; + transition: background-color 0.3s ease; +} + +/* Background changes when the alarm finishes */ +body.alarm-finished { + background-color: #ffdddd; +} + .centre { position: fixed; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); + width: min(90%, 420px); + text-align: center; + background-color: white; + padding: 24px; + border-radius: 12px; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); +} + +h1 { + text-align: center; + margin-bottom: 20px; +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; } #alarmSet { - margin: 20px; + width: 100%; + margin: 0 0 20px 0; + padding: 12px; + font-size: 16px; + border-radius: 8px; + border: 1px solid #cccccc; + box-sizing: border-box; } -h1 { - text-align: center; +.button-row { + display: flex; + gap: 12px; + justify-content: center; +} + +button { + padding: 12px 18px; + font-size: 16px; + border: none; + border-radius: 8px; + background-color: #0b5ed7; + color: white; + cursor: pointer; } + +button:hover { + background-color: #094db1; +} \ No newline at end of file