From ca4b98cfb231faf2c837f0e8b018cd955abe534b Mon Sep 17 00:00:00 2001 From: Innocent_Niwatwine Date: Wed, 16 Jul 2025 09:22:17 +0300 Subject: [PATCH 1/6] Alarm clock --- Sprint-3/alarmclock/alarmclock.js | 69 ++++++++++++++++++++++++++++++- Sprint-3/alarmclock/package.json | 2 +- Sprint-3/alarmclock/style.css | 46 +++++++++++++++------ 3 files changed, 102 insertions(+), 15 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..04719dc44 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,5 +1,72 @@ -function setAlarm() {} +let interval = null; +let currentTime = 0; +function setAlarm() { + pauseAlarm(); + document.body.style.backgroundColor = ""; + + const alarmInput = document.getElementById("alarmSet").value; + currentTime = parseInt(alarmInput, 10); + + if (isNaN(currentTime) || currentTime <= 0) { + document.getElementById("timeRemaining").innerText = + "Time Remaining: 00:00"; + return; + } + + updateTime(); // ✅ Show initial time immediately + + clearInterval(interval); + interval = setInterval(() => { + if (currentTime > 0) { + currentTime--; + updateTime(); + } + + if (currentTime === 0) { + playAlarm(); + document.body.style.backgroundColor = "#db1b3e66"; + clearInterval(interval); + } + }, 1000); +} + +function updateTime() { + const minutes = String(Math.floor(currentTime / 60)).padStart(2, "0"); + const seconds = String(currentTime % 60).padStart(2, "0"); + document.getElementById( + "timeRemaining" + ).innerText = `Time Remaining: ${minutes}:${seconds}`; +} + +// Alarm sound +const audio = new Audio("alarmsound.mp3"); + +function playAlarm() { + audio.currentTime = 0; + audio.play(); +} + +function pauseAlarm() { + clearInterval(interval); + audio.pause(); + document.body.style.backgroundColor = ""; +} + +function setup() { + document.getElementById("set").addEventListener("click", setAlarm); + document.getElementById("stop").addEventListener("click", pauseAlarm); +} + +window.onload = setup; + +module.exports = { + testEnvironment: "jsdom", + setAlarm, + pauseAlarm, + updateTime, + playAlarm, +}; // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json index b532c6908..8cf7aea88 100644 --- a/Sprint-3/alarmclock/package.json +++ b/Sprint-3/alarmclock/package.json @@ -19,7 +19,7 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/user-event": "^13.5.0", "jest": "^29.2.2", - "jest-environment-jsdom": "^29.2.2" + "jest-environment-jsdom": "^30.0.4" }, "jest": { "setupFilesAfterEnv": [ diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..894647004 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -1,15 +1,35 @@ -.centre { - position: fixed; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} - #alarmSet { - margin: 20px; -} + margin: 20px 40px; + padding: 20px; + max-width: 400px; + height: 100px; + font-size: clamp(1rem, 2vw, 2rem); + box-shadow: #1b58db66 10px 10px; + + #alarmSet:focus { + outline: none; + box-shadow: rgba(29, 240, 103, 0.871) 20px 20px; + transform: translate(-10px, -10px); + } -h1 { - text-align: center; -} + button { + background-color: #1b58db66; + border: none; + color: white; + padding: 15px 32px; + display: inline-block; + font-size: clamp(1rem, 2vw, 2rem); + margin-top: 60px; + margin-left: 20px; + margin-right: 20px; + cursor: pointer; + box-shadow: rgba(0, 0, 0, 0.114) 10px 10px; + border-radius: 3px; + transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 0.9s; + + } + + button:hover { + box-shadow: #042b7ec4 20px 20px; + transform: translate(-10px, -10px); + } From c4a3507ca95e1fca8a349c759cb4a5198981f9b4 Mon Sep 17 00:00:00 2001 From: Innocent_Niwatwine Date: Sun, 27 Jul 2025 21:28:25 +0300 Subject: [PATCH 2/6] Alarm Clock app.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 48e2e80d9..4a91379d3 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Title here + Alarm Clock App
From 0b93f29cd8a8133994822148ad6eca03888b1739 Mon Sep 17 00:00:00 2001 From: Innocent_Niwatwine Date: Fri, 8 Aug 2025 10:38:48 +0300 Subject: [PATCH 3/6] Redone the code --- Sprint-3/alarmclock/alarmclock.js | 94 ++++++++----------------------- 1 file changed, 23 insertions(+), 71 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 04719dc44..451e8df35 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,92 +1,44 @@ -let interval = null; -let currentTime = 0; +let countdownInterval; +let timeRemaining = 0; -function setAlarm() { +function setAlarm(){ pauseAlarm(); - document.body.style.backgroundColor = ""; - - const alarmInput = document.getElementById("alarmSet").value; - currentTime = parseInt(alarmInput, 10); - - if (isNaN(currentTime) || currentTime <= 0) { - document.getElementById("timeRemaining").innerText = - "Time Remaining: 00:00"; - return; + audio.currentTime = 0 + clearInterval(countdownInterval); + const inputField = document.getElementById("alarmSet"); + timeRemaining = parseInt(inputField.value, 10); + + if (isNaN(timeRemaining) || timeRemaining <= 0) { + alert("Please enter a valid number greater than 0."); + return; } - updateTime(); // ✅ Show initial time immediately + updateTimerDisplay(); + countdownInterval = setInterval(() => { + timeRemaining--; - clearInterval(interval); - interval = setInterval(() => { - if (currentTime > 0) { - currentTime--; - updateTime(); + if (timeRemaining <= 0) { + clearInterval(countdownInterval); + playAlarm(); } + updateTimerDisplay(); - if (currentTime === 0) { - playAlarm(); - document.body.style.backgroundColor = "#db1b3e66"; - clearInterval(interval); - } }, 1000); } -function updateTime() { - const minutes = String(Math.floor(currentTime / 60)).padStart(2, "0"); - const seconds = String(currentTime % 60).padStart(2, "0"); - document.getElementById( - "timeRemaining" - ).innerText = `Time Remaining: ${minutes}:${seconds}`; -} - -// Alarm sound -const audio = new Audio("alarmsound.mp3"); - -function playAlarm() { - audio.currentTime = 0; - audio.play(); +function updateTimerDisplay() { + const title = document.getElementById("timeRemaining"); + const minutes = String(Math.floor(timeRemaining / 60)).padStart(2, "0"); + const seconds = String(timeRemaining % 60).padStart(2, "0"); + title.textContent = `Time Remaining: ${minutes}:${seconds}`; } -function pauseAlarm() { - clearInterval(interval); - audio.pause(); - document.body.style.backgroundColor = ""; -} -function setup() { - document.getElementById("set").addEventListener("click", setAlarm); - document.getElementById("stop").addEventListener("click", pauseAlarm); -} -window.onload = setup; -module.exports = { - testEnvironment: "jsdom", - setAlarm, - pauseAlarm, - updateTime, - playAlarm, -}; // DO NOT EDIT BELOW HERE -var audio = new Audio("alarmsound.mp3"); - -function setup() { - document.getElementById("set").addEventListener("click", () => { - setAlarm(); - }); - document.getElementById("stop").addEventListener("click", () => { - pauseAlarm(); - }); -} -function playAlarm() { - audio.play(); -} -function pauseAlarm() { - audio.pause(); -} -window.onload = setup; From 7c69bbe283faae0f47bb2d6dd93cf73d5741734a Mon Sep 17 00:00:00 2001 From: Innocent_Niwatwine Date: Tue, 12 Aug 2025 19:18:30 +0300 Subject: [PATCH 4/6] Functions added --- Sprint-3/alarmclock/alarmclock.js | 66 +++++++++++++++++++------------ Sprint-3/alarmclock/index.html | 1 + 2 files changed, 42 insertions(+), 25 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 451e8df35..864b63e4d 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,44 +1,60 @@ -let countdownInterval; -let timeRemaining = 0; +let countdown; +let ispaused = false; +let timeRemaining; function setAlarm(){ - pauseAlarm(); - audio.currentTime = 0 - clearInterval(countdownInterval); const inputField = document.getElementById("alarmSet"); - timeRemaining = parseInt(inputField.value, 10); + timeRemaining = parseInt(inputField.value); - if (isNaN(timeRemaining) || timeRemaining <= 0) { - alert("Please enter a valid number greater than 0."); - return; - } + const updateTitle = () => { + const minutes = String(Math.floor(timeRemaining/60)).padStart(2, '0'); // minutes + const seconds = String(timeRemaining % 60).padStart(2, '0'); // seconds + document.getElementById("timeRemaining").innerText = `Time Remaining: ${minutes}:${seconds}`; + }; + + updateTitle(); - updateTimerDisplay(); - countdownInterval = setInterval(() => { - timeRemaining--; + countdown = setInterval(() => { + if (!isPaused){ + timeRemaining = timeRemaining - 1; + updateTitle(); if (timeRemaining <= 0) { - clearInterval(countdownInterval); - playAlarm(); + clearInterval(countdown); + playAlarm(); } - updateTimerDisplay(); - + } }, 1000); } -function updateTimerDisplay() { - const title = document.getElementById("timeRemaining"); - const minutes = String(Math.floor(timeRemaining / 60)).padStart(2, "0"); - const seconds = String(timeRemaining % 60).padStart(2, "0"); - title.textContent = `Time Remaining: ${minutes}:${seconds}`; +function pauseTimer() { +isPaused = !isPaused; +document.getElementById("pause").innerText = isPaused ? "Resume Timer" : "Pause Timer"; } - - - // DO NOT EDIT BELOW HERE +var audio = new Audio("alarmsound.mp3"); +function setup() { + document.getElementById("set").addEventListener("click", () => { + setAlarm(); + }); + document.getElementById("stop").addEventListener("click", () => { + pauseAlarm(); + }); + + document.getElementById("pause").addEventListener("click", () => { + pauseTimer(); + }); +} +function playAlarm() { + audio.play(); +} +function pauseAlarm() { + audio.pause(); +} +window.onload = setup; diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 4a91379d3..cfd3fdcb4 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -13,6 +13,7 @@

Time Remaining: 00:00

+
From 2de0beded3381685bc75ac039a438397dcf4d37a Mon Sep 17 00:00:00 2001 From: Innocent_Niwatwine Date: Thu, 14 Aug 2025 22:01:57 +0300 Subject: [PATCH 5/6] isPaused defined --- Sprint-3/alarmclock/alarmclock.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 864b63e4d..e0c098dfa 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,5 +1,5 @@ let countdown; -let ispaused = false; +let isPaused = false; let timeRemaining; function setAlarm(){ From 1a71ed922b151103bddd91a2706b6086d9f27900 Mon Sep 17 00:00:00 2001 From: Innocent_Niwatwine Date: Fri, 15 Aug 2025 08:34:53 +0300 Subject: [PATCH 6/6] correction of spelling --- Sprint-3/alarmclock/alarmclock.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index e0c098dfa..45408e183 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,6 +1,6 @@ let countdown; let isPaused = false; -let timeRemaining; +let timeRemaining; function setAlarm(){ const inputField = document.getElementById("alarmSet");