CodeYourFuture · HoussamLh · Sep 13, 2025 · Sep 13, 2025 · Sep 13, 2025 · Sep 13, 2025
diff --git a/Sprint-3/alarmclock/index.html → Sprint-3/alarmclock/Alarm clock app.html b/Sprint-3/alarmclock/index.html → Sprint-3/alarmclock/Alarm clock app.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 Alarm</button>
+      <button id="resume">Resume Alarm</button>
     </div>
     <script src="alarmclock.js"></script>
   </body>

diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,96 @@
-function setAlarm() {}
+// Refactor the Alarm Clock code with advanced features
+
+let timerId = null;
+let remainingSeconds = 0;
+let alarmFlashing = false;
+
+// Update the display
+function updateDisplay() {
+  let minutes = String(Math.floor(remainingSeconds / 60)).padStart(2, "0");
+  let seconds = String(remainingSeconds % 60).padStart(2, "0");
+  document.getElementById(
+    "timeRemaining"
+  ).textContent = `Time Remaining: ${minutes}:${seconds}`;
+}
+
+// Start flashing background
+function startFlashing() {
+  if (!alarmFlashing) {
+    document.body.classList.add("flash");
+    alarmFlashing = true;
+  }
+}
+
+// Stop flashing background
+function stopFlashing() {
+  if (alarmFlashing) {
+    document.body.classList.remove("flash");
+    document.body.style.backgroundColor = "white";
+    alarmFlashing = false;
+  }
+}
+
+// Shared countdown logic
+function startCountdown() {
+  timerId = setInterval(() => {
+    remainingSeconds -= 1;
+    // Update the display each second
+    updateDisplay();
+
+    if (remainingSeconds <= 0) {
+      // Time's up
+      remainingSeconds = 0;
+      clearInterval(timerId);
+      timerId = null;
+      playAlarm();    // plays sound only
+      startFlashing(); // flash background
+    }
+  }, 1000);
+}
+
+// Set a new alarm
+function setAlarm() {
+  const input = document.getElementById("alarmSet");
+  const time = parseInt(input.value, 10);
+
+  if (isNaN(time) || time <= 0) return;
+
+  clearInterval(timerId);
+  timerId = null;
+  remainingSeconds = time;
+  input.value = "";
+
+  stopFlashing();  // reset background if previous alarm was active
+  updateDisplay();
+  startCountdown();
+}
+
+// Pause countdown
+function pauseCountdown() {
+  if (timerId !== null) {
+    clearInterval(timerId);
+    timerId = null;
+  }
+  stopFlashing(); // stop flashing if paused
+}
+
+// Resume countdown
+function resumeCountdown() {
+  if (timerId === null && remainingSeconds > 0) {
+    startCountdown();
+  }
+}
+
+// --- Event listeners for Pause and Resume moved outside DO NOT EDIT ---
+window.addEventListener("DOMContentLoaded", () => {
+  const pauseBtn = document.getElementById("pause");
+  const resumeBtn = document.getElementById("resume");
+   const stopBtn = document.getElementById("stop");
+
+  if (pauseBtn) pauseBtn.addEventListener("click", pauseCountdown);
+  if (resumeBtn) resumeBtn.addEventListener("click", resumeCountdown);
+  if (stopBtn) stopBtn.addEventListener("click", stopFlashing); // reset background
+});
 
 // DO NOT EDIT BELOW HERE
 
@@ -12,14 +104,17 @@ function setup() {
   document.getElementById("stop").addEventListener("click", () => {
     pauseAlarm();
   });
+
 }
 
 function playAlarm() {
   audio.play();
+
 }
 
 function pauseAlarm() {
   audio.pause();
+
 }
 
 window.onload = setup;
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
@@ -13,3 +13,17 @@
 h1 {
   text-align: center;
 }
+/* Add the advanced task that make the screen flashing */
+.flash {
+  animation: flash-bg 1s infinite alternate;
+}
+
+@keyframes flash-bg {
+  from {
+    background-color: white;
+  }
+
+  to {
+    background-color: red;
+  }
+}