CodeYourFuture · Tarawally · Dec 12, 2025 · Dec 12, 2025 · Dec 12, 2025 · Dec 12, 2025
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,92 @@
-function setAlarm() {}
+const titleElement = document.getElementById("timeRemaining");
+
+const ONE_SECOND_IN_MILLISECONDS = 1000;
+
+let timeRemainingInSeconds = 0;
+let alarmTimerIdentifier = null;
+
+/**
+ * Formats seconds into "MM:SS".
+ */
+function formatTime(totalSeconds) {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+
+  const formattedMinutes = String(minutes).padStart(2, '0');
+  const formattedSeconds = String(seconds).padStart(2, '0');
+
+  return `Time Remaining: ${formattedMinutes}:${formattedSeconds}`;
+}
+
+/**
+ * Displays the remaining time.
+ */
+function displayTime() {
+  titleElement.innerText = formatTime(timeRemainingInSeconds);
+}
+
+/**
+ * Updates the display and checks if the alarm should sound.
+ */
+function updateTime() {
+  timeRemainingInSeconds = timeRemainingInSeconds - 1;
+  displayTime();
+
+  if (timeRemainingInSeconds === 0) {
+    playAlarm();
+    document.body.classList.add("flash");
+    clearInterval(alarmTimerIdentifier);
+    alarmTimerIdentifier = null;
+  }
+}
+
+/**
+ * Initialises the alarm countdown.
+ */
+function setAlarm() {
+  if (alarmTimerIdentifier) {
+    clearInterval(alarmTimerIdentifier);
+    document.body.classList.remove("flash");
+  }
+
+  const timeInput = document.getElementById("alarmSet");
+  const startingTime = parseInt(timeInput.value, 10);
+
+  if (isNaN(startingTime)) {
+    return;
+  }
+
+  if (startingTime < 0) {
+    return;
+  }
+
+  timeRemainingInSeconds = startingTime;
+
+  // Initialise the audio context to enable autoplay.
+  audio.play();
+  audio.pause();
+
+  displayTime();
+
+  // Handle zero-second edge case
+  if (timeRemainingInSeconds === 0) {
+    playAlarm();
+    document.body.classList.add("flash");
+    return;
+  }
+
+  alarmTimerIdentifier = setInterval(() => {
+    updateTime();
+  }, ONE_SECOND_IN_MILLISECONDS);
+}
+
+// Add a listener to stop the flashing effect without modifying the protected pauseAlarm function below.
+const stopButton = document.getElementById("stop");
+if (stopButton) {
+  stopButton.addEventListener("click", () => {
+    document.body.classList.remove("flash");
+  });
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -1,19 +1,24 @@
-<!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">
+    <div class="centre container">
       <h1 id="timeRemaining">Time Remaining: 00:00</h1>
-      <label for="alarmSet">Set time to:</label>
-      <input id="alarmSet" type="number" />
 
-      <button id="set" type="button">Set Alarm</button>
-      <button id="stop" type="button">Stop Alarm</button>
+      <div class="input-group">
+        <label for="alarmSet">Set time (seconds):</label>
+        <input id="alarmSet" type="number" min="0" placeholder="e.g. 10" />
+      </div>
+
+      <div class="controls">
+        <button id="set" type="button">Set Alarm</button>
+        <button id="stop" type="button">Stop Alarm</button>
+      </div>
     </div>
     <script src="alarmclock.js"></script>
   </body>

diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
@@ -1,15 +1,97 @@
-.centre {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
+body {
+  background-color: #f0f0f0;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
 }
 
-#alarmSet {
-  margin: 20px;
+.flash {
+  animation: flash-animation 1s infinite;
+}
+
+/* Flashing background colour animation */
+@keyframes flash-animation {
+  0% {
+    background-color: #ffcccc;
+  }
+  50% {
+    background-color: #ff0000;
+  }
+  100% {
+    background-color: #ffcccc;
+  }
+}
+
+.container {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 30px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  max-width: 500px;
+  width: 90%;
 }
 
 h1 {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.input-group {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 1.1rem;
+}
+
+input {
+  padding: 10px;
+  font-size: 1.2rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100px;
   text-align: center;
 }
+
+input:focus {
+  outline: none;
+  border-color: #007bff;
+}
+
+.controls {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+
+button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+button#stop {
+  background-color: #dc3545;
+}
+
+button#stop:hover {
+  background-color: #a71d2a;
+}