diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..0b709971b 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,101 @@ -function setAlarm() {} + + +// function setAlarm() {} + +let timeLeft = 0; +let timer = null; +let flashing = null; + +// DOM references +window.addEventListener("DOMContentLoaded", () => { +// const display = document.getElementById("timeRemaining"); +const setButton = document.getElementById("set"); +const stopButton = document.getElementById("stop"); + +// Event listeners +// if (setButton) setButton.addEventListener("click", () => playAlarm()); +if (stopButton) stopButton.addEventListener("click", stopAlarm); + +// Show 00:00 on load +updateDisplay(0); +}); + +// ------------------------------- +// FUNCTIONS +// ------------------------------- + +function setAlarm() { + const inputEl = document.getElementById("alarmSet"); +const input = inputEl.value.trim(); + +// 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; + + // 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"); + + const display = document.getElementById("timeRemaining"); + if (!display) return; + display.textContent = `Time Remaining: ${mins}:${secs}`; +} + +function startAlarm() { + playAlarm(); + + // Flashing background + if (!flashing){ + flashing = setTimeout(() => { + 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..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; @@ -35,6 +37,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"); @@ -89,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 48e2e80d9..66360c467 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Title here + Alarm clock-app
@@ -15,6 +15,6 @@

Time Remaining: 00:00

- + 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"], +}; 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" + } }