tasks under Sprint 3 alarm has been done

Dagim-Daniel · Dagim-Daniel · commit e30ba623826f · 2026-07-28T23:11:03.000+01:00
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,65 @@
 function setAlarm() {}
+const display = document.querySelector("#timeRemaining");
+const totalSeconds = document.querySelector("#alarmSet");
+const setButton = document.querySelector("#set");
+const stopButton = document.querySelector("#stop");
+let conuntdownInterval;
+
+// time management function
+function formatTime(totalSeconds) {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+
+  const paddedMinutes = String(minutes).padStart(2, "0");
+  const paddedSeconds = String(seconds).padStart(2, "0");
+  return `Time Remaining: ${paddedMinutes}:${paddedSeconds}`;
+}
+
+// to clear every change made with conditions
+function clearEverything() {
+  display.style.color = "black";
+  setButton.disabled = false;
+  document.body.style.background = "";
+}
+
+// button event handler
+setButton.addEventListener("click", () => {
+  let timeleft = Number(totalSeconds.value);
+  setButton.disabled = true;
+
+  // time 0
+
+  if (timeleft <= 0) {
+    alert("please enter a number greater than 0!");
+    return;
+  }
+
+  display.textContent = formatTime(timeleft);
+
+  conuntdownInterval = setInterval(() => {
+    if (timeleft == 0) {
+      clearInterval(conuntdownInterval);
+      document.body.style.backgroundColor = "grey";
+      playAlarm();
+    }
+
+    if (timeleft <= 10) {
+      display.style.color = "red";
+    }
+
+    if (timeleft >= 0) {
+      display.textContent = formatTime(timeleft);
+      timeleft--;
+    }
+  }, 1000);
+});
+
+//stop button clicked
+stopButton.addEventListener("click", () => {
+  clearInterval(conuntdownInterval);
+  clearEverything();
+  pauseAlarm();
+});
 
 // DO NOT EDIT BELOW HERE
 
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -1,10 +1,10 @@
-<!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">
