From 75028ecdac54da40ee1eac7846e2ba3b5ef144a0 Mon Sep 17 00:00:00 2001 From: Seti Mussa Date: Sat, 4 Apr 2026 18:51:12 +0100 Subject: [PATCH] I have completed sprint 3 alarm clock --- Sprint-3/alarmclock/alarmclock.js | 90 +++++++++++++++++++++++++++---- Sprint-3/alarmclock/index.html | 21 ++++---- Sprint-3/alarmclock/style.css | 16 +++--- 3 files changed, 95 insertions(+), 32 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..885caffac 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,25 +1,93 @@ -function setAlarm() {} +let timeRemaining = 0; +let timerId = null; -// DO NOT EDIT BELOW HERE +const audio = new Audio("alarmsound.mp3"); -var audio = new Audio("alarmsound.mp3"); +// FORMAT mm:ss +function formatTime(seconds) { + const mins = Math.floor(seconds / 60); + const secs = seconds % 60; -function setup() { - document.getElementById("set").addEventListener("click", () => { - setAlarm(); - }); + return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`; +} - document.getElementById("stop").addEventListener("click", () => { - pauseAlarm(); - }); +// UPDATE DISPLAY (MUST MATCH TEST EXACTLY) +function updateDisplay() { + const heading = document.getElementById("timeRemaining"); + heading.textContent = "Time Remaining: " + formatTime(timeRemaining); } +// REQUIRED BY TESTS function playAlarm() { + audio.loop = true; + audio.currentTime = 0; audio.play(); } -function pauseAlarm() { +// STOP ALARM +function stopAlarm() { audio.pause(); + audio.currentTime = 0; + audio.loop = false; + + clearInterval(timerId); + timerId = null; + + document.body.style.backgroundColor = ""; +} + +// TRIGGER ALARM +function triggerAlarm() { + document.body.style.backgroundColor = "red"; + playAlarm(); +} + +// START TIMER +function startTimer() { + clearInterval(timerId); + + timerId = setInterval(() => { + timeRemaining--; + + updateDisplay(); + + if (timeRemaining <= 0) { + clearInterval(timerId); + timerId = null; + + timeRemaining = 0; + updateDisplay(); + + triggerAlarm(); + } + }, 1000); +} + +// SET ALARM +function setAlarm() { + const input = document.getElementById("alarmSet").value; + + // ensure clean number input + timeRemaining = parseInt(input, 10); + + if (isNaN(timeRemaining) || timeRemaining < 0) { + timeRemaining = 0; + } + + updateDisplay(); + + if (timeRemaining > 0) { + startTimer(); + } +} + +// SETUP +function setup() { + document.getElementById("set").addEventListener("click", setAlarm); + document.getElementById("stop").addEventListener("click", stopAlarm); + + timeRemaining = 0; + updateDisplay(); } window.onload = setup; diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..2025e301b 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -2,19 +2,18 @@ - - - Title here + Alarm Clock + -
-

Time Remaining: 00:00

- - +

+ 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..41ebdc519 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -1,15 +1,11 @@ -.centre { - position: fixed; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} - -#alarmSet { - margin: 20px; +body { + background-color: blanchedalmond; } h1 { text-align: center; } + +#alarmSet { + margin: 20px; +} \ No newline at end of file