From 188f02b4a5835860f0757a76fd966f10cce5523f Mon Sep 17 00:00:00 2001 From: Elisabeth-Matulian Date: Mon, 16 Mar 2026 19:36:22 +0000 Subject: [PATCH 1/4] copmleted alarm clock app --- Sprint-3/alarmclock/alarmclock.js | 42 ++++++++++++++++++++++++++++++- Sprint-3/alarmclock/index.html | 2 +- Sprint-3/alarmclock/package.json | 6 ++++- 3 files changed, 47 insertions(+), 3 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..610824746 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,42 @@ -function setAlarm() {} +const timeRemaining = document.querySelector("#timeRemaining"); + +let intervalId; + + + +function setAlarm() { + // I will use the function showTime twice, one for showing the time just after the user clicks the set button and another one for updating the time every second in countdown function + function showTime() { + // getting te mins and seconds from the inputValue in appropriate format + const minutes = Math.floor(inputValue / 60) + .toString() + .padStart(2, "0"); + const seconds = (inputValue % 60).toString().padStart(2, "0"); + //Gathering everything together and outputing remaining time + timeRemaining.innerText = `Time Remaining: ${minutes}:${seconds}`; +}; + // I added the next line in case if we want to reset the time for alarm + clearInterval(intervalId); + // getting the input value in number format + let inputValue = Number(document.querySelector("#alarmSet").value); + showTime(); + intervalId = setInterval(countdown, 1000); + + function countdown() { + if (inputValue > 0) { + //decrease the entered number by 1 + inputValue--; + showTime(); + } + // When the inputValue is 0, play the alarm and clear interval so that the function stops initialising + else { + playAlarm(); + clearInterval(intervalId); + } + } +} + + // DO NOT EDIT BELOW HERE @@ -20,6 +58,8 @@ function playAlarm() { function pauseAlarm() { audio.pause(); + //I know it's said to not edit this code, I wonder if it's ok to add this line below in order to pause the time before the time runs out. + clearInterval(intervalId); } window.onload = setup; 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
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" + } } From cd7d038332e913d6dc430ba7d9fbfe180f48d7b1 Mon Sep 17 00:00:00 2001 From: Elisabeth-Matulian Date: Mon, 23 Mar 2026 13:40:10 +0000 Subject: [PATCH 2/4] updated alarm clock app --- Sprint-3/alarmclock/alarmclock.js | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 610824746..258199a6c 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,43 +1,45 @@ const timeRemaining = document.querySelector("#timeRemaining"); -let intervalId; - - +let intervalId; //declared here so that I can use it in line-17, before asigning on line 21. function setAlarm() { // I will use the function showTime twice, one for showing the time just after the user clicks the set button and another one for updating the time every second in countdown function - function showTime() { - // getting te mins and seconds from the inputValue in appropriate format + function showTime(inputValue) { + if (inputValue >= 0) { + // getting the mins & sec from the inputValue(line19) in appropriate format const minutes = Math.floor(inputValue / 60) .toString() .padStart(2, "0"); const seconds = (inputValue % 60).toString().padStart(2, "0"); //Gathering everything together and outputing remaining time timeRemaining.innerText = `Time Remaining: ${minutes}:${seconds}`; -}; - // I added the next line in case if we want to reset the time for alarm +}} + //the next line in case if we want to reset the time for alarm clearInterval(intervalId); - // getting the input value in number format + // getting user's input value in number format let inputValue = Number(document.querySelector("#alarmSet").value); - showTime(); + if (inputValue <= 0) { + timeRemaining.innerText = "Enter a positive number."; + document.querySelector("#alarmSet").value = ''; + return; + } + showTime(inputValue); intervalId = setInterval(countdown, 1000); function countdown() { - if (inputValue > 0) { - //decrease the entered number by 1 + if (inputValue >= 0) { inputValue--; - showTime(); + showTime(inputValue); } // When the inputValue is 0, play the alarm and clear interval so that the function stops initialising else { playAlarm(); clearInterval(intervalId); + document.querySelector("#alarmSet").value = ''; } } } - - // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); From ac9e9324e8fdde13fe78e5e85a0388f5034ccb46 Mon Sep 17 00:00:00 2001 From: Elisabeth-Matulian Date: Thu, 26 Mar 2026 21:50:00 +0000 Subject: [PATCH 3/4] Fix countdown display and create var to avoid bloating --- Sprint-3/alarmclock/alarmclock.js | 36 ++++++++++++++++--------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 258199a6c..f669596f6 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,44 +1,48 @@ const timeRemaining = document.querySelector("#timeRemaining"); -let intervalId; //declared here so that I can use it in line-17, before asigning on line 21. +let intervalId; //declared here so that I can use it in line-17, before asigning on line 21. function setAlarm() { + const alarmSetInput = document.querySelector("#alarmSet"); + // I will use the function showTime twice, one for showing the time just after the user clicks the set button and another one for updating the time every second in countdown function function showTime(inputValue) { - if (inputValue >= 0) { - // getting the mins & sec from the inputValue(line19) in appropriate format - const minutes = Math.floor(inputValue / 60) - .toString() - .padStart(2, "0"); - const seconds = (inputValue % 60).toString().padStart(2, "0"); - //Gathering everything together and outputing remaining time - timeRemaining.innerText = `Time Remaining: ${minutes}:${seconds}`; -}} + // getting the mins & sec from the inputValue(line19) in appropriate format + const minutes = Math.floor(inputValue / 60) + .toString() + .padStart(2, "0"); + const seconds = (inputValue % 60).toString().padStart(2, "0"); + //Gathering everything together and outputing remaining time + timeRemaining.innerText = `Time Remaining: ${minutes}:${seconds}`; + } //the next line in case if we want to reset the time for alarm clearInterval(intervalId); // getting user's input value in number format - let inputValue = Number(document.querySelector("#alarmSet").value); + let inputValue = Number(alarmSetInput.value); if (inputValue <= 0) { timeRemaining.innerText = "Enter a positive number."; - document.querySelector("#alarmSet").value = ''; + alarmSetInput.value = ""; return; } showTime(inputValue); intervalId = setInterval(countdown, 1000); function countdown() { - if (inputValue >= 0) { + if (inputValue > 0) { inputValue--; showTime(inputValue); } - // When the inputValue is 0, play the alarm and clear interval so that the function stops initialising + // When the inputValue is 0, play the alarm and clear interval so that the function stops initialising else { playAlarm(); clearInterval(intervalId); - document.querySelector("#alarmSet").value = ''; + alarmSetInput.value = ""; } } } +// document.getElementById("stop").addEventListener("click", () => { +// clearInterval(intervalId); +// }); // DO NOT EDIT BELOW HERE @@ -60,8 +64,6 @@ function playAlarm() { function pauseAlarm() { audio.pause(); - //I know it's said to not edit this code, I wonder if it's ok to add this line below in order to pause the time before the time runs out. - clearInterval(intervalId); } window.onload = setup; From 9b5df1eae3afed0add57fc97e87c17376bebbb9f Mon Sep 17 00:00:00 2001 From: Elisabeth-Matulian Date: Fri, 27 Mar 2026 10:42:21 +0000 Subject: [PATCH 4/4] stop listener added --- Sprint-3/alarmclock/alarmclock.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index f669596f6..2b4bd444e 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,9 +1,9 @@ const timeRemaining = document.querySelector("#timeRemaining"); let intervalId; //declared here so that I can use it in line-17, before asigning on line 21. +const alarmSetInput = document.querySelector("#alarmSet"); function setAlarm() { - const alarmSetInput = document.querySelector("#alarmSet"); // I will use the function showTime twice, one for showing the time just after the user clicks the set button and another one for updating the time every second in countdown function function showTime(inputValue) { @@ -40,9 +40,11 @@ function setAlarm() { } } } -// document.getElementById("stop").addEventListener("click", () => { -// clearInterval(intervalId); -// }); +document.getElementById("stop").addEventListener("click", () => { + clearInterval(intervalId); + timeRemaining.innerText = `Time Remaining: 00:00`; + alarmSetInput.value = ""; + }); // DO NOT EDIT BELOW HERE