diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..6af1dce59 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,83 @@ -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 +let remainingSeconds = 0; +let minutes = 0; +let seconds = 0; +let paddedMinutes = 0; +let paddedSeconds = 0; +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 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; + formatTime(); + alarmDisplay.textContent = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`; +} // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..b0b194d0d 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,8 @@ -