Glasgow | 26-ITP-May | Chan Yat Long | Sprint 3 | Alarm Clock

Sprint-3/alarmclock/alarmclock.js

@@ -1,4 +1,39 @@
-function setAlarm() {}
+function setAlarm() {
+  //change the time remaining and set the remaining time
+  //into the second.
+
+  let alarmInterval;
+  const InputField = document.querySelector("#alarmSet");
+  let timeRemaining = InputField.value;
+
+  function updateDisplay() {
+    const timedisplay = document.querySelector("#timeRemaining");
+    const Minute = Math.floor(timeRemaining / 60);
+    const Second = timeRemaining % 60;
+
+    const formatMinute = String(Minute).padStart(2, "0");
+    const formatSecond = String(Second).padStart(2, "0");
+
+    timedisplay.innerText = `Time Remaining: ${formatMinute}:${formatSecond}`;
+  }
+
+  updateDisplay();
+  //set a variable to count three actions:
+  // count -1;
+  // Show what is the remaining time;
+  // if it goes to zero, beep the sound and stop the counting
+
+  alarmInterval = setInterval(() => {
+    timeRemaining = timeRemaining - 1;
+
+    updateDisplay();
+
+    if (timeRemaining === 0) {
+      playAlarm();
+      clearInterval(alarmInterval);
+    }
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 
@@ -20,6 +55,8 @@ function playAlarm() {
 
 function pauseAlarm() {
   audio.pause();
+
+  clearInterval(alarmInterval);
 }
 
 window.onload = setup;

Sprint-3/alarmclock/alarmclock.test.js

@@ -44,6 +44,7 @@ test("should set heading when button is clicked", () => {
   button.click();
 
   expect(heading).toHaveTextContent("Time Remaining: 00:19");
+
 });
 
 test("should split values over 60 seconds into minutes and seconds", () => {

Sprint-3/alarmclock/index.html

@@ -18,3 +18,9 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
     <script src="alarmclock.js"></script>
   </body>
 </html>
+
+
+
+
+
+