From 790e0b99ca9b5c9ad09877048d9a7c5b45270c1a Mon Sep 17 00:00:00 2001 From: vmoratti Date: Wed, 5 Aug 2026 16:00:36 +0100 Subject: [PATCH 1/4] 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/4] 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/4] 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/4] 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