CodeYourFuture · vmoratti · Aug 5, 2026 · Aug 6, 2026 · Aug 6, 2026 · Aug 6, 2026
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,89 @@
-function setAlarm() {}
+//Given the user has entered a number in the input field
+//When the user clicks the "Set Alarm" button
+//Then the "Time Remaining" title should update to show the entered number in mm:ss format
+
+//Given the alarm is set with a valid time
+//When one second passes
+//Then the "Time Remaining" title should decrement by 1 second
+
+//Given the alarm is set with a time of 00:00
+//When the timer reaches 00:00
+//Then the alarm sound should play continuously
+
+//Given the alarm sound is currently playing
+//When the user clicks the "Stop Alarm" button
+//Then the alarm sound should stop playing
+
+//Given the alarm is set with a time of 00:10
+//When the timer reaches 00:00
+//Then the background colour should change
+//And the alarm sound should play
+
+//Given the user has not set an alarm
+//When the page first loads
+//Then the "Time Remaining" title should show 00:00
+// And no alarm sound should play
+
+// 1. create variable that holds time entered by user
+// 2. create a variable we are counting to
+// 3. convert time to minutes and seconds and store it
+// in variable
+// 4. display the time in the "Time Remaining" title.
+// when "Set alarm" button is clicked.
+// 5. decrement the time by 1 second every second
+// 6. trigger the alarm sound when the time reaches 00:00
+let remainingSeconds;
+let timer;
+const alarmDisplay = document.getElementById("timeRemaining");
+function formatTime(remainingSeconds) {
+  const minutes = Math.floor(remainingSeconds / 60);
+  const paddedMinutes = minutes.toString().padStart(2, "0");
+
+  const seconds = remainingSeconds % 60;
+  const paddedSeconds = seconds.toString().padStart(2, "0");
+
+  return `${paddedMinutes}:${paddedSeconds}`;
+}
+function setAlarm() {
+  //1.this function clears the timer for the first use
+  //2. gets the entered number and stores in in the variable
+  //3. checks for invalid input
+  //4. displays the initial timer in minutes and seconds
+  //5. starts timer
+  clearInterval(timer);
+  resetBackground();
+  remainingSeconds = Number(document.getElementById("alarmSet").value);
+  if (remainingSeconds < 1) {
+    alarmDisplay.textContent = `Enter a valid number of seconds greater than 0`;
+    return pauseAlarm();
+  }
+
+  alarmDisplay.textContent = `Time Remaining: ${formatTime(remainingSeconds)}`;
+  timer = setInterval(updateDisplay, 1000);
+}
+function changeBackground() {
+  document.body.classList.add("alarm-finished");
+}
+function resetBackground() {
+  document.body.classList.remove("alarm-finished");
+}
+
+function updateDisplay() {
+  //this function:
+  //1. when timer reaches zero it stops the timer.
+  //2. it then sounds alarm
+  //3. otherwise it decrements the timer and displays the result.
+  if (remainingSeconds < 1) {
+    clearInterval(timer);
+    changeBackground();
+    return playAlarm();
+  }
+  remainingSeconds = remainingSeconds - 1;
+  alarmDisplay.textContent = `Time Remaining: ${formatTime(remainingSeconds)}`;
+}
+function stopTimer() {
+  clearInterval(timer);
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -4,17 +4,17 @@
     <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>
+    <link rel="icon" href="data:,">
+    <title>Alarm clock app</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" />
-
       <button id="set" type="button">Set Alarm</button>
-      <button id="stop" type="button">Stop Alarm</button>
+      <button id="stop" onclick="stopTimer()" type="button">Stop Alarm</button>
     </div>
-    <script src="alarmclock.js"></script>
+    <script defer src="alarmclock.js"></script> 
   </body>
 </html>
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
@@ -4,12 +4,21 @@
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
+  text-align: center;
+}
+#alarmSet {
+  border: 1px solid #080808;
 }
-
 #alarmSet {
   margin: 20px;
 }
-
 h1 {
   text-align: center;
+  width: 500px;
+  min-height: 75px;
+}
+.alarm-finished {
+  background-color: rgb(237, 59, 59);
+  transition: background-color 3s ease;
 }
+