diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..45c4e263a 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,5 +1,33 @@ -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 setButton = document.querySelector("#set"); +const timeRemaining = document.querySelector("#timeRemaining"); +function setAlarm() { + let totalSeconds = Number(alarmInput.value); + const timer = setInterval(() => { + totalSeconds--; + const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, "0"); + const seconds = String(Math.floor(totalSeconds % 60)).padStart(2, "0"); + const remainingTime = minutes + ":" + seconds; + timeRemaining.innerText = `Time Remaining:${remainingTime}`; + if (totalSeconds === 0) { + clearInterval(timer); + playAlarm(); + } + }, 1000); +} + +setButton.addEventListener("click", setAlarm); // 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; }