CodeYourFuture · Tobias-Amaechina · Jul 28, 2026 · Jul 28, 2026 · Jul 28, 2026 · Jul 28, 2026
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,98 @@
-function setAlarm() {}
+let timeRemaining = 0;
+let intervalId = null;
+let isPaused = false;
+
+function reset() {
+  // 1. Stop any active interval timer and clear the ID
+  clearInterval(intervalId);
+  intervalId = null;
+
+  // 2. Reset the state variables back to default
+  timeRemaining = 0;
+  isPaused = false;
+
+  // 3. Stop visual and audio effects
+  document.body.classList.remove("flash");
+  pauseAlarm();
+
+  // 4. Update the screen display back to 00:00
+  updateDisplay(0);
+}
+
+function setAlarm() {
+  const input = document.getElementById("alarmSet");
+  const value = input.value.trim();//trim empty string 
+  //Check if the input is empty 
+  if (value === "") {
+    alert("Please enter a number of seconds.");
+    return;
+  }
+
+  const seconds = Number(value);
+//validate that input is a positive integer and doestn't exceed 1 hour
+  if (
+    isNaN(seconds) ||
+    !Number.isInteger(seconds) ||
+    seconds <= 0 ||
+    seconds > 3600
+  ) {
+    alert("Please enter a valid whole number between 1 and 3600.");
+    return;
+  }
+  reset();
+
+  timeRemaining = seconds;
+  isPaused = false;
+  updateDisplay(timeRemaining);
+  // Start a new countdown
+  startCountdown();
+}
+
+function startCountdown() {
+  if (intervalId !== null) {
+    return;
+  }
+
+  intervalId = setInterval(() => {
+    timeRemaining--;
+    updateDisplay(timeRemaining);
+
+    if (timeRemaining <= 0) {
+      clearInterval(intervalId);
+      intervalId = null;
+      playAlarm();
+      document.body.classList.add("flash");
+    }
+  }, 1000);
+}
+
+function updateDisplay(seconds) {
+  const title = document.getElementById("timeRemaining");
+
+
+  const mins = String(Math.floor(seconds / 60)).padStart(2, "0");
+  const secs = String(seconds % 60).padStart(2, "0");
+
+  title.textContent = `Time Remaining: ${mins}:${secs}`;
+}
+function togglePause() {
+  if (intervalId === null && !isPaused) {
+    return;
+  }
+
+  if (!isPaused) {
+    clearInterval(intervalId);
+    intervalId = null;
+    isPaused = true;
+  } else {
+    isPaused = false;
+    startCountdown();
+  }
+}
+document.getElementById("pause").addEventListener("click", togglePause);
+document.getElementById("stop").addEventListener("click", reset);
+
+
 
 // DO NOT EDIT BELOW HERE
 

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">
@@ -14,6 +14,8 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
 
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>
+      <button id="pause">Pause</button>
+
     </div>
     <script src="alarmclock.js"></script>
   </body>

diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
@@ -13,3 +13,11 @@
 h1 {
   text-align: center;
 }
+.flash {
+  animation: flash-bg 0.5s infinite alternate;
+}
+
+@keyframes flash-bg {
+  from { background-color: white; }
+  to { background-color: red; }
+}