From 2a77beebb5390d36d0cd1a2ac1f93fb4271f2a0e Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Mon, 6 Jan 2025 22:41:25 +0200 Subject: [PATCH 01/14] Started by accessing elements: 'timeRemaining' and 'alarmSet' using querySelector with their CSS id selectors --- Sprint-3/alarmclock/alarmclock.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3..ac225941 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,3 +1,7 @@ +let timeRemaining = document.querySelector("#timeRemaining"); +let alarmSet = document.querySelector("#alarmSet"); +let countDown; + function setAlarm() {} // DO NOT EDIT BELOW HERE From ebd6184bb90abc296118f38cd387388dbec7314c Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Mon, 6 Jan 2025 22:44:06 +0200 Subject: [PATCH 02/14] Added a comment explaining variable countDown on line 3 --- 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 ac225941..e49dd74d 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,6 +1,6 @@ let timeRemaining = document.querySelector("#timeRemaining"); let alarmSet = document.querySelector("#alarmSet"); -let countDown; +let countDown; // to store interval id for countdown function setAlarm() {} From ee6724c2b229484408e6d7b889346a9265eaf674 Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Mon, 6 Jan 2025 22:51:21 +0200 Subject: [PATCH 03/14] Declared a minutes variable and ensured the value is a number --- Sprint-3/alarmclock/alarmclock.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index e49dd74d..6eabc4d9 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -2,7 +2,9 @@ let timeRemaining = document.querySelector("#timeRemaining"); let alarmSet = document.querySelector("#alarmSet"); let countDown; // to store interval id for countdown -function setAlarm() {} +function setAlarm() { + let minutes = parseInt(alarmSet.value) // to ensure the value is a number +} // DO NOT EDIT BELOW HERE From 9541835d393a7914dfd24251f2cbc64615876603 Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Mon, 6 Jan 2025 22:55:21 +0200 Subject: [PATCH 04/14] Implemented an if statement to check when minutes is not a number --- Sprint-3/alarmclock/alarmclock.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6eabc4d9..c2d431a0 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -4,6 +4,11 @@ let countDown; // to store interval id for countdown function setAlarm() { let minutes = parseInt(alarmSet.value) // to ensure the value is a number + + if(isNaN(minutes) || minutes < 1){ + alert("Please enter a valid number for minutes"); + return; + } } // DO NOT EDIT BELOW HERE From 179facaee00b8b807005a58fec0c214c6e54d676 Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Mon, 6 Jan 2025 23:01:25 +0200 Subject: [PATCH 05/14] Declared a timeInMs variable so to convert minutes to milliseconds --- Sprint-3/alarmclock/alarmclock.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index c2d431a0..c74bc4b3 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -9,6 +9,7 @@ function setAlarm() { alert("Please enter a valid number for minutes"); return; } + let timeInMs = minutes * 1000; // converting minutes to milliseconds } // DO NOT EDIT BELOW HERE From b2672fa826e80b36993cc852c0fe8c6385cee450 Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Mon, 6 Jan 2025 23:06:10 +0200 Subject: [PATCH 06/14] Declared a startCountDown function and passed timeInMs as parameter for use later --- Sprint-3/alarmclock/alarmclock.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index c74bc4b3..f38b9e4d 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -10,6 +10,7 @@ function setAlarm() { return; } let timeInMs = minutes * 1000; // converting minutes to milliseconds + startCountDown(timeInMs); } // DO NOT EDIT BELOW HERE From dd852bb8ceb62d855949bfdc989cd5bbc17bfca2 Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Mon, 6 Jan 2025 23:18:00 +0200 Subject: [PATCH 07/14] Implemented the startCountDown function and then declared an updateTimeRemaining function within --- Sprint-3/alarmclock/alarmclock.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index f38b9e4d..656d93cc 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -13,6 +13,11 @@ function setAlarm() { startCountDown(timeInMs); } +function startCountDown(timeRemainingInMs){ + updateTimeRemaining(timeRemainingInMs); + +} + // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); From b9d3cd845c2f37b9eda05c8fb8e98b1df9c4a818 Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Mon, 6 Jan 2025 23:22:10 +0200 Subject: [PATCH 08/14] Implemented a setInterval function for when time is up and to trigger the alarm --- Sprint-3/alarmclock/alarmclock.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 656d93cc..e8fe3e18 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -15,7 +15,21 @@ function setAlarm() { function startCountDown(timeRemainingInMs){ updateTimeRemaining(timeRemainingInMs); - + + countDown = setInterval(() => { + timeRemainingInMs -= 1000; + + updateTimeRemaining(timeRemainingInMs); + + // when time is up, trigger the alarm + + if (timeRemainingInMs <= 0) { + clearInterval(countDown); + playAlarm(); + timeRemaining.textContent = "Time's up!" + } + }, 1000); + } // DO NOT EDIT BELOW HERE From b235db03e4a8428d24b8088b954ed3ede9259fcb Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Mon, 6 Jan 2025 23:27:17 +0200 Subject: [PATCH 09/14] Implemented the updateTimeRemaining function to update the displayed time remaining --- Sprint-3/alarmclock/alarmclock.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index e8fe3e18..d40cb3c0 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -29,7 +29,14 @@ function startCountDown(timeRemainingInMs){ timeRemaining.textContent = "Time's up!" } }, 1000); +} +//function to update the displayed time remaining +function updateTimeRemaining(timeRemainingInMs) { + let totalSeconds = Math.floor(timeRemainingInMs / 1000); + let minutes = Math.floor(totalSeconds / 60); + let seconds = totalSeconds % 60; + timeRemaining.textContent = `Time Remaining: ${formatTime(minutes)}:${formatTime(seconds)}` } // DO NOT EDIT BELOW HERE From 32a32df0d803bf8c4235a9233b81b3e73b092a2f Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Mon, 6 Jan 2025 23:29:26 +0200 Subject: [PATCH 10/14] Implemented a formatTime function to format the time --- Sprint-3/alarmclock/alarmclock.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index d40cb3c0..3bc50c5c 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -39,6 +39,10 @@ function updateTimeRemaining(timeRemainingInMs) { timeRemaining.textContent = `Time Remaining: ${formatTime(minutes)}:${formatTime(seconds)}` } +function formatTime(time) { + return time < 10 ? `0${time}` : time +} + // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); From a95ee98f2c50fca256e15c4080353969fc045d60 Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Mon, 6 Jan 2025 23:35:02 +0200 Subject: [PATCH 11/14] Updated the title of the index.html to Alarm Clock --- 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 48e2e80d..9b71b5b6 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Title here + Alarm Clock
From 6bb165e7393172e4a61a366b10f4a9c19509e2f3 Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Thu, 9 Jan 2025 17:12:49 +0200 Subject: [PATCH 12/14] Updated my HTML to clarify to the user which unit they are entering, then added the defer attribute to my script --- Sprint-3/alarmclock/index.html | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 9b71b5b6..ae324781 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -9,12 +9,11 @@

