CodeYourFuture · Richiealx · Mar 21, 2026 · Mar 21, 2026 · Mar 21, 2026 · Mar 30, 2026
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,10 +1,126 @@
-function setAlarm() {}
+// Store the current countdown value in seconds
+let remainingSeconds = 0;
+
+// Store the timer ID so an existing timer can be cleared
+let countdownTimerId = null;
+
+/**
+ * Converts a number of seconds into mm:ss format.
+ * Example:
+ * 19 -> 00:19
+ * 119 -> 01:59
+ */
+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 `${formattedMinutes}:${formattedSeconds}`;
+}
+
+/**
+ * Updates the heading text with the current remaining time.
+ */
+function updateHeading() {
+  const heading = document.getElementById("timeRemaining");
+  heading.innerText = `Time Remaining: ${formatTime(remainingSeconds)}`;
+}
+
+/**
+ * Updates the page background depending on whether the alarm has finished.
+ * If true is passed in, the alarm-finished class is added.
+ * If false is passed in, the alarm-finished class is removed.
+ */
+function setAlarmFinishedState(isFinished) {
+  document.body.classList.toggle("alarm-finished", isFinished);
+}
+
+/**
+ * Stops any existing countdown timer.
+ */
+function stopCountdown() {
+  if (countdownTimerId !== null) {
+    clearInterval(countdownTimerId);
+    countdownTimerId = null;
+  }
+}
+
+/**
+ * Resets all application state before starting a new alarm.
+ * This clears any existing timer, stops any playing sound,
+ * and restores the default background state.
+ */
+function resetAll() {
+  stopCountdown();
+  pauseAlarm();
+  setAlarmFinishedState(false);
+}
+
+/**
+ * Handles what should happen when the timer reaches zero.
+ */
+function finishAlarm() {
+  stopCountdown();
+  setAlarmFinishedState(true);
+  playAlarm();
+}
+
+/**
+ * Starts the countdown timer and updates the heading every second.
+ */
+function startCountdown() {
+  countdownTimerId = setInterval(() => {
+    if (remainingSeconds > 0) {
+      remainingSeconds -= 1;
+      updateHeading();
+    }
+
+    if (remainingSeconds === 0) {
+      finishAlarm();
+    }
+  }, 1000);
+}
+
+/**
+ * Reads the value from the input, updates the heading,
+ * resets application state, and starts the countdown.
+ */
+function setAlarm() {
+  const input = document.getElementById("alarmSet");
+  const inputValue = Number(input.value);
+
+  // Reset application state as soon as the button is clicked
+  resetAll();
+
+  // Prevent invalid negative or empty values
+  if (Number.isNaN(inputValue) || inputValue < 0) {
+    return;
+  }
+
+  // Store the new number of seconds and update the heading immediately
+  remainingSeconds = Math.floor(inputValue);
+  updateHeading();
+
+  // If the user sets the alarm to 0, finish immediately
+  if (remainingSeconds === 0) {
+    finishAlarm();
+    return;
+  }
+
+  // Start counting down every second
+  startCountdown();
+}
 
 // DO NOT EDIT BELOW HERE
 
 var audio = new Audio("alarmsound.mp3");
 
 function setup() {
+  // Make the alarm loop continuously until stopped
+  audio.loop = true;
+
   document.getElementById("set").addEventListener("click", () => {
     setAlarm();
   });

diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -1,20 +1,23 @@
-<!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</title>
   </head>
   <body>
     <div class="centre">
       <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <label for="alarmSet">Set time to:</label>
-      <input id="alarmSet" type="number" />
+      <input id="alarmSet" type="number" min="0" />
 
-      <button id="set" type="button">Set Alarm</button>
-      <button id="stop" type="button">Stop Alarm</button>
+      <div class="button-row">
+        <button id="set" type="button">Set Alarm</button>
+        <button id="stop" type="button">Stop Alarm</button>
+      </div>
     </div>
+
     <script src="alarmclock.js"></script>
   </body>
 </html>
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
@@ -1,15 +1,65 @@
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: #f4f4f4;
+  transition: background-color 0.3s ease;
+}
+
+/* Background changes when the alarm finishes */
+body.alarm-finished {
+  background-color: #ffdddd;
+}
+
 .centre {
   position: fixed;
   top: 50%;
   left: 50%;
-  -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
+  width: min(90%, 420px);
+  text-align: center;
+  background-color: white;
+  padding: 24px;
+  border-radius: 12px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
+}
+
+h1 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: bold;
 }
 
 #alarmSet {
-  margin: 20px;
+  width: 100%;
+  margin: 0 0 20px 0;
+  padding: 12px;
+  font-size: 16px;
+  border-radius: 8px;
+  border: 1px solid #cccccc;
+  box-sizing: border-box;
 }
 
-h1 {
-  text-align: center;
+.button-row {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+button {
+  padding: 12px 18px;
+  font-size: 16px;
+  border: none;
+  border-radius: 8px;
+  background-color: #0b5ed7;
+  color: white;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #094db1;
 }