CodeYourFuture · tomdu3 · Jul 27, 2026 · Jul 27, 2026 · Jul 27, 2026 · Jul 27, 2026
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,97 @@
-function setAlarm() {}
+let countDownId = null;
+let secondsTillEnd = 0;
+let pausedAlarm = false;
+
+let offFlashButton = document.getElementById("flash");
+let pauseButton = document.getElementById("pause");
+
+offFlashButton.addEventListener("click", () => {
+  flashAlarm("off");
+});
+
+pauseButton.addEventListener("click", togglePausedAlarm);
+
+function startTimer() {
+  // Clear any existing timer before starting a new one
+  if (countDownId) {
+    clearInterval(countDownId);
+  }
+
+  countDownId = setInterval(() => {
+    secondsTillEnd--;
+
+    // Play alarm if end reached
+    if (secondsTillEnd <= 0) {
+      clearInterval(countDownId);
+      countDownId = null;
+      updateHeading(0);
+      playAlarm();
+      flashAlarm("on");
+    } else {
+      updateHeading(secondsTillEnd);
+    }
+  }, 1000);
+}
+
+function setAlarm() {
+  const input = document.getElementById("alarmSet").value;
+  const seconds = parseInt(input);
+
+  // Validate input
+  if (isNaN(seconds) || seconds < 0) {
+    alert("Please enter a valid number of seconds");
+    return;
+  }
+
+  // Reset pause state if setting a new alarm
+  if (pausedAlarm) {
+    pausedAlarm = false;
+    pauseButton.innerText = "Pause Alarm";
+  }
+
+  flashAlarm("off");
+  secondsTillEnd = seconds;
+
+  // Update heading immediately
+  updateHeading(secondsTillEnd);
+
+  // Start the countdown timer
+  startTimer();
+}
+
+function updateHeading(timeInSeconds) {
+  const minutes = Math.floor(timeInSeconds / 60);
+  const seconds = timeInSeconds % 60;
+  const formattedTime = `Time Remaining: ${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  document.getElementById("timeRemaining").innerText = formattedTime;
+}
+
+function flashAlarm(mode = "on") {
+  const alarmDiv = document.getElementsByClassName("centre")[0];
+  if (mode === "off") {
+    alarmDiv.classList.remove("flash");
+  } else {
+    alarmDiv.classList.add("flash");
+  }
+}
+
+function togglePausedAlarm() {
+  // Only toggle if an alarm is actually active/running
+  if (secondsTillEnd <= 0) return;
+
+  if (pausedAlarm) {
+    // Resume alarm
+    pausedAlarm = false;
+    pauseButton.innerText = "Pause Alarm";
+    startTimer();
+  } else {
+    // Pause alarm: stop the interval completely
+    pausedAlarm = true;
+    pauseButton.innerText = "Resume Alarm";
+    clearInterval(countDownId);
+    countDownId = null;
+  }
+}
 
 // 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">
@@ -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="flash" type="button">Flash Off</button>
+      <button id="pause" type="button">Pause Alarm</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,19 @@
 h1 {
   text-align: center;
 }
+
+.flash {
+  padding: 30px;
+  animation: blink 400ms infinite;
+}
+
+@keyframes blink {
+  0%,
+  49.9% {
+    background: white;
+  }
+  50%,
+  99.9% {
+    background: red;
+  }
+}