diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..c3fa8764b 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,5 +1,58 @@ -function setAlarm() {} +// ## How the clock should work +// When you click the `Set Alarm` button the counter at the top of the screen should change to the number you entered in the `input` field. For example, if the `input` field says `10` then the title should say `Time Remaining: 00:10`. + +// Every one second the title should count down by one. + +// When the `Time Remaining` reaches `00:00` the alarm should play a sound. You can make the sound happen by using `playAlarm()`. + +// You can stop the alarm sound by pressing the `Stop Alarm` button. +const alarmInput = document.querySelector("#alarmSet"); +const timeRemaining = document.querySelector("#timeRemaining"); + +let timer; +function setAlarm() { + clearInterval(timer); + pauseAlarm(); + let totalSeconds = Math.round(Number(alarmInput.value)); + + if (totalSeconds > 36000) { + alert("Please enter a time less than 10 hours."); + alarmInput.value = ""; + updateTime(0); + return; + } + if ( + alarmInput.value === "" || + totalSeconds <= 0 || + !Number.isInteger(totalSeconds) + ) { + alert("Please enter a valid number of seconds"); + updateTime(0); + alarmInput.value = ""; + return; + } + alarmInput.value = ""; + + updateTime(totalSeconds); + + timer = setInterval(() => { + totalSeconds--; + updateTime(totalSeconds); + + if (totalSeconds === 0) { + playAlarm(); + clearInterval(timer); + } + }, 1000); +} + +function updateTime(secs) { + const minutes = String(Math.floor(secs / 60)).padStart(2, "0"); + const seconds = String(secs % 60).padStart(2, "0"); + + timeRemaining.innerText = `Time Remaining: ${minutes}:${seconds}`; +} // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..ea5fb6bdf 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -1,10 +1,10 @@ - + - Title here + Alarm Clock app
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..1c5791037 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -12,4 +12,13 @@ h1 { text-align: center; + color: rgb(117, 13, 13); +} +body { + background-color: rgb(197, 107, 122); +} +button { + background-color: rgb(151, 77, 114); + color: white; + padding: 10px; }