From e226033e9f7fc4d33aee5d547c297ab5401886aa Mon Sep 17 00:00:00 2001 From: Darkidd77 Date: Sat, 28 Mar 2026 21:00:25 +0000 Subject: [PATCH 1/2] Update the title name in `index.html` to Alarm Clock App --- Sprint-3/alarmclock/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..18a51fc66 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -1,10 +1,10 @@ - + - Title here + Alarm Clock App
From 21079b19afcf40dacc3e27fdf7c5c754dcaa5c99 Mon Sep 17 00:00:00 2001 From: Darkidd77 Date: Thu, 2 Apr 2026 01:54:30 +0100 Subject: [PATCH 2/2] Implement alarm functionality with timer and screen flashing effects --- Sprint-3/alarmclock/alarmclock.js | 71 ++++++++++++++++++++++++++++++- Sprint-3/alarmclock/package.json | 6 ++- 2 files changed, 75 insertions(+), 2 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..d03bafc77 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,71 @@ -function setAlarm() {} +let timerInterval; +let flashInterval; + +function setAlarm() { + const inputElement = document.getElementById("alarmSet"); + const headingElement = document.getElementById("timeRemaining"); + + if (!inputElement.value) { + return; + } + + if (timerInterval) { + clearInterval(timerInterval); + } + if (flashInterval) { + clearInterval(flashInterval); + } + + let timeInSeconds = Number(inputElement.value); + + function updateScreen(secondsRemaining) { + const minutes = Math.floor(secondsRemaining / 60); + + const seconds = secondsRemaining % 60; + + const formattedMinutes = String(minutes).padStart(2, "0"); + const formattedSeconds = String(seconds).padStart(2, "0"); + + headingElement.innerText = `Time Remaining: ${formattedMinutes}:${formattedSeconds}`; + } + + // update when we click set alarm + updateScreen(timeInSeconds); + + timerInterval = setInterval(() => { + // Subtract 1 from the time + timeInSeconds = timeInSeconds - 1; + + // Update the screen with the new time + updateScreen(timeInSeconds); + + // when we hit zero? + if (timeInSeconds <= 0) { + clearInterval(timerInterval); + playAlarm(); + flashScreen(); + } + }, 1000); +} + +function flashScreen() { + let flashCount = 0; + + flashInterval = setInterval(() => { + flashCount++; + + if (document.body.style.backgroundColor === "red") { + document.body.style.backgroundColor = "white"; + } else { + document.body.style.backgroundColor = "red"; + } + + if (flashCount >= 20) { + clearInterval(flashInterval); + document.body.style.backgroundColor = "white"; + } + }, 500); +} // DO NOT EDIT BELOW HERE @@ -20,6 +87,8 @@ function playAlarm() { function pauseAlarm() { audio.pause(); + clearInterval(flashInterval); + document.body.style.backgroundColor = "white"; } window.onload = setup; diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json index e1331e071..17723b660 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", + "devDependencies": { + "@testing-library/jest-dom": "^6.9.1", + "jest-environment-jsdom": "^30.3.0" + } }