Complete feature/sprint-3-alarmclock

mohsenzamanist · mohsenzamanist · commit d36586d1e73c · 2026-02-04T20:13:09.000Z
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,27 @@
-function setAlarm() {}
+function setScreenTimer(totalSeconds) {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  const timeRemainingSpan = document.querySelector("#timeRemaining span");
+  timeRemainingSpan.textContent = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+}
+
+function setAlarm() {
+  const alarmSet = document.getElementById("alarmSet");
+  let totalSeconds = Number(alarmSet.value);
+
+  setScreenTimer(totalSeconds);
+
+  const timer = setInterval(() => {
+    totalSeconds--;
+    if (totalSeconds <= 0) {
+      setScreenTimer(0);
+      clearInterval(timer);
+      playAlarm();
+    } else {
+      setScreenTimer(totalSeconds);
+    }
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -1,20 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <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>
+      <h1 id="timeRemaining">Time Remaining: <span>00:00</span></h1>
       <label for="alarmSet">Set time to:</label>
       <input id="alarmSet" type="number" />
 
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>
     </div>
-    <script src="alarmclock.js"></script>
+    <script src="alarmclock.js" defer></script>
   </body>
 </html>
