From 790e0b99ca9b5c9ad09877048d9a7c5b45270c1a Mon Sep 17 00:00:00 2001 From: vmoratti Date: Wed, 5 Aug 2026 16:00:36 +0100 Subject: [PATCH 1/9] extract and separate minutes and secs from the input field --- Sprint-3/alarmclock/alarmclock.js | 50 ++++++++++++++++++++++++++++++- Sprint-3/alarmclock/index.html | 5 ++-- 2 files changed, 52 insertions(+), 3 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..4c2fde313 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,52 @@ -function setAlarm() {} +//Given the user has entered a number in the input field +//When the user clicks the "Set Alarm" button +//Then the "Time Remaining" title should update to show the entered number in mm:ss format + +//Given the alarm is set with a valid time +//When one second passes +//Then the "Time Remaining" title should decrement by 1 second + +//Given the alarm is set with a time of 00:00 +//When the timer reaches 00:00 +//Then the alarm sound should play continuously + +//Given the alarm sound is currently playing +//When the user clicks the "Stop Alarm" button +//Then the alarm sound should stop playing + +//Given the alarm is set with a time of 00:10 +//When the timer reaches 00:00 +//Then the background colour should change +//And the alarm sound should play + +//Given the user has not set an alarm +//When the page first loads +//Then the "Time Remaining" title should show 00:00 +// And no alarm sound should play + +// 1. create variable that holds time entered by user +// 2. create a variable we are counting to +// 3. convert time to minutes and seconds and store it +// in variable +// 4. display the time in the "Time Remaining" title. +// when "Set alarm" button is clicked. +// 5. decrement the time by 1 second every second +// 6. trigger the alarm sound when the time reaches 00:00 + +function setAlarm() { + const numArea = document.getElementById("alarmSet").value; + let minutes = Math.floor(numArea / 60); + let paddedMinutes; + paddedMinutes = minutes.toString().padStart(2, "0"); + + const seconds = numArea % 60; + let paddedSeconds; + paddedSeconds = seconds.toString().padStart(2, "0"); + + const alarmDisplay = document.getElementById("timeRemaining"); + + alarmDisplay.innerHTML = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; //return console.log(String(alarmDisplay)); +} // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..b2a18fad5 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,8 @@ - Title here + + Alarm clock app
@@ -15,6 +16,6 @@

Time Remaining: 00:00

