Refactor: improve readability and reuse functions in alarm clock

Author: arunkumarakilan

Sprint-3/alarmclock/alarmclock.js

@@ -1,32 +1,34 @@
+const input = document.querySelector("#alarmSet");
+let timeRemainingEl = document.querySelector("#timeRemaining");
 function setAlarm() {
-  const input = document.querySelector("#alarmSet");
-  let seconds = input.value%60;
-  let minutes = (input.value - seconds)/60;
-  const timeRemaining = document.querySelector("#timeRemaining");
-  timeRemaining.textContent = `Time Remaining: ${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-   givenTime = Number(input.value);
-    clearInterval(timerId);
-    timerId =setInterval(()=>
-   {
+  if (!input.value) {
+    alert("Enter minutes");
+    return;
+  }
+  givenTime = Number(input.value);
+  updateTime();
+  clearInterval(timerId);
+  timerId = setInterval(() => {
     givenTime = givenTime - 1;
     updateTime();
-     if (givenTime === 0) {
-       clearInterval(timerId);
-       playAlarm();
-     } 
+    if (givenTime <= 0) {
+      clearInterval(timerId);
+      playAlarm();
+      return;
+    }
   }, 1000);
-
 }
-  let timerId;
- let givenTime;
-
-function updateTime(){
-  let seconds = givenTime%60;
-  let minutes = (givenTime - seconds)/60; 
-  const remainingTime = document.querySelector("#timeRemaining");
-  remainingTime.textContent = `Time Remaining: ${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`; 
+let timerId;
+let givenTime;
+function formatTime(givenTime) {
+  let seconds = givenTime % 60;
+  let minutes = Math.floor(givenTime / 60);
+  return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
 }
 
+function updateTime() {
+  timeRemainingEl.textContent = `Time Remaining: ${formatTime(givenTime)}`;
+}
 
 // DO NOT EDIT BELOW HERE
 

Sprint-3/alarmclock/index.html

@@ -10,7 +10,7 @@
     <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="1" max="60" required placeholder="Enter minutes" />
 
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>

Sprint-3/alarmclock/style.css

@@ -7,7 +7,11 @@
 }
 
 #alarmSet {
-  margin: 20px;
+  margin: 15px;
+  width: 150px;
+  padding: 2px;
+  font-size: 16px;
+  border-radius: 5px;
 }
 
 h1 {