updated variable names and amended code and added comments

Author: mshayriyesaricicek

Sprint-3/alarmclock/alarmclock.js

@@ -1,69 +1,69 @@
-function setAlarm() {}
+
 // Only define Audio if it doesn't exist (Node environment)
-if (typeof Audio === "undefined") {
-  global.Audio = class {
-    constructor(src) {
-      this.src = src;
+if (typeof Audio === "undefined") {  // In a Node define a mock Audio class to prevent errors when calling play() and pause()
+  global.Audio = class {  // Mock Audio class
+    constructor(src) { // Takes a source for the audio file, but we won't load audio in this mock
+      this.src = src;  // stores the source (unused in the mock)
     }
-    play() {}
-    pause() {}
+    play() {}  // no-op in this mock
+    pause() {}  // no-op in this mock
   };
 }
 
-let intervalId;
+let countdownIntervalId;   //stores timer ID so we can clear it when needed
 
-const formatTime = (s) => {
-  const mins = Math.floor(s / 60);
-  const secs = s % 60;
-  return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+const formatTime = (seconds) => {  // takes a number of seconds and formats it into a string in the format "MM:SS"
+  const minutes = Math.floor(seconds / 60);  // calculates whole minutes
+  const remainingSeconds = seconds % 60;  // calculates remaining seconds
+  return `${String(minutes).padStart(2, "0")}:${String(remainingSeconds).padStart(2, "0")}`;  // formats as MM:SS
 };
 
-function setAlarm() {
-  const input = document.getElementById("alarmSet");
-  const timer = document.getElementById("timeRemaining");
-
-  const seconds = parseInt(input.value);
-  if (isNaN(seconds) || seconds < 0) return;
+function setAlarm() {  // called  "Set" button is clicked
+  const alarmInput = document.getElementById("alarmSet");  // gets input for seconds
+  const timerDisplay = document.getElementById("timeRemaining");  // gets element showing remaining time
 
-  let remaining = seconds;
+  const seconds = parseInt(alarmInput.value, 10); // converts input value to integer 
+  if (isNaN(seconds) || seconds < 0) return;  // if ignore invalid or negative input
 
-  // DO NOT EDIT BELOW HERE
-  timer.textContent = `Time Remaining: ${formatTime(remaining)}`;
+  let remainingSeconds = seconds; // initializes countdown
 
-  if (intervalId) clearInterval(intervalId);
+  timerDisplay.textContent = `Time Remaining: ${formatTime(remainingSeconds)}`;  // shows initial time
 
-  intervalId = setInterval(() => {
-    remaining--;
+  if (countdownIntervalId) clearInterval(countdownIntervalId); // stops previous countdown to prevent multiple timers from running simultaneously
 
-    timer.textContent = `Time Remaining: ${formatTime(remaining)}`;
+  countdownIntervalId = setInterval(() => { // timer runs every second
+    remainingSeconds--;  // decrements remaining time by 1 second
 
-    if (remaining <= 0) {
-      clearInterval(intervalId);
-      playAlarm();
+    if (remainingSeconds <= 0) {  // when time runs out, clear the timer and play the alarm sound
+      clearInterval(countdownIntervalId);  // stops the countdown
+      timerDisplay.textContent = "Time Remaining: 00:00"; // shows zero time
+      playAlarm();  // plays alarm sound
+      return; // prevents further execution
     }
-  }, 1000);
+    timerDisplay.textContent = `Time Remaining: ${formatTime(remainingSeconds)}`; // updates countdown display
+  }, 1000);  // repeats every second
 }
 
 // DO NOT EDIT BELOW HERE
 
 var audio = new Audio("alarmsound.mp3");
 
-function setup() {
-  document.getElementById("set").addEventListener("click", () => {
-    setAlarm();
+function setup() {  // This function sets up event listeners for the "Set" and "Stop" buttons when the page loads
+  document.getElementById("set").addEventListener("click", () => { // adds a click event listener to the "Set" button that calls the setAlarm function when clicked
+    setAlarm();  // calls the setAlarm function to start the timer when the "Set" button is clicked
   });
 
-  document.getElementById("stop").addEventListener("click", () => {
-    pauseAlarm();
+  document.getElementById("stop").addEventListener("click", () => {  // adds a click event listener to the "Stop" button that calls the pauseAlarm function when clicked
+    pauseAlarm();  // calls the pauseAlarm function to stop the alarm sound when the "Stop" button is clicked
   });
 }
 
-function playAlarm() {
-  audio.play();
+function playAlarm() {  // This function plays the alarm sound when called
+  audio.play();  // calls the play method on the audio object to start playing the alarm sound
 }
 
-function pauseAlarm() {
-  audio.pause();
+function pauseAlarm() {  // This function pauses the alarm sound when called
+  audio.pause();  // calls the pause method on the audio object to stop playing the alarm sound
 }
 
-window.onload = setup;
+window.onload = setup;  // sets the setup function to run when the window finishes loading, ensuring that event listeners are set up properly

Sprint-3/alarmclock/index.html

@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <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>
+    <title>Alarm clock app</title>
   </head>
   <body>
     <div class="centre">