I refactored the functionality of displaying the alarm clock with the raised Qs

Author: Ebrahim-Moqbel

Sprint-3/alarmclock/alarmclock.js

@@ -1,33 +1,53 @@
 let intervalId = null;
 let totalSeconds = 0;
+const input = document.getElementById("alarmSet");
+const timeRemaining = document.getElementById("timeRemaining");
+const message = document.getElementById("message");
 
-function formatTime(seconds){
-  const minutes = Math.floor(seconds/ 60);
+function formatTime(seconds) {
+  const minutes = Math.floor(seconds / 60);
   const secs = seconds % 60;
-  return `${string(minutes).padStart(2,"0")}:${String(secs).padStart(2,"0")}`;
+  return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+}
+function updateDisplay() {
+  timeRemaining.textContent = `Time Remaining: ${formatTime(totalSeconds)}`;
+}
 
+function resetAlarm() {
+  clearInterval(intervalId);
+  intervalId = null;
+  audio.pause();
+  audio.currentTime = 0;
 }
+function getTime() {
+  const time = Number(input.value);
+  if (!(Number.isInteger(time) && time >= 1)) {
+    message.textContent = "Enter a valid number";
+    return null;
+  }
+  return time;
+}
+
 function setAlarm() {
-  // clearing any previous countdown
-  if (intervalId !== null){
-    clearInterval(intervalId)
+  const time = getTime();
+  if (time === null) {
+    return;
   }
-  const input = document.getElementById("alarmSet");
-  totalSeconds = Number(input.value);
 
-  document.getElementById("timeRemaining").textContent = `Time Remaining: ${formatTime(totalSeconds)}`;
+  resetAlarm();
+  totalSeconds = time;
+  updateDisplay();
 
   intervalId = setInterval(() => {
     totalSeconds--;
-    document.getElementById("timeRemaining").textContent = `Time Remaining: ${formatTime(totalSeconds)}`;
+    updateDisplay();
 
     if (totalSeconds <= 0) {
       clearInterval(intervalId);
       intervalId = null;
       playAlarm();
     }
   }, 1000);
-
 }
 
 // DO NOT EDIT BELOW HERE

Sprint-3/alarmclock/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -9,6 +9,7 @@
   <body>
     <div class="centre">
       <h1 id="timeRemaining">Time Remaining: 00:00</h1>
+      <h2 id="message"></h2>
       <label for="alarmSet">Set time to:</label>
       <input id="alarmSet" type="number" />