diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..9372aa9eb 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,92 @@ -function setAlarm() {} +const titleElement = document.getElementById("timeRemaining"); + +const ONE_SECOND_IN_MILLISECONDS = 1000; + +let timeRemainingInSeconds = 0; +let alarmTimerIdentifier = null; + +/** + * Formats seconds into "MM:SS". + */ +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 `Time Remaining: ${formattedMinutes}:${formattedSeconds}`; +} + +/** + * Displays the remaining time. + */ +function displayTime() { + titleElement.innerText = formatTime(timeRemainingInSeconds); +} + +/** + * Updates the display and checks if the alarm should sound. + */ +function updateTime() { + timeRemainingInSeconds = timeRemainingInSeconds - 1; + displayTime(); + + if (timeRemainingInSeconds === 0) { + playAlarm(); + document.body.classList.add("flash"); + clearInterval(alarmTimerIdentifier); + alarmTimerIdentifier = null; + } +} + +/** + * Initialises the alarm countdown. + */ +function setAlarm() { + if (alarmTimerIdentifier) { + clearInterval(alarmTimerIdentifier); + document.body.classList.remove("flash"); + } + + const timeInput = document.getElementById("alarmSet"); + const startingTime = parseInt(timeInput.value, 10); + + if (isNaN(startingTime)) { + return; + } + + if (startingTime < 0) { + return; + } + + timeRemainingInSeconds = startingTime; + + // Initialise the audio context to enable autoplay. + audio.play(); + audio.pause(); + + displayTime(); + + // Handle zero-second edge case + if (timeRemainingInSeconds === 0) { + playAlarm(); + document.body.classList.add("flash"); + return; + } + + alarmTimerIdentifier = setInterval(() => { + updateTime(); + }, ONE_SECOND_IN_MILLISECONDS); +} + +// Add a listener to stop the flashing effect without modifying the protected pauseAlarm function below. +const stopButton = document.getElementById("stop"); +if (stopButton) { + stopButton.addEventListener("click", () => { + 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..c0ae6b482 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -1,19 +1,24 @@ - + - Title here + Alarm clock app -
+

Time Remaining: 00:00

- - - - +
+ + +
+ +
+ + +
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..785e85f58 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -1,15 +1,97 @@ -.centre { - position: fixed; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); +body { + background-color: #f0f0f0; + font-family: Arial, Helvetica, sans-serif; + color: #333; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; } -#alarmSet { - margin: 20px; +.flash { + animation: flash-animation 1s infinite; +} + +/* Flashing background colour animation */ +@keyframes flash-animation { + 0% { + background-color: #ffcccc; + } + 50% { + background-color: #ff0000; + } + 100% { + background-color: #ffcccc; + } +} + +.container { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 8px; + padding: 30px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + text-align: center; + max-width: 500px; + width: 90%; } h1 { + font-size: 2.5rem; + margin-bottom: 20px; + color: #333; +} + +.input-group { + margin-bottom: 20px; +} + +label { + display: block; + margin-bottom: 8px; + font-size: 1.1rem; +} + +input { + padding: 10px; + font-size: 1.2rem; + border: 1px solid #ccc; + border-radius: 4px; + width: 100px; text-align: center; } + +input:focus { + outline: none; + border-color: #007bff; +} + +.controls { + display: flex; + gap: 10px; + justify-content: center; +} + +button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + font-size: 1rem; + cursor: pointer; + border-radius: 4px; + transition: background-color 0.2s; +} + +button:hover { + background-color: #0056b3; +} + +button#stop { + background-color: #dc3545; +} + +button#stop:hover { + background-color: #a71d2a; +}