From 82a89ff4c4788fe80fc9a6ea50749107e3c5e2cf Mon Sep 17 00:00:00 2001 From: TzeMingHo Date: Thu, 23 Oct 2025 18:00:57 +0100 Subject: [PATCH 1/2] completed the tests and its function, added some styling --- Sprint-3/alarmclock/alarmclock.js | 31 ++++++++++++++++++++- Sprint-3/alarmclock/index.html | 18 ++++++++---- Sprint-3/alarmclock/style.css | 46 +++++++++++++++++++++++++++++++ 3 files changed, 89 insertions(+), 6 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..f0128b188 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,33 @@ -function setAlarm() {} +function calculateAndUpdate(seconds, timeRemaining) { + let mm = String(Math.floor(seconds / 60)).padStart(2, 0); + let ss = String(seconds % 60).padStart(2, 0); + timeRemaining.innerText = `Time Remaining: ${mm}:${ss}`; +} + +function setAlarm() { + let seconds = document.getElementById("alarmSet").value; + let timeRemaining = document.getElementById("timeRemaining"); + const alarmInputField = document.getElementById("alarmInputField"); + + if (seconds > 0) { + calculateAndUpdate(seconds, timeRemaining); + + const intervalId = setInterval(() => { + seconds -= 1; + calculateAndUpdate(seconds, timeRemaining); + + if (seconds == 0) { + clearInterval(intervalId); + playAlarm(); + document.body.classList.add("flash-background"); + } + }, 1000); + } +} + +document.getElementById("stop").addEventListener("click", () => { + document.body.classList.remove("flash-background"); +}); // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..37a7f079b 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,16 +4,24 @@ - Title here + Alarm clock app

Time Remaining: 00:00

- - +
+ + +
- - +
+ + +
+
+ + +
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..95fe35329 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -4,6 +4,7 @@ left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); + text-align: center; } #alarmSet { @@ -13,3 +14,48 @@ h1 { text-align: center; } + +@keyframes flash { + 0% { + background-color: silver; + color: white; + } + 50% { + background-color: white; + color: black; + } + 100% { + background-color: silver; + color: white; + } +} + +.flash-background { + animation: flash 1s infinite; +} + +#alarmInputField { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; +} + +#alarmSet { + height: 30px; + max-width: 80px; + font-size: large; + text-align: center; +} + +#buttonField { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; +} + +button { + border-radius: 8px; + font-size: medium; + margin-top: 8px; +} From 4cfd34d908a441ea59b1cb9380ab4fa05c4aa542 Mon Sep 17 00:00:00 2001 From: TzeMingHo Date: Sun, 26 Oct 2025 13:30:52 +0000 Subject: [PATCH 2/2] completed alarmclock --- Sprint-3/alarmclock/alarmclock.js | 60 +++++++++++++++++++++++-------- Sprint-3/alarmclock/index.html | 7 ++-- Sprint-3/alarmclock/style.css | 1 + 3 files changed, 50 insertions(+), 18 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index f0128b188..0a18861f5 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,32 +1,64 @@ +let intervalId; +let seconds; +let timeRemaining = document.getElementById("timeRemaining"); +let pause = false; +let setButton = document.getElementById("set"); +let pauseAndResumeButton = document.getElementById("pauseAndResume"); +let alarmInputField = document.getElementById("alarmInputField"); + function calculateAndUpdate(seconds, timeRemaining) { let mm = String(Math.floor(seconds / 60)).padStart(2, 0); let ss = String(seconds % 60).padStart(2, 0); timeRemaining.innerText = `Time Remaining: ${mm}:${ss}`; } +function countDown() { + intervalId = setInterval(() => { + seconds -= 1; + calculateAndUpdate(seconds, timeRemaining); + + if (seconds <= 0) { + clearInterval(intervalId); + playAlarm(); + document.body.classList.add("flash-background"); + pauseAndResumeButton.style.display = "none"; + } + }, 1000); +} + function setAlarm() { - let seconds = document.getElementById("alarmSet").value; - let timeRemaining = document.getElementById("timeRemaining"); - const alarmInputField = document.getElementById("alarmInputField"); + seconds = document.getElementById("alarmSet").value; + timeRemaining = document.getElementById("timeRemaining"); if (seconds > 0) { calculateAndUpdate(seconds, timeRemaining); - - const intervalId = setInterval(() => { - seconds -= 1; - calculateAndUpdate(seconds, timeRemaining); - - if (seconds == 0) { - clearInterval(intervalId); - playAlarm(); - document.body.classList.add("flash-background"); - } - }, 1000); + setButton.style.display = "none"; + pauseAndResumeButton.style.display = "block"; + alarmInputField.style.display = "none"; + countDown(); } } document.getElementById("stop").addEventListener("click", () => { document.body.classList.remove("flash-background"); + clearInterval(intervalId); + timeRemaining.innerText = `Time Remaining: 00:00`; + setButton.style.display = "block"; + pauseAndResumeButton.style.display = "none"; + alarmInputField.style.display = "block"; + pauseAndResumeButton.innerText = "Pause"; + pause = false; +}); + +document.getElementById("pauseAndResume").addEventListener("click", () => { + clearInterval(intervalId); + pause = !pause; + pause === true + ? (pauseAndResumeButton.innerText = "Resume") + : (pauseAndResumeButton.innerText = "Pause"); + if (pause === false) { + countDown(); + } }); // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 37a7f079b..2111accd1 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -17,10 +17,9 @@

Time Remaining: 00:00

-
-
- - +
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 95fe35329..59a9c1353 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -52,6 +52,7 @@ h1 { display: flex; justify-content: space-evenly; flex-wrap: wrap; + gap: 5px; } button {