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,83 @@
-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 = 0;
+let minutes = 0;
+let seconds = 0;
+let paddedMinutes = 0;
+let paddedSeconds = 0;
+let timer;
+const alarmDisplay = document.getElementById("timeRemaining");
+function formatTime() {
+  //this function will separate minutes and seconds and add zeros
+  // if minutes or seconds are in single digits.
+  minutes = Math.floor(remainingSeconds / 60);
+  paddedMinutes = minutes.toString().padStart(2, "0");
+  seconds = remainingSeconds % 60;
+  paddedSeconds = seconds.toString().padStart(2, "0");
+}
+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);
+  remainingSeconds = Number(document.getElementById("alarmSet").value);
+  if (remainingSeconds === 0) {
+    return pauseAlarm();
+  } else if (remainingSeconds < 0) {
+    return clearInterval(timer);
+  }
+  formatTime();
+  alarmDisplay.textContent = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`;
+  timer = setInterval(updateDisplay, 1000);
+}
+
+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 === 0) {
+    clearInterval(timer);
+    return playAlarm();
+  }
+  remainingSeconds = remainingSeconds - 1;
+  formatTime();
+  alarmDisplay.textContent = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`;
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -4,7 +4,8 @@
     <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">
@@ -15,6 +16,6 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>
     </div>
-    <script src="alarmclock.js"></script>
+    <script defer src="alarmclock.js"></script> 
   </body>
 </html>