fix: validate input numbers to be positive integers only and stop timer from going below 0

Author: XiaoQuark

Sprint-3/alarmclock/alarmclock.js

@@ -8,12 +8,31 @@ function setAlarm() {
     clearInterval(state.timerId);
     state.timerId = null;
   }
+
+  const existingMessage = document.getElementById("error-message");
+  if (existingMessage) {
+    existingMessage.remove();
+  }
+  const displayedTime = document.getElementById("timeRemaining");
   const timeInput = document.getElementById("alarmSet");
+
   state.remainingTime = +timeInput.value;
+  if (state.remainingTime <= 0 || !Number.isInteger(state.remainingTime)) {
+    state.remainingTime = 0;
+    displayedTime.textContent = `Time Remaining: 00:00`;
+    timeInput.value = "";
+
+    const container = document.querySelector(".centre");
+    const errorMessage = document.createElement("p");
+    errorMessage.id = "error-message";
+    errorMessage.textContent = "Please enter a positive whole number";
+    errorMessage.style.color = "red";
+    container.appendChild(errorMessage);
+    return;
+  }
   const formattedTime = formatTime(state.remainingTime);
   timeInput.value = "";
 
-  const displayedTime = document.getElementById("timeRemaining");
   displayedTime.textContent = `Time Remaining: ${formattedTime}`;
 
   state.timerId = setInterval(timer, 1000);
@@ -31,15 +50,20 @@ function formatTime(seconds) {
 
 function timer() {
   const displayedTime = document.getElementById("timeRemaining");
+
   state.remainingTime -= 1;
-  const countingDownTime = formatTime(state.remainingTime);
-  displayedTime.textContent = `Time Remaining: ${countingDownTime}`;
-  if (state.remainingTime === 0) {
+
+  if (state.remainingTime <= 0) {
+    state.remainingTime = 0;
+    displayedTime.textContent = `Time Remaining: 00:00`;
     clearInterval(state.timerId);
     state.timerId = null;
     document.body.style.backgroundColor = "red";
     playAlarm();
+    return;
   }
+  const countingDownTime = formatTime(state.remainingTime);
+  displayedTime.textContent = `Time Remaining: ${countingDownTime}`;
 }
 
 // DO NOT EDIT BELOW HERE