fix alarm function as requested

Alaa-Tagi · Alaa-Tagi · commit 088c50ab2cca · 2025-11-26T19:17:42.000Z
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,32 +1,30 @@
+function updateDisplay(heading, time) {
+  const minutes = String(Math.floor(time / 60)).padStart(2, "0");
+  const seconds = String(time % 60).padStart(2, "0");
+  heading.innerText = `Time Remaining: ${minutes}:${seconds}`;
+}
+
 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);
+  updateDisplay(heading, time);
 
   const intervalId = setInterval(() => {
     time--;
 
     if (time <= 0) {
       clearInterval(intervalId);
-      updateDisplay(0);
+      updateDisplay(heading, 0);
 
       document.body.style.backgroundColor = "red";
 
       playAlarm();
-
     } else {
-      updateDisplay(time);
+      updateDisplay(heading, time);
     }
   }, 1000);
 }
@@ -54,4 +52,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,17 +4,19 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Alarm clock app</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" />
+
+      <label for="alarmSet">Set time (seconds):</label>
+      <input id="alarmSet" type="number" min="0" />
 
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>
     </div>
+
     <script src="alarmclock.js"></script>
   </body>
 </html>