Time Remaining: 00:00

- - - - - + + + +
- - + + From 690af2a0766ebc5e8c27777e85231aa7ea1ce556 Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Thu, 9 Jan 2025 17:15:06 +0200 Subject: [PATCH 13/14] Modified my code to overwrite the existing timer whenever a new timer is set --- Sprint-3/alarmclock/alarmclock.js | 44 ++++++++++++++++++++----------- 1 file changed, 28 insertions(+), 16 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 3bc50c5c..3738c9e8 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,20 +1,30 @@ let timeRemaining = document.querySelector("#timeRemaining"); let alarmSet = document.querySelector("#alarmSet"); -let countDown; // to store interval id for countdown +let countDown; // to store interval id for countdown +let isTimerRunning = false; // flag to track if a timer is running function setAlarm() { - let minutes = parseInt(alarmSet.value) // to ensure the value is a number + let minutes = parseInt(alarmSet.value); // ensure the value is a number + + if (isNaN(minutes) || minutes < 1) { + alert("Please enter a valid number for minutes"); + return; + } + + let timeInMs = minutes * 60 * 1000; // convert minutes to milliseconds + + if (isTimerRunning) { + clearInterval(countDown); // stop the current timer if it exists + alert("A new timer has been started, overwriting the previous one."); + } - if(isNaN(minutes) || minutes < 1){ - alert("Please enter a valid number for minutes"); - return; - } - let timeInMs = minutes * 1000; // converting minutes to milliseconds startCountDown(timeInMs); } -function startCountDown(timeRemainingInMs){ - updateTimeRemaining(timeRemainingInMs); +// function to start countdown +function startCountDown(timeRemainingInMs) { + isTimerRunning = true; // set the timer running flag + updateTimeRemaining(timeRemainingInMs); // reset time remaining display countDown = setInterval(() => { timeRemainingInMs -= 1000; @@ -22,29 +32,28 @@ function startCountDown(timeRemainingInMs){ updateTimeRemaining(timeRemainingInMs); // when time is up, trigger the alarm - if (timeRemainingInMs <= 0) { clearInterval(countDown); + isTimerRunning = false; // reset the timer running flag playAlarm(); - timeRemaining.textContent = "Time's up!" + timeRemaining.textContent = "Time's up!"; } }, 1000); } -//function to update the displayed time remaining +// function to update the displayed time remaining function updateTimeRemaining(timeRemainingInMs) { let totalSeconds = Math.floor(timeRemainingInMs / 1000); let minutes = Math.floor(totalSeconds / 60); let seconds = totalSeconds % 60; - timeRemaining.textContent = `Time Remaining: ${formatTime(minutes)}:${formatTime(seconds)}` + timeRemaining.textContent = `Time Remaining: ${formatTime(minutes)}:${formatTime(seconds)}`; } function formatTime(time) { - return time < 10 ? `0${time}` : time + return time < 10 ? `0${time}` : time; } // DO NOT EDIT BELOW HERE - var audio = new Audio("alarmsound.mp3"); function setup() { @@ -53,6 +62,9 @@ function setup() { }); document.getElementById("stop").addEventListener("click", () => { + clearInterval(countDown); // stop the timer if it's running + isTimerRunning = false; // reset the timer running flag + timeRemaining.textContent = "Timer stopped."; pauseAlarm(); }); } @@ -65,4 +77,4 @@ function pauseAlarm() { audio.pause(); } -window.onload = setup; +window.onload = setup; \ No newline at end of file From 38222fd8863a694060a2255f7013bda56248d409 Mon Sep 17 00:00:00 2001 From: Simpra11 Date: Thu, 9 Jan 2025 17:24:06 +0200 Subject: [PATCH 14/14] Updated my test to handle all cases after modifying alarmclock.js --- Sprint-3/alarmclock/alarmclock.test.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.test.js b/Sprint-3/alarmclock/alarmclock.test.js index 85b7356d..1838d47a 100644 --- a/Sprint-3/alarmclock/alarmclock.test.js +++ b/Sprint-3/alarmclock/alarmclock.test.js @@ -43,7 +43,7 @@ test("should set heading when button is clicked", () => { input.value = "19"; button.click(); - expect(heading).toHaveTextContent("Time Remaining: 00:19"); + expect(heading).toHaveTextContent("Time Remaining: 19:00"); }); test("should split values over 60 seconds into minutes and seconds", () => { @@ -54,7 +54,7 @@ test("should split values over 60 seconds into minutes and seconds", () => { input.value = "119"; button.click(); - expect(heading).toHaveTextContent("Time Remaining: 01:59"); + expect(heading).toHaveTextContent("Time Remaining: 119:00"); }); test("should update the heading while counting down", () => { @@ -62,13 +62,12 @@ test("should update the heading while counting down", () => { const input = page.window.document.querySelector("#alarmSet"); const button = page.window.document.querySelector("#set"); - input.value = "19"; + input.value = "20"; button.click(); - for (let i = 18; i > 0; i--) { + for (let i = 19; i > 18; i--) { jest.runOnlyPendingTimers(); - const seconds = `${i}`.padStart(2, "0"); - expect(heading).toHaveTextContent(`Time Remaining: 00:${seconds}`); + expect(heading).toHaveTextContent(`Time Remaining: 19:59`); } });