added stopwatch

alm17008 · Mar 28, 2020 · 902eaa1e0fb56fb9cade9deee39550accb025e1d · 902eaa1
1 parent f59c43e
commit 902eaa1e0fb56fb9cade9deee39550accb025e1d
Unified Split

Showing with 59 additions and 0 deletions.

+59 −0 week-9/index.html
diff --git a/week-9/index.html b/week-9/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Simple setInterval clock</title>
+    <style>
+      p {
+        font-family: sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <p class="clock">0</p>
+    <button id="start">Start</button>
+    <button id="stop">Stop</button>
+    <button id="reset" disabled>Reset</button>
+    <script>
+        let seconds = 0;
+        let counting = false;
+        let startButton = document.querySelector('#start');
+        let stopButton  = document.querySelector('#stop');
+        let resetButton = document.querySelector('#reset');
+        startButton.addEventListener('click', start);
+        stopButton.addEventListener('click', stop)
+        resetButton.addEventListener('click', reset)
+        let startWatch;
+      function displayTime() {
+        let date = new Date();
+        let time = date.toLocaleTimeString();
+        document.querySelector('.clock').textContent = seconds;
+      }
+      function start() {
+        if (!counting) {
+            startWatch = setInterval(function() {
+                seconds++;
+                document.querySelector('.clock').innerHTML = seconds;
+            }, 1000);
+            counting = true;
+            startButton.disabled = true;
+        }
+      }
+      function stop() {
+        clearInterval(startWatch);
+        counting = false;
+        resetButton.disabled = false;
+        startButton.disabled = false;
+      }
+
+      function reset() {
+          clearInterval(startWatch);
+          counting = false;
+          seconds = 0;
+          document.querySelector('.clock').textContent = seconds;
+          startButton.disabled = false;
+          resetButton.disabled = true;
+      }
+    </script>
+  </body>
+</html>