Myztajay Week 02 Day 02 Homework

index.html

@@ -16,5 +16,9 @@ <h1 id="timer">Stop Watch</h1>
   </div>
 
 </body>
+<script
+  src="https://code.jquery.com/jquery-3.1.1.min.js"
+  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+  crossorigin="anonymous"></script>
 <script src="timers.js"></script>
 </html>

style.css

@@ -5,26 +5,30 @@
   text-align: center;
 }
 
+body{
+  background-color: black;
+  color: #2cf221;
+}
+
 h1 {
   font-family: Josefin Slab;
   font-size: 72px;
   text-align: center;
 }
 
 button {
-  background: #4479BA;
-  color: #FFF;
+  background: black;
+  color: #2cf221;
   font-family: Josefin Slab;
   font-size: 50px;
   text-align: center;
-  border: 1px solid black;
+  border: 1px solid #2cf221;
   margin: 20px;
   padding: 15px 25px;
   border-radius: 10px;
   box-shadow: 2px 2px black;
 }
 
 button:hover{
-    background: #356094;
+    background: gray;
 }
-

timers.js

@@ -1,4 +1,39 @@
+$( document ).ready(function(){
+// timer & buttons
+let $timer = $(timer);
+let $reset = $(reset);
+let $start = $(start);
+let $pause = $(pause);
+// timeout variables
+let seconds = 0;
+let timerId;
 
+$reset.on('click', resetTime);
+$start.on('click', updateTime);
+$pause.on('click', pauseTime);
 
+// Function that is called when START is clicked
+function updateTime(){
+  timerId = setInterval(updateSeconds ,1000);
+  // updates seconds variable and updates stopwatch H1
+  function updateSeconds(){
+    seconds += 1;
+    console.log(seconds);
+    $timer.html(seconds);
+  }
+}
 
+// Function that is called when PAUSE is clicked
+function pauseTime(){
+  clearInterval(timerId);
+}
 
+// Funtion CLEARS seconds & interval, also reset "Stop Watch"
+function resetTime(){
+  clearInterval(timerId);
+  seconds = 0;
+  $timer.html("Stop Watch");
+}
+
+
+});//Doucment ready end