From 48a3b930cd5031117094f31b0df66390c39ce0db Mon Sep 17 00:00:00 2001
From: myztajay <myztajay@hotmail.com>
Date: Sun, 27 Nov 2016 13:52:45 -0500
Subject: [PATCH] Create Timer, bugs: multiple instances of start time

---
 index.html |  4 ++++
 style.css  | 14 +++++++++-----
 timers.js  | 35 +++++++++++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index c1129f7..ec7d5c0 100644
--- a/index.html
+++ b/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>
diff --git a/style.css b/style.css
index 6ddb643..2dc8498 100644
--- a/style.css
+++ b/style.css
@@ -5,6 +5,11 @@
   text-align: center;
 }
 
+body{
+  background-color: black;
+  color: #2cf221;
+}
+
 h1 {
   font-family: Josefin Slab;
   font-size: 72px;
@@ -12,12 +17,12 @@ h1 {
 }
 
 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;
@@ -25,6 +30,5 @@ button {
 }
 
 button:hover{
-    background: #356094;
+    background: gray;
 }
-
diff --git a/timers.js b/timers.js
index fd40910..d6a98ef 100644
--- a/timers.js
+++ b/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