- + From bbddfb45ee68f934247a1556addc618b0e07a4c9 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Thu, 6 Aug 2026 12:11:20 +0100 Subject: [PATCH 2/9] fix functionality to staart and stop alarm --- Sprint-3/alarmclock/alarmclock.js | 42 +++++++++++++++++++++++++------ 1 file changed, 34 insertions(+), 8 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 4c2fde313..66be17c11 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -32,20 +32,46 @@ // when "Set alarm" button is clicked. // 5. decrement the time by 1 second every second // 6. trigger the alarm sound when the time reaches 00:00 +let remainingSeconds = 0; +let minutes = 0; +let seconds = 0; +let paddedMinutes = 0; +let paddedSeconds = 0; +let timer = null; +const alarmDisplay = document.getElementById("timeRemaining"); function setAlarm() { - const numArea = document.getElementById("alarmSet").value; - let minutes = Math.floor(numArea / 60); - let paddedMinutes; - paddedMinutes = minutes.toString().padStart(2, "0"); + remainingSeconds = Number(document.getElementById("alarmSet").value); - const seconds = numArea % 60; - let paddedSeconds; + // Read the input + minutes = Math.floor(remainingSeconds / 60); + paddedMinutes = minutes.toString().padStart(2, "0"); + seconds = remainingSeconds % 60; paddedSeconds = seconds.toString().padStart(2, "0"); + // Store remainingSeconds + // Display the first time + + alarmDisplay.textContent = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; //return console.log(String(alarmDisplay)); - const alarmDisplay = document.getElementById("timeRemaining"); + // Start the timer + timer = setInterval(updateDisplay, 1000); +} - alarmDisplay.innerHTML = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; //return console.log(String(alarmDisplay)); +function updateDisplay() { + remainingSeconds = remainingSeconds - 1; + minutes = Math.floor(remainingSeconds / 60); + paddedMinutes = minutes.toString().padStart(2, "0"); + seconds = remainingSeconds % 60; + paddedSeconds = seconds.toString().padStart(2, "0"); + if (remainingSeconds < 0) { + clearInterval(timer); + return audio; + } + // Read the input + // Calculate minutes + // Calculate seconds + // Update the heading + alarmDisplay.textContent = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; //return console.log(String(alarmDisplay)); } // DO NOT EDIT BELOW HERE From d4e0bf2f45a22b0726fc481de04af6e053faffd5 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Thu, 6 Aug 2026 13:42:27 +0100 Subject: [PATCH 3/9] add one link to html file, and refactor js function --- Sprint-3/alarmclock/alarmclock.js | 15 ++++++--------- Sprint-3/alarmclock/index.html | 2 +- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 66be17c11..a6f9d2655 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -37,10 +37,11 @@ let minutes = 0; let seconds = 0; let paddedMinutes = 0; let paddedSeconds = 0; -let timer = null; +let timer; const alarmDisplay = document.getElementById("timeRemaining"); function setAlarm() { + clearInterval(timer); remainingSeconds = Number(document.getElementById("alarmSet").value); // Read the input @@ -58,19 +59,15 @@ function setAlarm() { } function updateDisplay() { + if (remainingSeconds === 0) { + clearInterval(timer); + return playAlarm(); + } remainingSeconds = remainingSeconds - 1; minutes = Math.floor(remainingSeconds / 60); paddedMinutes = minutes.toString().padStart(2, "0"); seconds = remainingSeconds % 60; paddedSeconds = seconds.toString().padStart(2, "0"); - if (remainingSeconds < 0) { - clearInterval(timer); - return audio; - } - // Read the input - // Calculate minutes - // Calculate seconds - // Update the heading alarmDisplay.textContent = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; //return console.log(String(alarmDisplay)); } diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index b2a18fad5..b0b194d0d 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - + Alarm clock app From 0c860c9a698b3e27bddfc122326edf4c52b44028 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Thu, 6 Aug 2026 14:29:47 +0100 Subject: [PATCH 4/9] add comments --- Sprint-3/alarmclock/alarmclock.js | 42 ++++++++++++++++++------------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index a6f9d2655..6af1dce59 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -39,36 +39,44 @@ let paddedMinutes = 0; let paddedSeconds = 0; let timer; const alarmDisplay = document.getElementById("timeRemaining"); - -function setAlarm() { - clearInterval(timer); - remainingSeconds = Number(document.getElementById("alarmSet").value); - - // Read the input +function formatTime() { + //this function will separate minutes and seconds and add zeros + // if minutes or seconds are in single digits. minutes = Math.floor(remainingSeconds / 60); paddedMinutes = minutes.toString().padStart(2, "0"); seconds = remainingSeconds % 60; paddedSeconds = seconds.toString().padStart(2, "0"); - // Store remainingSeconds - // Display the first time - - alarmDisplay.textContent = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; //return console.log(String(alarmDisplay)); - - // Start the timer +} +function setAlarm() { + //1.this function clears the timer for the first use + //2. gets the entered number and stores in in the variable + //3. checks for invalid input + //4. displays the initial timer in minutes and seconds + //5. starts timer + clearInterval(timer); + remainingSeconds = Number(document.getElementById("alarmSet").value); + if (remainingSeconds === 0) { + return pauseAlarm(); + } else if (remainingSeconds < 0) { + return clearInterval(timer); + } + formatTime(); + alarmDisplay.textContent = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; timer = setInterval(updateDisplay, 1000); } function updateDisplay() { + //this function: + //1. when timer reaches zero it stops the timer. + //2. it then sounds alarm + //3. otherwise it decrements the timer and displays the result. if (remainingSeconds === 0) { clearInterval(timer); return playAlarm(); } remainingSeconds = remainingSeconds - 1; - minutes = Math.floor(remainingSeconds / 60); - paddedMinutes = minutes.toString().padStart(2, "0"); - seconds = remainingSeconds % 60; - paddedSeconds = seconds.toString().padStart(2, "0"); - alarmDisplay.textContent = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; //return console.log(String(alarmDisplay)); + formatTime(); + alarmDisplay.textContent = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; } // DO NOT EDIT BELOW HERE From 7ecd8adc1b55f5fc981d4c1c38ac3525b42c98f2 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Sun, 9 Aug 2026 21:07:55 +0100 Subject: [PATCH 5/9] Refactor formatTime and update alarm display Refactor formatTime function to accept remainingSeconds as a parameter and return formatted time string. Update alarm display logic to use the new formatTime function. --- Sprint-3/alarmclock/alarmclock.js | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6af1dce59..5cb2452d0 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -32,20 +32,17 @@ // when "Set alarm" button is clicked. // 5. decrement the time by 1 second every second // 6. trigger the alarm sound when the time reaches 00:00 -let remainingSeconds = 0; -let minutes = 0; -let seconds = 0; -let paddedMinutes = 0; -let paddedSeconds = 0; +let remainingSeconds; let timer; const alarmDisplay = document.getElementById("timeRemaining"); -function formatTime() { - //this function will separate minutes and seconds and add zeros - // if minutes or seconds are in single digits. - minutes = Math.floor(remainingSeconds / 60); - paddedMinutes = minutes.toString().padStart(2, "0"); - seconds = remainingSeconds % 60; - paddedSeconds = seconds.toString().padStart(2, "0"); +function formatTime(remainingSeconds) { + const minutes = Math.floor(remainingSeconds / 60); + const paddedMinutes = minutes.toString().padStart(2, "0"); + + const seconds = remainingSeconds % 60; + const paddedSeconds = seconds.toString().padStart(2, "0"); + + return `${paddedMinutes}:${paddedSeconds}`; } function setAlarm() { //1.this function clears the timer for the first use @@ -61,7 +58,7 @@ function setAlarm() { return clearInterval(timer); } formatTime(); - alarmDisplay.textContent = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; + alarmDisplay.textContent = `Time Remaining: ${formatTime(remainingSeconds)}`; timer = setInterval(updateDisplay, 1000); } @@ -75,8 +72,10 @@ function updateDisplay() { return playAlarm(); } remainingSeconds = remainingSeconds - 1; - formatTime(); - alarmDisplay.textContent = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; + alarmDisplay.textContent = `Time Remaining: ${formatTime(remainingSeconds)}`; +} +function stopTimer() { + clearInterval(timer); } // DO NOT EDIT BELOW HERE From 9c1e20b1a6a67d967cdd66653da0f35942cf1ca3 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Sun, 9 Aug 2026 21:09:04 +0100 Subject: [PATCH 6/9] Add onclick event to Stop Alarm button --- 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 b0b194d0d..94561a7f3 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -14,7 +14,7 @@

