Stopwatch final

nlz18001 · Mar 29, 2024 · eb3b91c · eb3b91c
1 parent 361f54c
commit eb3b91c
Showing 1 changed file with 27 additions and 26 deletions.
diff --git a/week-10/stopwatch.html b/week-10/stopwatch.html
@@ -48,48 +48,49 @@
 <body>
     <div class="container">
         <h1>Stopwatch</h1>
-        <div id="display">0</div>
+        <div id="display">00:00</div>
         <div class="button">
-            <button id="startBtn">Start</button>
-            <button id="stopBtn">Stop</button>
+            <button id="startStopBtn">Start</button>
             <button id="resetBtn">Reset</button>
         </div>
     </div>
 <script>
-    let timerInterval;
-    let elapsedTime = 0;
+    let timer;
+    let elapsed = 0;
+    let run = false;
     const display = document.getElementById('display');
-    const startBtn = document.getElementById('startBtn');
-    const stopBtn = document.getElementById('stopBtn');
+    const startStopBtn = document.getElementById('startStopBtn');
     const resetBtn = document.getElementById('resetBtn');
 
-    function startTimer() {
-        timerInterval = setInterval(updateDisplay, 1000);
-        startBtn.disabled = true;
-        stopBtn.disabled = false;
-    }
-
-    function stopTimer() {
-        clearInterval(timerInterval);
-        startBtn.disabled = false;
-        stopBtn.disabled = true;
+    function toggleTimer() {
+        if (run) {
+            clearInterval(timer);
+            run = false;
+            startStopBtn.textContent = 'Start';
+        } else {
+            timer = setInterval(updateDisplay, 1000);
+            run = true;
+            startStopBtn.textContent = 'Stop';
+        }
     }
 
     function resetTimer() {
-        clearInterval(timerInterval);
-        elapsedTime = 0;
-        display.textContent = elapsedTime;
-        startBtn.disabled = false;
-        stopBtn.disabled = true;
+        clearInterval(timer);
+        elapsed = 0;
+        updateDisplay();
+        run = false;
+        startStopBtn.textContent = 'Start';
     }
 
     function updateDisplay() {
-        elapsedTime++;
-        display.textContent = elapsedTime;
+        const minutes = Math.floor(elapsed / 60);
+        const remainingSeconds = elapsed % 60;
+        const displayText = `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
+        display.textContent = displayText;
+        elapsed++;
     }
 
-    startBtn.addEventListener('click', startTimer);
-    stopBtn.addEventListener('click', stopTimer);
+    startStopBtn.addEventListener('click', toggleTimer);
     resetBtn.addEventListener('click', resetTimer);
 </script>
 </body>