From 8085c0c430e3aa53aa17d81033a4a1ffb075eab6 Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Tue, 2 Dec 2025 14:27:06 +0000 Subject: [PATCH 1/5] added a tittle element --- 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 48e2e80d9..ff2d3b453 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Title here + Alarm clock app
From b3ad0d8c3b804cbc3d2113339c0e60c9c6b2e018 Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Tue, 2 Dec 2025 14:42:39 +0000 Subject: [PATCH 2/5] updated the title --- 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 ff2d3b453..2657f276e 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Alarm clock app + Alarm clock-app
From d33934f3307bd85c55c81af14fb23e9d7a347ac3 Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Fri, 5 Dec 2025 15:10:22 +0000 Subject: [PATCH 3/5] added a jest.config.js file --- Sprint-3/alarmclock/alarmclock.js | 79 +++++++++++++++++++++++++- Sprint-3/alarmclock/alarmclock.test.js | 2 + Sprint-3/alarmclock/jest.config.js | 6 ++ 3 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 Sprint-3/alarmclock/jest.config.js diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..858e4591e 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,81 @@ -function setAlarm() {} + + +// function setAlarm() {} + +let timeLeft = 0; +let timer = null; +let flashing = null; + +// DOM references +const display = document.getElementById("timeRemaining"); +const setButton = document.getElementById("set"); +const stopButton = document.getElementById("stop"); + +// Event listeners +setButton.addEventListener("click", setAlarm); +stopButton.addEventListener("click", stopAlarm); + +// Show 00:00 on load +updateDisplay(0); + +// ------------------------------- +// FUNCTIONS +// ------------------------------- + +function setAlarm() { + const input = document.getElementById("alarmSet").value; + const parsed = parseInt(input, 10); + + if (isNaN(parsed) || parsed < 0) return; + + timeLeft = parsed; + + // Update display immediately + updateDisplay(timeLeft); + + // Clear previous countdown + clearInterval(timer); + + // Start countdown every 1000ms + timer = setInterval(() => { + if (timeLeft > 0) { + timeLeft--; + updateDisplay(timeLeft); + } + + if (timeLeft === 0) { + clearInterval(timer); + startAlarm(); + } + }, 1000); +} + +function updateDisplay(seconds) { + const mins = String(Math.floor(seconds / 60)).padStart(2, "0"); + const secs = String(seconds % 60).padStart(2, "0"); + display.innerText = `Time Remaining: ${mins}:${secs}`; +} + +function startAlarm() { + if (typeof playAlarm === "function") playAlarm(); + + // Flashing background + flashing = setInterval(() => { + document.body.style.backgroundColor = + document.body.style.backgroundColor === "red" ? "orange" : "red"; + }, 300); +} + +function stopAlarm() { + if (typeof pauseAlarm === "function") pauseAlarm(); + + clearInterval(flashing); + flashing = null; + document.body.style.backgroundColor = ""; +} + +module.exports= setAlarm; + // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/alarmclock.test.js b/Sprint-3/alarmclock/alarmclock.test.js index 85b7356dc..48e07f812 100644 --- a/Sprint-3/alarmclock/alarmclock.test.js +++ b/Sprint-3/alarmclock/alarmclock.test.js @@ -35,6 +35,8 @@ afterEach(() => { page = null; }); + + test("should set heading when button is clicked", () => { const heading = page.window.document.querySelector("#timeRemaining"); const input = page.window.document.querySelector("#alarmSet"); diff --git a/Sprint-3/alarmclock/jest.config.js b/Sprint-3/alarmclock/jest.config.js new file mode 100644 index 000000000..2ce3b50ef --- /dev/null +++ b/Sprint-3/alarmclock/jest.config.js @@ -0,0 +1,6 @@ +/** @type {import('jest').Config} */ +module.exports = { + testEnvironment: "jsdom", + verbose: true, + testMatch: ["**/*.test.js"], +}; From 9c3ee51abb34e3e0e8d376ffefc8007dac367f0e Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Sat, 6 Dec 2025 13:08:06 +0000 Subject: [PATCH 4/5] passed all the tests --- Sprint-3/alarmclock/alarmclock.js | 22 +++++++++++++++------- Sprint-3/alarmclock/alarmclock.test.js | 8 +++++--- Sprint-3/alarmclock/index.html | 2 +- Sprint-3/alarmclock/package.json | 6 +++++- 4 files changed, 26 insertions(+), 12 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 858e4591e..904dee88d 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -7,16 +7,18 @@ let timer = null; let flashing = null; // DOM references -const display = document.getElementById("timeRemaining"); +window.addEventListener("DOMContentLoaded", () => { +// const display = document.getElementById("timeRemaining"); const setButton = document.getElementById("set"); const stopButton = document.getElementById("stop"); // Event listeners -setButton.addEventListener("click", setAlarm); -stopButton.addEventListener("click", stopAlarm); +// if (setButton) setButton.addEventListener("click", () => playAlarm()); +if (stopButton) stopButton.addEventListener("click", stopAlarm); // Show 00:00 on load updateDisplay(0); +}); // ------------------------------- // FUNCTIONS @@ -53,18 +55,23 @@ function setAlarm() { function updateDisplay(seconds) { const mins = String(Math.floor(seconds / 60)).padStart(2, "0"); const secs = String(seconds % 60).padStart(2, "0"); - display.innerText = `Time Remaining: ${mins}:${secs}`; + + const display = document.getElementById("timeRemaining"); + if (!display) return; + display.textContent = `Time Remaining: ${mins}:${secs}`; } function startAlarm() { - if (typeof playAlarm === "function") playAlarm(); + playAlarm(); // Flashing background - flashing = setInterval(() => { + if (!flashing){ + flashing = setTimeout(() => { document.body.style.backgroundColor = document.body.style.backgroundColor === "red" ? "orange" : "red"; }, 300); } +} function stopAlarm() { if (typeof pauseAlarm === "function") pauseAlarm(); @@ -74,7 +81,8 @@ function stopAlarm() { document.body.style.backgroundColor = ""; } -module.exports= setAlarm; + +// module.exports= setAlarm; // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/alarmclock.test.js b/Sprint-3/alarmclock/alarmclock.test.js index 48e07f812..1a1b1bca6 100644 --- a/Sprint-3/alarmclock/alarmclock.test.js +++ b/Sprint-3/alarmclock/alarmclock.test.js @@ -3,6 +3,8 @@ There are some Tests in this file that will help you work out if your code is wo */ const path = require("path"); +// const { setAlarm } = require("./alarmclock.js"); + const { JSDOM } = require("jsdom"); let page = null; @@ -91,16 +93,16 @@ test("should count down every 1000 ms", () => { test("should play audio when the timer reaches zero", () => { const input = page.window.document.querySelector("#alarmSet"); - const button = page.window.document.querySelector("#set"); + const startButton = page.window.document.querySelector("#set"); const mockPlayAlarm = jest.fn(); page.window.playAlarm = mockPlayAlarm; input.value = "10"; - button.click(); + startButton.click(); expect(mockPlayAlarm).toHaveBeenCalledTimes(0); jest.runAllTimers(); - + expect(mockPlayAlarm).toHaveBeenCalledTimes(1); }); diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 2657f276e..66360c467 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -15,6 +15,6 @@

Time Remaining: 00:00

- + diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json index e1331e071..52d9b0c52 100644 --- a/Sprint-3/alarmclock/package.json +++ b/Sprint-3/alarmclock/package.json @@ -13,5 +13,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", + "dependencies": { + "@testing-library/jest-dom": "^6.9.1", + "jest": "^27.5.1" + } } From bffd4b46e3f68f116b918bd388f2e786cfd64d8d Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Wed, 10 Dec 2025 19:23:13 +0000 Subject: [PATCH 5/5] checked an empty value first and any error --- Sprint-3/alarmclock/alarmclock.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 904dee88d..0b709971b 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -25,10 +25,22 @@ updateDisplay(0); // ------------------------------- function setAlarm() { - const input = document.getElementById("alarmSet").value; - const parsed = parseInt(input, 10); + const inputEl = document.getElementById("alarmSet"); +const input = inputEl.value.trim(); - if (isNaN(parsed) || parsed < 0) return; +// Check empty input +if (input === "") { + alert("Please enter a number of seconds."); + return; +} + +const parsed = parseInt(input, 10); + +// Check invalid or negative number +if (isNaN(parsed) || parsed < 0) { + alert("Please enter a valid non-negative number."); + return; +} timeLeft = parsed;