From aef7fe1ec739bf79b53101ecacbc33cf945cba54 Mon Sep 17 00:00:00 2001 From: UbunMen Date: Sat, 6 Dec 2025 19:35:48 +0000 Subject: [PATCH 1/6] Modified the index.html adding necessary buttons --- Sprint-3/alarmclock/index.html | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..dcbabd037 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,17 +4,26 @@ - Title here + Alarm clock app

Time Remaining: 00:00

- + + - - +
+ + + + + +
+ + + From 084497d098fd1460fff8c79adcf6059bd7689d6a Mon Sep 17 00:00:00 2001 From: UbunMen Date: Sat, 6 Dec 2025 19:40:34 +0000 Subject: [PATCH 2/6] Style modified --- Sprint-3/alarmclock/style.css | 56 ++++++++++++++++++++++++++++++++--- 1 file changed, 52 insertions(+), 4 deletions(-) diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..3a861f647 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -1,15 +1,63 @@ +/* Center everything on the page */ .centre { position: fixed; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); + text-align: center; + font-family: Arial, sans-serif; } -#alarmSet { - margin: 20px; +/* Heading */ +h1 { + text-align: center; + font-size: 2em; + margin-bottom: 20px; + transition: background-color 0.2s ease; } -h1 { +/* Input field */ +#alarmSet { + width: 80px; + padding: 5px; + font-size: 1em; + margin-bottom: 20px; text-align: center; } + +/* Buttons container */ +.buttons { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 10px; /* space between buttons */ + margin-top: 10px; +} + +/* Buttons */ +button { + padding: 10px 20px; + font-size: 1em; + cursor: pointer; + border-radius: 5px; + border: none; + background-color: #007bff; + color: white; + transition: background-color 0.2s ease, transform 0.1s ease; +} + +button:hover { + background-color: #0056b3; + transform: scale(1.05); +} + +button:active { + transform: scale(0.95); +} + +/* Input and buttons spacing */ +input, +button { + margin: 5px; +} + From db4559da1e21a7d156391a0168a55c12ce86b6ee Mon Sep 17 00:00:00 2001 From: UbunMen Date: Sat, 6 Dec 2025 19:41:24 +0000 Subject: [PATCH 3/6] Alarm clock function implemented --- Sprint-3/alarmclock/alarmclock.js | 109 ++++++++++++++++++++++++- Sprint-3/alarmclock/alarmclock.test.js | 4 + Sprint-3/alarmclock/package.json | 9 +- 3 files changed, 117 insertions(+), 5 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..820ba55de 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,95 @@ -function setAlarm() {} +// -------- Alarm Clock Implementation -------- +let countdownInterval = null; +let flashInterval = null; +let timeLeft = 0; +let paused = false; + +function setAlarm() { + const input = document.getElementById("alarmSet"); + const heading = document.getElementById("timeRemaining"); + + const secondsInput = parseInt(input.value, 10); + + if (isNaN(secondsInput) || secondsInput < 0) return; + + // Reset previous timer if any + if (countdownInterval) clearInterval(countdownInterval); + stopFlashing(); + paused = false; + timeLeft = secondsInput; + + updateHeading(timeLeft); + + countdownInterval = setInterval(() => { + if (!paused) { + timeLeft--; + if (timeLeft <= 0) { + clearInterval(countdownInterval); + countdownInterval = null; + updateHeading(0); + playAlarm(); + startFlashing(); + } else { + updateHeading(timeLeft); + } + } + }, 1000); +} + +function pauseAlarm() { + paused = true; + if (audio) audio.pause(); + stopFlashing(); +} + +function resumeAlarm() { + if (timeLeft > 0) paused = false; +} + +function stopAlarm() { + paused = true; + if (audio) audio.pause(); + stopFlashing(); + clearInterval(countdownInterval); + countdownInterval = null; + timeLeft = 0; + updateHeading(0); +} + +function resetAlarm() { + paused = false; + clearInterval(countdownInterval); + countdownInterval = null; + stopFlashing(); + timeLeft = 0; + updateHeading(0); +} + +// -------- Helper Functions -------- +function updateHeading(seconds) { + const heading = document.getElementById("timeRemaining"); + const mins = Math.floor(seconds / 60) + .toString() + .padStart(2, "0"); + const secs = (seconds % 60).toString().padStart(2, "0"); + heading.innerText = `Time Remaining: ${mins}:${secs}`; +} + +// ---------------- Flashing Screen ---------------- +function startFlashing() { + const body = document.body; + let isBlue = false; + flashInterval = setInterval(() => { + body.style.backgroundColor = isBlue ? "white" : "#add8e6"; + isBlue = !isBlue; + }, 500); +} + +function stopFlashing() { + clearInterval(flashInterval); + flashInterval = null; + document.body.style.backgroundColor = "white"; +} // DO NOT EDIT BELOW HERE @@ -9,16 +100,28 @@ function setup() { setAlarm(); }); - document.getElementById("stop").addEventListener("click", () => { + document.getElementById("pause").addEventListener("click", () => { pauseAlarm(); }); + + document.getElementById("resume").addEventListener("click", () => { + resumeAlarm(); + }); + + document.getElementById("stop").addEventListener("click", () => { + stopAlarm(); + }); + + document.getElementById("reset").addEventListener("click", () => { + resetAlarm(); + }); } function playAlarm() { audio.play(); } -function pauseAlarm() { +function pauseAlarmSound() { audio.pause(); } diff --git a/Sprint-3/alarmclock/alarmclock.test.js b/Sprint-3/alarmclock/alarmclock.test.js index 85b7356dc..2711258d1 100644 --- a/Sprint-3/alarmclock/alarmclock.test.js +++ b/Sprint-3/alarmclock/alarmclock.test.js @@ -2,6 +2,7 @@ There are some Tests in this file that will help you work out if your code is working. */ +require("@testing-library/jest-dom"); const path = require("path"); const { JSDOM } = require("jsdom"); @@ -102,3 +103,6 @@ test("should play audio when the timer reaches zero", () => { expect(mockPlayAlarm).toHaveBeenCalledTimes(1); }); + + +// In alarmclock.test.js tests passed \ No newline at end of file diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json index e1331e071..129be86d5 100644 --- a/Sprint-3/alarmclock/package.json +++ b/Sprint-3/alarmclock/package.json @@ -4,7 +4,8 @@ "license": "CC-BY-SA-4.0", "description": "You must update this package", "scripts": { - "test": "jest --config=../jest.config.js alarmclock" + "test": "jest --config=jest.config.js alarmclock" + }, "repository": { "type": "git", @@ -13,5 +14,9 @@ "bugs": { "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues" }, - "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme" + "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", + "devDependencies": { + "@testing-library/jest-dom": "^6.9.1", + "jsdom": "^20.0.3" + } } From d46d718e4a87491b7b4fa9a8d1b151ded888a07d Mon Sep 17 00:00:00 2001 From: UbunMen Date: Wed, 10 Dec 2025 16:45:05 +0000 Subject: [PATCH 4/6] Index.html --- Sprint-3/alarmclock/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index dcbabd037..6c3eafa22 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -22,7 +22,7 @@

