alarm clock app done

Author: risikatpopoola

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");

Sprint-3/alarmclock/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

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;
 }