From f67e8d23ea0cca9afb28ac4c1fe443366998b898 Mon Sep 17 00:00:00 2001 From: XiaoQuark Date: Mon, 20 Apr 2026 13:44:30 +0100 Subject: [PATCH 1/7] coursework: create setAlarm function to change the timeRemaining element based on user input --- Sprint-3/alarmclock/alarmclock.js | 16 ++++++++++++++++ Sprint-3/alarmclock/index.html | 4 ++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..b381f7cf6 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -14,6 +14,22 @@ function setup() { }); } +function setAlarm() { + const timeInput = document.getElementById("alarmSet"); + + const seconds = timeInput.value; + const remainingSeconds = seconds % 60; + + const minutes = (seconds - remainingSeconds) / 60; + + const formattedSeconds = remainingSeconds.toString().padStart(2, "0"); + const formattedMinutes = minutes.toString().padStart(2, "0"); + + const remainingTime = document.getElementById("timeRemaining"); + remainingTime.textContent = `Time Remaining: ${formattedMinutes}:${formattedSeconds}`; + console.log(remainingTime); +} + function playAlarm() { audio.play(); } diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..66748001e 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -1,10 +1,10 @@ - + - Title here + Alarm clock app
From 9fcfad281eeb49fac6590e2881e8a9d65938440d Mon Sep 17 00:00:00 2001 From: XiaoQuark Date: Mon, 20 Apr 2026 14:07:15 +0100 Subject: [PATCH 2/7] set interval based on time input before calling playAlarm --- Sprint-3/alarmclock/alarmclock.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index b381f7cf6..9e52e4d7f 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -27,7 +27,14 @@ function setAlarm() { const remainingTime = document.getElementById("timeRemaining"); remainingTime.textContent = `Time Remaining: ${formattedMinutes}:${formattedSeconds}`; - console.log(remainingTime); + + const milliseconds = timeInput.value * 1000; + console.log(milliseconds); + setInterval(playAlarm, milliseconds); +} + +function timeCountdown(time) { + setInterval(playAlarm, time); } function playAlarm() { From ad4a3a6e5e1cc1575db674420b0d4284853d7b22 Mon Sep 17 00:00:00 2001 From: XiaoQuark Date: Mon, 20 Apr 2026 14:59:58 +0100 Subject: [PATCH 3/7] refactor: delay playAlarm with setTimeout and use setInterval to change the time in the UI --- Sprint-3/alarmclock/alarmclock.js | 34 ++++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 9e52e4d7f..9d7106f03 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -14,27 +14,41 @@ function setup() { }); } +const state = { + initialTime: 0, + remainingTime: 0, +}; + function setAlarm() { const timeInput = document.getElementById("alarmSet"); + state.initialTime = timeInput.value; + state.remainingTime = state.initialTime; + const formattedTime = formatTime(state.initialTime); + timeInput.value = ""; - const seconds = timeInput.value; - const remainingSeconds = seconds % 60; + const displayedTime = document.getElementById("timeRemaining"); + displayedTime.textContent = `Time Remaining: ${formattedTime}`; + + setInterval(timeCountdownUI, 1000); + setTimeout(playAlarm, state.initialTime * 1000); +} +function formatTime(seconds) { + console.log(seconds); + const remainingSeconds = seconds % 60; const minutes = (seconds - remainingSeconds) / 60; const formattedSeconds = remainingSeconds.toString().padStart(2, "0"); const formattedMinutes = minutes.toString().padStart(2, "0"); - const remainingTime = document.getElementById("timeRemaining"); - remainingTime.textContent = `Time Remaining: ${formattedMinutes}:${formattedSeconds}`; - - const milliseconds = timeInput.value * 1000; - console.log(milliseconds); - setInterval(playAlarm, milliseconds); + return `${formattedMinutes}:${formattedSeconds}`; } -function timeCountdown(time) { - setInterval(playAlarm, time); +function timeCountdownUI() { + const displayedTime = document.getElementById("timeRemaining"); + state.remainingTime -= 1; + const countingDownTime = formatTime(state.remainingTime); + displayedTime.textContent = `Time Remaining: ${countingDownTime}`; } function playAlarm() { From 5932f54c6639a2d118d21176311905301bc19ab1 Mon Sep 17 00:00:00 2001 From: XiaoQuark Date: Mon, 20 Apr 2026 15:37:32 +0100 Subject: [PATCH 4/7] refactor setInterval and remove setTimeout. Inplement clearInterval by storing interval ID in state --- Sprint-3/alarmclock/alarmclock.js | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 9d7106f03..53596db96 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -17,11 +17,12 @@ function setup() { const state = { initialTime: 0, remainingTime: 0, + timerId: null, }; function setAlarm() { const timeInput = document.getElementById("alarmSet"); - state.initialTime = timeInput.value; + state.initialTime = +timeInput.value; state.remainingTime = state.initialTime; const formattedTime = formatTime(state.initialTime); timeInput.value = ""; @@ -29,12 +30,10 @@ function setAlarm() { const displayedTime = document.getElementById("timeRemaining"); displayedTime.textContent = `Time Remaining: ${formattedTime}`; - setInterval(timeCountdownUI, 1000); - setTimeout(playAlarm, state.initialTime * 1000); + state.timerId = setInterval(timer, 1000); } function formatTime(seconds) { - console.log(seconds); const remainingSeconds = seconds % 60; const minutes = (seconds - remainingSeconds) / 60; @@ -44,11 +43,19 @@ function formatTime(seconds) { return `${formattedMinutes}:${formattedSeconds}`; } -function timeCountdownUI() { +function timer() { const displayedTime = document.getElementById("timeRemaining"); - state.remainingTime -= 1; - const countingDownTime = formatTime(state.remainingTime); - displayedTime.textContent = `Time Remaining: ${countingDownTime}`; + + console.log(state.remainingTime); + if (state.remainingTime === 0) { + clearInterval(state.timerId); + state.timerId = null; + playAlarm(); + } else { + state.remainingTime -= 1; + const countingDownTime = formatTime(state.remainingTime); + displayedTime.textContent = `Time Remaining: ${countingDownTime}`; + } } function playAlarm() { From c4c92604c11e39e2c204de97be03819881927826 Mon Sep 17 00:00:00 2001 From: XiaoQuark Date: Mon, 20 Apr 2026 15:42:56 +0100 Subject: [PATCH 5/7] implement change of background colour when alarm plays --- Sprint-3/alarmclock/alarmclock.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 53596db96..7dd6b96c9 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -50,6 +50,7 @@ function timer() { if (state.remainingTime === 0) { clearInterval(state.timerId); state.timerId = null; + document.body.style.backgroundColor = "red"; playAlarm(); } else { state.remainingTime -= 1; @@ -63,6 +64,7 @@ function playAlarm() { } function pauseAlarm() { + document.body.style.backgroundColor = "white"; audio.pause(); } From 7a7eb438f2df09aaf4096617c743dde3ea92dae2 Mon Sep 17 00:00:00 2001 From: XiaoQuark Date: Mon, 20 Apr 2026 17:19:58 +0100 Subject: [PATCH 6/7] refactor: remove unused variables and fix playAlarm timing --- Sprint-3/alarmclock/alarmclock.js | 49 +++++++++++++++---------------- 1 file changed, 23 insertions(+), 26 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 7dd6b96c9..9aa2446a8 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,30 +1,16 @@ -function setAlarm() {} - -// DO NOT EDIT BELOW HERE - -var audio = new Audio("alarmsound.mp3"); - -function setup() { - document.getElementById("set").addEventListener("click", () => { - setAlarm(); - }); - - document.getElementById("stop").addEventListener("click", () => { - pauseAlarm(); - }); -} - const state = { - initialTime: 0, remainingTime: 0, timerId: null, }; function setAlarm() { + if (state.timerId !== null) { + clearInterval(state.timerId); + state.timerId = null; + } const timeInput = document.getElementById("alarmSet"); - state.initialTime = +timeInput.value; - state.remainingTime = state.initialTime; - const formattedTime = formatTime(state.initialTime); + state.remainingTime = +timeInput.value; + const formattedTime = formatTime(state.remainingTime); timeInput.value = ""; const displayedTime = document.getElementById("timeRemaining"); @@ -45,20 +31,31 @@ function formatTime(seconds) { function timer() { const displayedTime = document.getElementById("timeRemaining"); - - console.log(state.remainingTime); + state.remainingTime -= 1; + const countingDownTime = formatTime(state.remainingTime); + displayedTime.textContent = `Time Remaining: ${countingDownTime}`; if (state.remainingTime === 0) { clearInterval(state.timerId); state.timerId = null; document.body.style.backgroundColor = "red"; playAlarm(); - } else { - state.remainingTime -= 1; - const countingDownTime = formatTime(state.remainingTime); - displayedTime.textContent = `Time Remaining: ${countingDownTime}`; } } +// DO NOT EDIT BELOW HERE + +var audio = new Audio("alarmsound.mp3"); + +function setup() { + document.getElementById("set").addEventListener("click", () => { + setAlarm(); + }); + + document.getElementById("stop").addEventListener("click", () => { + pauseAlarm(); + }); +} + function playAlarm() { audio.play(); } From 0f87e64d6b05cc309e609224accd76db3c4f53b2 Mon Sep 17 00:00:00 2001 From: XiaoQuark Date: Mon, 20 Apr 2026 22:46:20 +0100 Subject: [PATCH 7/7] fix: validate input numbers to be positive integers only and stop timer from going below 0 --- Sprint-3/alarmclock/alarmclock.js | 32 +++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 9aa2446a8..c2c8a3112 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -8,12 +8,31 @@ function setAlarm() { clearInterval(state.timerId); state.timerId = null; } + + const existingMessage = document.getElementById("error-message"); + if (existingMessage) { + existingMessage.remove(); + } + const displayedTime = document.getElementById("timeRemaining"); const timeInput = document.getElementById("alarmSet"); + state.remainingTime = +timeInput.value; + if (state.remainingTime <= 0 || !Number.isInteger(state.remainingTime)) { + state.remainingTime = 0; + displayedTime.textContent = `Time Remaining: 00:00`; + timeInput.value = ""; + + const container = document.querySelector(".centre"); + const errorMessage = document.createElement("p"); + errorMessage.id = "error-message"; + errorMessage.textContent = "Please enter a positive whole number"; + errorMessage.style.color = "red"; + container.appendChild(errorMessage); + return; + } const formattedTime = formatTime(state.remainingTime); timeInput.value = ""; - const displayedTime = document.getElementById("timeRemaining"); displayedTime.textContent = `Time Remaining: ${formattedTime}`; state.timerId = setInterval(timer, 1000); @@ -31,15 +50,20 @@ function formatTime(seconds) { function timer() { const displayedTime = document.getElementById("timeRemaining"); + state.remainingTime -= 1; - const countingDownTime = formatTime(state.remainingTime); - displayedTime.textContent = `Time Remaining: ${countingDownTime}`; - if (state.remainingTime === 0) { + + if (state.remainingTime <= 0) { + state.remainingTime = 0; + displayedTime.textContent = `Time Remaining: 00:00`; clearInterval(state.timerId); state.timerId = null; document.body.style.backgroundColor = "red"; playAlarm(); + return; } + const countingDownTime = formatTime(state.remainingTime); + displayedTime.textContent = `Time Remaining: ${countingDownTime}`; } // DO NOT EDIT BELOW HERE