event handling callback function method changed

Author: zilinskyte

Sprint-3/alarmclock/alarmclock.js

@@ -18,7 +18,6 @@ function updateDisplay() {
   const heading = document.getElementById("timeRemaining");
   const input = document.getElementById("alarmSet");
 
-  // clamp BEFORE formatting
   totalSeconds = Math.max(0, totalSeconds);
   const formatted = formatTime(totalSeconds);
 
@@ -27,7 +26,6 @@ function updateDisplay() {
 }
 
 function incrementTime(amount) {
-  // correctly ADD or SUBTRACT 5 seconds
   totalSeconds = Math.max(0, totalSeconds + amount);
   updateDisplay();
 }
@@ -48,7 +46,7 @@ function setAlarm() {
 
   timer = setInterval(() => {
     totalSeconds--;
-    totalSeconds = Math.max(0, totalSeconds); // clamp again for safety
+    totalSeconds = Math.max(0, totalSeconds);
     updateDisplay();
 
     if (totalSeconds === 0) {
@@ -67,10 +65,10 @@ function stopTimer() {
   audio.pause();
 }
 
-// expose to the browser
-window.incrementTime = incrementTime;
-window.setAlarm = setAlarm;
-window.stopTimer = stopTimer;
+document.getElementById("up").addEventListener("click", () => incrementTime(5));
+document.getElementById("down").addEventListener("click", () => incrementTime(-5));
+document.getElementById("set").addEventListener("click", setAlarm);
+document.getElementById("stop").addEventListener("click", stopTimer);
 
 // DO NOT EDIT BELOW HERE
 var audio = new Audio("alarmsound.mp3");

Sprint-3/alarmclock/index.html

@@ -20,17 +20,17 @@
       />
 
       <div class="increment-buttons">
-        <button onclick="incrementTime(5)">▲ +5</button>
-        <button onclick="incrementTime(-5)">▼ -5</button>
+        <button id="up">▲ +5</button>
+        <button id="down">▼ -5</button>
       </div>
 
-      <button class="set-button" onclick="setAlarm()">SET</button>
+      <button id="set" class="set-button">SET</button>
 
       <h1 id="timeRemaining" class="time-remaining">
         Time Remaining:<br />00:00
       </h1>
 
-      <button class="stop-button" onclick="stopTimer()">STOP</button>
+      <button id="stop" class="stop-button">STOP</button>
     </div>
 
     <script src="alarmclock.js"></script>