done building alarm clock app

Author: Dipa-Sarker

Sprint-3/alarmclock/alarmclock.js

@@ -23,3 +23,53 @@ function pauseAlarm() {
 }
 
 window.onload = setup;
+
+const timeRemainingElement = document.querySelector("#timeRemaining");
+const alarmSetElement = document.querySelector("#alarmSet");
+const setButtonElement = document.querySelector("#set");
+const stopButtonElement = document.querySelector("#stop");
+const bodyElement = document.querySelector("body");
+const alarmSoundElement = document.querySelector("#alarmSound");
+
+let remainingTime;
+let intervalID;
+function triggerAlarm() {
+  bodyElement.style.backgroundColor = "yellow";
+  alarmSoundElement.play();
+}
+function setAlarm() {
+  clearInterval(intervalID);
+  const alarmTime = alarmSetElement.value;
+  remainingTime = Number(alarmTime);
+  const showTimeMinutes = Math.floor(remainingTime / 60)
+    .toString()
+    .padStart(2, "0");
+  const showTimeSeconds = (remainingTime % 60).toString().padStart(2, "0");
+  timeRemainingElement.innerText = showTimeMinutes + ":" + showTimeSeconds;
+  if (remainingTime === 0) {
+    triggerAlarm();
+  } else {
+    intervalID = setInterval(countDown, 1000);
+  }
+}
+setButtonElement.addEventListener("click", setAlarm);
+function countDown() {
+  if (remainingTime <= 0) {
+    clearInterval(intervalID);
+    triggerAlarm();
+    return;
+  }
+  remainingTime -= 1;
+  const remainingMinutes = Math.floor(remainingTime / 60)
+    .toString()
+    .padStart(2, "0");
+  const remainingSeconds = (remainingTime % 60).toString().padStart(2, "0");
+  timeRemainingElement.innerText = remainingMinutes + ":" + remainingSeconds;
+}
+function stopAlarm() {
+  clearInterval(intervalID);
+  alarmSoundElement.pause();
+  alarmSoundElement.currentTime = 0;
+  bodyElement.style.backgroundColor = "";
+}
+stopButtonElement.addEventListener("click", stopAlarm);

Sprint-3/alarmclock/index.html

@@ -4,13 +4,14 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <title>Alarm clock app</title>
   </head>
   <body>
     <div class="centre">
       <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <label for="alarmSet">Set time to:</label>
       <input id="alarmSet" type="number" />
+      <audio id="alarmSound" src="alarmsound.mp3" loop></audio>
 
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>