From eb3b91c73255d162366fc535f22d7512b5873c50 Mon Sep 17 00:00:00 2001
From: Nicole Zarrilli <nicole.zarrilli@uconn.edu>
Date: Thu, 28 Mar 2024 21:33:08 -0400
Subject: [PATCH] Stopwatch final

---
 week-10/stopwatch.html | 53 +++++++++++++++++++++---------------------
 1 file changed, 27 insertions(+), 26 deletions(-)
diff --git a/week-10/stopwatch.html b/week-10/stopwatch.html
index b439179..e0fcbd9 100644
--- 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>
