From 47f91e5a2b9ade3e91b1b10010ecc1ee03274545 Mon Sep 17 00:00:00 2001 From: alexandru-pocovnicu <109530683+alexandru-pocovnicu@users.noreply.github.com> Date: Mon, 16 Mar 2026 18:10:34 +0000 Subject: [PATCH 1/7] Fix: update document title to 'Alarm clock app' --- 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 41537a4e542793664307726b3116daf266bd7660 Mon Sep 17 00:00:00 2001 From: alexandru-pocovnicu <109530683+alexandru-pocovnicu@users.noreply.github.com> Date: Mon, 16 Mar 2026 18:36:18 +0000 Subject: [PATCH 2/7] Fix: implement setAlarm function to display time remaining --- Sprint-3/alarmclock/alarmclock.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..852151821 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,11 @@ -function setAlarm() {} +function setAlarm() { + const alarmSetEl=document.getElementById("alarmSet") + const timeRemainingEl = document.getElementById("timeRemaining"); + timeRemainingEl.innerHTML=`Time Remaining: ${alarmSetEl.value}` + console.log(alarmSetEl.value); + + +} // DO NOT EDIT BELOW HERE From 3ab9799b78d8e2cda78c9939890c8e83739e2d00 Mon Sep 17 00:00:00 2001 From: alexandru-pocovnicu <109530683+alexandru-pocovnicu@users.noreply.github.com> Date: Mon, 16 Mar 2026 18:51:00 +0000 Subject: [PATCH 3/7] extract the seconds and minutes --- Sprint-3/alarmclock/alarmclock.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 852151821..4b260f5ff 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,8 +1,15 @@ function setAlarm() { const alarmSetEl=document.getElementById("alarmSet") const timeRemainingEl = document.getElementById("timeRemaining"); + +let totalSeconds=alarmSetEl.value +let seconds=totalSeconds%60 +let minutes=(totalSeconds-seconds)/60 + + timeRemainingEl.innerHTML=`Time Remaining: ${alarmSetEl.value}` - console.log(alarmSetEl.value); + + console.log(minutes); } From 8a4ba115d877c5eefd338eee2a8012953f7f772b Mon Sep 17 00:00:00 2001 From: alexandru-pocovnicu <109530683+alexandru-pocovnicu@users.noreply.github.com> Date: Thu, 19 Mar 2026 16:56:34 +0000 Subject: [PATCH 4/7] Refactor: enhance setAlarm function to improve countdown display and logic --- Sprint-3/alarmclock/alarmclock.js | 36 ++++++++++++++++++++----------- 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 4b260f5ff..400b02628 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,18 +1,30 @@ function setAlarm() { - const alarmSetEl=document.getElementById("alarmSet") - const timeRemainingEl = document.getElementById("timeRemaining"); - -let totalSeconds=alarmSetEl.value -let seconds=totalSeconds%60 -let minutes=(totalSeconds-seconds)/60 - - - timeRemainingEl.innerHTML=`Time Remaining: ${alarmSetEl.value}` + const alarmSetEl = document.getElementById("alarmSet"); + const timeRemainingEl = document.getElementById("timeRemaining"); + let totalSeconds = +alarmSetEl.value; + let intervalId; + function updateCountDown() { + let seconds = totalSeconds % 60; + let minutes = (totalSeconds - seconds) / 60; + + let paddedSeconds = seconds.toString().padStart(2, "0"); + let paddedMinutes = minutes.toString().padStart(2, "0"); + timeRemainingEl.innerHTML = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; + alarmSetEl.value = null; + + if (totalSeconds === 0) { + playAlarm(); + clearInterval(intervalId); + return; + } + totalSeconds -= 1; + } + + updateCountDown(); + intervalId = setInterval(updateCountDown, 1000); +} - console.log(minutes); - -} // DO NOT EDIT BELOW HERE From ca62e4749bb4223909e1890076ad202862441485 Mon Sep 17 00:00:00 2001 From: alexandru-pocovnicu <109530683+alexandru-pocovnicu@users.noreply.github.com> Date: Fri, 20 Mar 2026 17:22:09 +0000 Subject: [PATCH 5/7] change background to blue when stop alarm is selected --- Sprint-3/alarmclock/alarmclock.js | 4 ++++ Sprint-3/alarmclock/style.css | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 400b02628..af07382c7 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -13,8 +13,11 @@ function setAlarm() { alarmSetEl.value = null; if (totalSeconds === 0) { + document.body.classList.add("finish-countdown") + playAlarm(); clearInterval(intervalId); + return; } totalSeconds -= 1; @@ -37,6 +40,7 @@ function setup() { document.getElementById("stop").addEventListener("click", () => { pauseAlarm(); + document.body.classList.remove("finish-countdown"); }); } diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..70759381a 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -13,3 +13,7 @@ h1 { text-align: center; } + +.finish-countdown { +background-color: darkblue; +} From 08fbcbd7a2aeca65ab95f24b1a7a39ed9f3b9fdb Mon Sep 17 00:00:00 2001 From: alexandru-pocovnicu <109530683+alexandru-pocovnicu@users.noreply.github.com> Date: Fri, 20 Mar 2026 17:32:21 +0000 Subject: [PATCH 6/7] alternate background color --- Sprint-3/alarmclock/readme.md | 2 +- Sprint-3/alarmclock/style.css | 11 ++++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/Sprint-3/alarmclock/readme.md b/Sprint-3/alarmclock/readme.md index c00a20c9c..3ff659297 100644 --- a/Sprint-3/alarmclock/readme.md +++ b/Sprint-3/alarmclock/readme.md @@ -6,7 +6,7 @@ First off, once you've branched off `main`, then update the title element in `in You will need to write your implementation in `alarmclock.js`. ## How the clock should work - + When you click the `Set Alarm` button the counter at the top of the screen should change to the number you entered in the `input` field. For example, if the `input` field says `10` then the title should say `Time Remaining: 00:10`. Every one second the title should count down by one. diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 70759381a..6e5bc4424 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -15,5 +15,14 @@ h1 { } .finish-countdown { -background-color: darkblue; +animation: police 0.5s infinite; +} + +@keyframes police { + from{ + background-color:blue; + } + to{ + background-color: red; + } } From aa8df3bf65e5cc9f8293a1a8261b39d9644acb64 Mon Sep 17 00:00:00 2001 From: alexandru-pocovnicu <109530683+alexandru-pocovnicu@users.noreply.github.com> Date: Fri, 20 Mar 2026 17:41:18 +0000 Subject: [PATCH 7/7] deleted code for remove class --- Sprint-3/alarmclock/alarmclock.js | 1 - 1 file changed, 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index af07382c7..64a6feac9 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -40,7 +40,6 @@ function setup() { document.getElementById("stop").addEventListener("click", () => { pauseAlarm(); - document.body.classList.remove("finish-countdown"); }); }