uploaded files

pcm20001 · Mar 31, 2024 · cc222b5 · cc222b5
1 parent 4262b86
commit cc222b5
Showing 1 changed file with 68 additions and 0 deletions.
diff --git a/week-10/index.html b/week-10/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <section>
+        <h1>Stop Watch</h1>
+        <span class="digit" id="minutes">00</span>
+        <span class="digit" id="seconds">00</span>
+
+
+    <button id="start">Start</button>
+    <button id="stop">Stop</button>
+    <button id="reset">Reset</button>
+</section>
+<script>
+            //define html buttons using queryselector 
+    let start = document.querySelector("#start");
+    let stop = document.querySelector("#stop");
+    let reset = document.querySelector("#reset");
+
+    let seconds = 0;
+    let minutes = 0;
+    let timer;
+
+    //define timer, runs every second 
+    function updateDisplay() {
+        seconds++;
+        if (seconds === 60) {
+            minutes++;
+            seconds = 0;
+        }
+        let minString = minutes < 10 ? "0" + minutes : minutes;
+        let secString = seconds < 10 ? "0" + seconds : seconds;
+        document.getElementById("minutes").innerHTML = minString;
+        document.getElementById("seconds").innerHTML = secString;
+    }
+
+     //start timer, on click add to timer
+    function startTimer() {
+        timer = setInterval(updateDisplay, 1000);
+    }
+
+         //add event listener to start timer when clicked 
+    start.addEventListener("click", startTimer);
+
+     // stop timer 
+    function stopTimer() {
+        clearInterval(timer);
+    }
+    stop.addEventListener("click", stopTimer);
+
+   // reset function, resets timer back to 0 
+    function resetTimer() {
+        clearInterval(timer);
+        seconds = 0;
+        minutes = 0;
+        document.getElementById("minutes").innerHTML = "00";
+        document.getElementById("seconds").innerHTML = "00";
+    }
+    reset.addEventListener("click", resetTimer);
+</script>
+
+</body>
+</html>