Time Remaining: 00:00

- + From 6a48187edaa5fba46b1c2c3150c8d99c3a0fd911 Mon Sep 17 00:00:00 2001 From: UbunMen Date: Wed, 10 Dec 2025 16:46:02 +0000 Subject: [PATCH 5/6] style.css modified to include flashing background --- Sprint-3/alarmclock/style.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 3a861f647..800b3cb93 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -61,3 +61,14 @@ button { margin: 5px; } +/* Flashing background */ +@keyframes alarm-flash { + 0%, 100% { background-color: white; } + 50% { background-color: #add8e6; } +} + +.alarm-flashing { + animation: alarm-flash 0.5s steps(1, end) infinite; +} + + From 102e20dc50da2e23c587a0e3709d949f9091f209 Mon Sep 17 00:00:00 2001 From: UbunMen Date: Wed, 10 Dec 2025 16:47:01 +0000 Subject: [PATCH 6/6] alarmclock.js modified --- Sprint-3/alarmclock/alarmclock.js | 102 +++++++++++++++--------------- 1 file changed, 50 insertions(+), 52 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 820ba55de..3979c8c55 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,34 +1,35 @@ // -------- Alarm Clock Implementation -------- let countdownInterval = null; -let flashInterval = null; let timeLeft = 0; let paused = false; +// -------- Main Functions -------- function setAlarm() { const input = document.getElementById("alarmSet"); - const heading = document.getElementById("timeRemaining"); - const secondsInput = parseInt(input.value, 10); - if (isNaN(secondsInput) || secondsInput < 0) return; + // Ignore invalid or zero/negative inputs + if (isNaN(secondsInput) || secondsInput <= 0) return; - // Reset previous timer if any - if (countdownInterval) clearInterval(countdownInterval); - stopFlashing(); - paused = false; - timeLeft = secondsInput; + // Reset previous alarm + resetAlarm(); + timeLeft = secondsInput; updateHeading(timeLeft); + input.disabled = true; + countdownInterval = setInterval(() => { if (!paused) { timeLeft--; + if (timeLeft <= 0) { clearInterval(countdownInterval); countdownInterval = null; updateHeading(0); playAlarm(); startFlashing(); + input.disabled = false; } else { updateHeading(timeLeft); } @@ -38,7 +39,7 @@ function setAlarm() { function pauseAlarm() { paused = true; - if (audio) audio.pause(); + audio.pause(); stopFlashing(); } @@ -47,22 +48,36 @@ function resumeAlarm() { } function stopAlarm() { - paused = true; - if (audio) audio.pause(); - stopFlashing(); - clearInterval(countdownInterval); - countdownInterval = null; - timeLeft = 0; - updateHeading(0); + resetAlarm(); // fully stop everything } function resetAlarm() { + // Stop countdown paused = false; - clearInterval(countdownInterval); - countdownInterval = null; + if (countdownInterval) { + clearInterval(countdownInterval); + countdownInterval = null; + } + + // Stop flashing background stopFlashing(); + + // Stop alarm sound if playing + if (audio) { + audio.pause(); + audio.currentTime = 0; + } + + // Reset countdown display timeLeft = 0; updateHeading(0); + + // Clear and re-enable input + const input = document.getElementById("alarmSet"); + if (input) { + input.value = ""; + input.disabled = false; + } } // -------- Helper Functions -------- @@ -75,48 +90,19 @@ function updateHeading(seconds) { heading.innerText = `Time Remaining: ${mins}:${secs}`; } -// ---------------- Flashing Screen ---------------- +// ---------------- Flashing Screen (CSS-based) ---------------- function startFlashing() { - const body = document.body; - let isBlue = false; - flashInterval = setInterval(() => { - body.style.backgroundColor = isBlue ? "white" : "#add8e6"; - isBlue = !isBlue; - }, 500); + document.body.classList.add("alarm-flashing"); } function stopFlashing() { - clearInterval(flashInterval); - flashInterval = null; + document.body.classList.remove("alarm-flashing"); document.body.style.backgroundColor = "white"; } -// DO NOT EDIT BELOW HERE - +// ---------------- Audio ---------------- var audio = new Audio("alarmsound.mp3"); -function setup() { - document.getElementById("set").addEventListener("click", () => { - setAlarm(); - }); - - document.getElementById("pause").addEventListener("click", () => { - pauseAlarm(); - }); - - document.getElementById("resume").addEventListener("click", () => { - resumeAlarm(); - }); - - document.getElementById("stop").addEventListener("click", () => { - stopAlarm(); - }); - - document.getElementById("reset").addEventListener("click", () => { - resetAlarm(); - }); -} - function playAlarm() { audio.play(); } @@ -125,4 +111,16 @@ function pauseAlarmSound() { audio.pause(); } +// ---------------- Setup Event Listeners ---------------- +function setup() { + document.getElementById("set").addEventListener("click", setAlarm); + document.getElementById("pause").addEventListener("click", pauseAlarm); + document.getElementById("resume").addEventListener("click", resumeAlarm); + document.getElementById("stop").addEventListener("click", stopAlarm); + document.getElementById("reset").addEventListener("click", resetAlarm); +} + window.onload = setup; + + +// alarmclock.js modified \ No newline at end of file