implement an alarm function and update title in index.html

Alaa-Tagi · Alaa-Tagi · commit f93276d989f3 · 2025-11-26T15:05:48.000Z
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,36 @@
-function setAlarm() {}
+function setAlarm() {
+  let time = Number(document.getElementById("alarmSet").value);
+  const heading = document.getElementById("timeRemaining");
+
+  audio.loop = true;
+
+  document.body.style.backgroundColor = "";
+
+  function updateDisplay(t) {
+    const minutes = String(Math.floor(t / 60)).padStart(2, "0");
+    const seconds = String(t % 60).padStart(2, "0");
+    heading.innerText = `Time Remaining: ${minutes}:${seconds}`;
+  }
+
+  updateDisplay(time);
+
+  const intervalId = setInterval(() => {
+    time--;
+
+    if (time <= 0) {
+      clearInterval(intervalId);
+      updateDisplay(0);
+
+      document.body.style.backgroundColor = "red";
+
+      playAlarm();
+
+    } else {
+      updateDisplay(time);
+    }
+  }, 1000);
+}
+
 
 // DO NOT EDIT BELOW HERE
 
@@ -22,4 +54,4 @@ function pauseAlarm() {
   audio.pause();
 }
 
-window.onload = setup;
+window.onload = setup;
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -4,7 +4,7 @@
     <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">