Time Remaining: 00:00

- + From 01503022ff158d4507823d8bad87212be4b040e5 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Mon, 10 Aug 2026 19:18:05 +0100 Subject: [PATCH 7/9] change js to show validation message and refactor, refactor css and html --- Sprint-3/alarmclock/alarmclock.js | 13 +++++++------ Sprint-3/alarmclock/index.html | 1 - Sprint-3/alarmclock/style.css | 9 +++++++-- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 5cb2452d0..05e26fa04 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -52,12 +52,11 @@ function setAlarm() { //5. starts timer clearInterval(timer); remainingSeconds = Number(document.getElementById("alarmSet").value); - if (remainingSeconds === 0) { - return pauseAlarm(); - } else if (remainingSeconds < 0) { - return clearInterval(timer); + if (remainingSeconds < 1) { + alarmDisplay.textContent = `Enter a valid number of seconds greater than 0`; + return pauseAlarm(); } - formatTime(); + alarmDisplay.textContent = `Time Remaining: ${formatTime(remainingSeconds)}`; timer = setInterval(updateDisplay, 1000); } @@ -67,7 +66,7 @@ function updateDisplay() { //1. when timer reaches zero it stops the timer. //2. it then sounds alarm //3. otherwise it decrements the timer and displays the result. - if (remainingSeconds === 0) { + if (remainingSeconds < 1) { clearInterval(timer); return playAlarm(); } @@ -101,3 +100,5 @@ function pauseAlarm() { } window.onload = setup; + + diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 94561a7f3..d0414957d 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -12,7 +12,6 @@

Time Remaining: 00:00

- diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..35842d666 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -4,12 +4,17 @@ left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); + text-align: center; +} +#alarmSet { + border: 1px solid #080808; } - #alarmSet { margin: 20px; } - h1 { text-align: center; + width: 500px; + min-height: 75px; } + From 3e64600f13c18d4db9a15ab2a8238c52365b89ca Mon Sep 17 00:00:00 2001 From: vmoratti Date: Mon, 10 Aug 2026 20:07:09 +0100 Subject: [PATCH 8/9] add change colour functionality --- Sprint-3/alarmclock/alarmclock.js | 5 +++++ Sprint-3/alarmclock/style.css | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 05e26fa04..2372d6c00 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -60,6 +60,9 @@ function setAlarm() { alarmDisplay.textContent = `Time Remaining: ${formatTime(remainingSeconds)}`; timer = setInterval(updateDisplay, 1000); } +function changeBackground() { + document.body.classList.add("alarm-finished"); +} function updateDisplay() { //this function: @@ -68,6 +71,7 @@ function updateDisplay() { //3. otherwise it decrements the timer and displays the result. if (remainingSeconds < 1) { clearInterval(timer); + changeBackground(); return playAlarm(); } remainingSeconds = remainingSeconds - 1; @@ -77,6 +81,7 @@ function stopTimer() { clearInterval(timer); } + // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 35842d666..b3b7efbbf 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -17,4 +17,8 @@ h1 { width: 500px; min-height: 75px; } +.alarm-finished { + background-color: rgb(237, 59, 59); + transition: background-color 3s ease; +} From db90544cfaddc23af460cb4ffd7fbaa26a7dd682 Mon Sep 17 00:00:00 2001 From: vmoratti Date: Tue, 11 Aug 2026 12:47:00 +0100 Subject: [PATCH 9/9] add resetBackground() function --- Sprint-3/alarmclock/alarmclock.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 2372d6c00..c50f885fe 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -51,10 +51,11 @@ function setAlarm() { //4. displays the initial timer in minutes and seconds //5. starts timer clearInterval(timer); + resetBackground(); remainingSeconds = Number(document.getElementById("alarmSet").value); if (remainingSeconds < 1) { alarmDisplay.textContent = `Enter a valid number of seconds greater than 0`; - return pauseAlarm(); + return pauseAlarm(); } alarmDisplay.textContent = `Time Remaining: ${formatTime(remainingSeconds)}`; @@ -63,6 +64,9 @@ function setAlarm() { function changeBackground() { document.body.classList.add("alarm-finished"); } +function resetBackground() { + document.body.classList.remove("alarm-finished"); +} function updateDisplay() { //this function: @@ -81,7 +85,6 @@ function stopTimer() { clearInterval(timer); } - // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); @@ -105,5 +108,3 @@ function pauseAlarm() { } window.onload = setup; - -