cleaned and restructured the script.js file, replace the flashing effect with css animation, fixed missing functions and broken format logic

Author: Yonatanteklemariam

Sprint-3/alarmclock/alarmclock.js

@@ -1,97 +1,107 @@
-// This variable will store the interval so we can stop it later
-let flashInterval;
+// This is the countdown number that will go down every second
+let countdownTimer;
 
-// This function makes the background flash red and white
 function startFlashing() {
-  let isRed = false; // keeps track of which color we should show
-
-  flashInterval = setInterval(function () {
-    if (isRed) {
-      document.body.style.backgroundColor = "white";
-    } else {
-      document.body.style.backgroundColor = "red";
-    }
-
-    // Switch the color for next time
-    isRed = !isRed;
-  }, 500); // run every half second
+  document.body.classList.add("flash-background");
 }
 
-// This function stops the flashing and resets the background
 function stopFlashing() {
-  clearInterval(flashInterval); // stop the flashing interval
-  document.body.style.backgroundColor = "white"; // reset background
+  document.body.classList.remove("flash-background");
 }
 
 function setAlarm() {
-  // get the value of the input
-  const input = document.getElementById("alarmSet").value;
+  const rawInput = document.getElementById("alarmSet").value.trim();
 
-  // If nothing was typed, exit the function
-  if (!input) {
+  // Reject empty input
+  if (rawInput === "") {
+    alert("Please enter a time.");
     return;
   }
 
-  let totalSeconds;
+  // 2. Parse input → returns either a number of seconds or null
+  const totalSeconds = parseInput(rawInput);
 
-  // If the user typed something like "2:21"
-  if (input.includes(":")) {
-    // Split into minutes and seconds
-    const parts = input.split(":");
-    const minutes = Number(parts[0]);
-    const seconds = Number(parts[1]);
+  // 3. Reject invalid parsed values
+  if (totalSeconds === null || totalSeconds <= 0) {
+    alert("Please enter a valid positive time.");
+    return;
+  }
 
-    // Convert everything into total seconds
-    totalSeconds = minutes * 60 + seconds;
-  } else {
-    // Otherwise treat the input as normal seconds
-    totalSeconds = Number(input);
+  // 4. Reject extremely large values
+  if (totalSeconds > 36000) {
+    alert("Please enter a time less than 10 hours.");
+    return;
   }
 
-  // This is the countdown number that will go down every second
-  let timeLeft = totalSeconds;
+  stopFlashing();
+  pauseAlarm();
+
+  // 5. If we reach here → input is valid
+  startCountdown(totalSeconds);
+}
+
+function parseInput(rawInput) {
+  if (rawInput.includes(":")) {
+    const [minsStr, secsStr] = rawInput.split(":");
+
+    const mins = Number(minsStr);
+    const secs = Number(secsStr);
+
+    if (
+      Number.isNaN(mins) ||
+      Number.isNaN(secs) ||
+      mins < 0 ||
+      secs < 0 ||
+      secs >= 60
+    ) {
+      return null;
+    }
 
-  // If a previous timer was running, stop it
-  if (window.countdownTimer) {
-    clearInterval(window.countdownTimer);
+    return mins * 60 + secs;
   }
 
-  // A simple helper to turn seconds into MM:SS format
-  function formatTime(seconds) {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
+  const secs = Number(rawInput);
+  return Number.isNaN(secs) ? null : secs;
+}
 
-    // Make sure both numbers always have two digits
-    const paddedMins = String(mins).padStart(2, "0");
-    const paddedSecs = String(secs).padStart(2, "0");
+function startCountdown(totalSeconds) {
+  let timeLeft = totalSeconds;
 
-    return `${paddedMins}:${paddedSecs}`;
+  if (countdownTimer) {
+    clearInterval(countdownTimer);
   }
 
-  // Show the starting time immediately
-  document.getElementById("timeRemaining").innerText =
-    `Time Remaining: ${formatTime(timeLeft)}`;
-
-  // Start the countdown — runs every 1000ms (1 second)
-  window.countdownTimer = setInterval(() => {
-    timeLeft--; // reduce by 1 second
+  updateDisplay(timeLeft);
 
-    // Update the heading each second
-    document.getElementById("timeRemaining").innerText =
-      `Time Remaining: ${formatTime(timeLeft)}`;
+  countdownTimer = setInterval(() => {
+    timeLeft--;
+    updateDisplay(timeLeft);
 
-    // When the timer reaches zero
     if (timeLeft <= 0) {
-      clearInterval(window.countdownTimer); // stop the countdown
-      clearInterval(flashInterval); // stop the flashing if it was running
-      document.getElementById("timeRemaining").innerText =
-        `Time Remaining: 00:00`;
-      playAlarm(); // play the alarm sound
-      startFlashing(); // start flashing the background
+      clearInterval(countdownTimer);
+      playAlarm();
+      startFlashing();
     }
   }, 1000);
 }
 
+// A simple helper to turn seconds into MM:SS format
+function formatTime(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+
+  // Make sure both numbers always have two digits
+  const paddedMins = String(mins).padStart(2, "0");
+  const paddedSecs = String(secs).padStart(2, "0");
+
+  return `${paddedMins}:${paddedSecs}`;
+}
+
+function updateDisplay(seconds) {
+  document.getElementById("timeRemaining").innerText =
+    `Time Remaining: ${formatTime(seconds)}`;
+}
+
 // DO NOT EDIT BELOW HERE
 
 var audio = new Audio("alarmsound.mp3");

Sprint-3/alarmclock/index.html

@@ -1,11 +1,12 @@
 <!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>Alarm Clock</title>
-</head>
+
 <body>
   <div class="centre">
     <h1 id="timeRemaining">Time Remaining: 00:00</h1>
@@ -17,4 +18,5 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
   </div>
   <script src="alarmclock.js"></script>
 </body>
-</html>
+
+</html>

Sprint-3/alarmclock/style.css

@@ -13,3 +13,27 @@
 h1 {
   text-align: center;
 }
+
+/* flashing effect for the alarm app */
+@keyframes colorRipple {
+  0% {
+    background-color: #ffffff;
+  } /* White */
+  25% {
+    background-color: #ff6b6b;
+  } /* Light Coral / Soft Red */
+  50% {
+    background-color: #feca57;
+  } /* Mango / Warm Yellow-Orange */
+  75% {
+    background-color: #48dbfb;
+  } /* Sky Blue / Light Aqua */
+  100% {
+    background-color: #ffffff;
+  } /* White */
+}
+
+/* apply the flashing effect to the body when the alarm is triggered */
+.flash-background {
+  animation: colorRipple 0.8s infinite;
+}