From 43f4330dad0e056f7761c0d51e081e96fa74e94e Mon Sep 17 00:00:00 2001
From: Vinh Luu <vluu87@gmail.com>
Date: Sun, 27 Nov 2016 21:56:46 -0600
Subject: [PATCH] timer complete

---
 index.html |  1 +
 style.css  | 22 +++++++++++++++-------
 timers.js  | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index c1129f7..d7379b8 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
 
   <h1 id="timer">Stop Watch</h1>
   <div class="controls">
+    <p><span id="seconds">00</span>:<span id="tens">00</span></p>
     <button id="reset">Reset</button>
     <button id="start">Start</button>
     <button id="pause">Pause</button>
diff --git a/style.css b/style.css
index 6ddb643..338fb6c 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-@import url(http://fonts.googleapis.com/css?family=Josefin+Slab);
+@import url(https://fonts.googleapis.com/css?family=Arya);
 
 .controls {
   margin: 50px;
@@ -6,15 +6,24 @@
 }
 
 h1 {
-  font-family: Josefin Slab;
-  font-size: 72px;
+  font-family: Arya;
+  font-size: 90px;
   text-align: center;
 }
 
+body {
+  background-color: #778899;
+}
+
+span {
+  font-size: 110px;
+  font-family: Arya;
+}
+
 button {
-  background: #4479BA;
+  background: #00a9e4;
   color: #FFF;
-  font-family: Josefin Slab;
+  font-family: Arya;
   font-size: 50px;
   text-align: center;
   border: 1px solid black;
@@ -25,6 +34,5 @@ button {
 }
 
 button:hover{
-    background: #356094;
+    background: #00d9ea;
 }
-
diff --git a/timers.js b/timers.js
index fd40910..5cef35f 100644
--- a/timers.js
+++ b/timers.js
@@ -1,4 +1,57 @@
+window.onload = function () {
 
+  var seconds = 00;
+  var tens = 00;
+  var appendTens = document.getElementById("tens")
+  var appendSeconds = document.getElementById("seconds")
+  var buttonStart = document.getElementById('start');
+  var buttonStop = document.getElementById('pause');
+  var buttonReset = document.getElementById('reset');
+  var Interval ;
 
+  buttonStart.onclick = function() {
 
+     clearInterval(Interval);
+     Interval = setInterval(startTimer, 10);
+  }
 
+    buttonStop.onclick = function() {
+       clearInterval(Interval);
+  }
+
+  buttonReset.onclick = function() {
+     clearInterval(Interval);
+    tens = "00";
+  	seconds = "00";
+    appendTens.innerHTML = tens;
+  	appendSeconds.innerHTML = seconds;
+  }
+
+  function startTimer () {
+    tens++;
+
+    if(tens < 9){
+      appendTens.innerHTML = "0" + tens;
+    }
+
+    if (tens > 9){
+      appendTens.innerHTML = tens;
+
+    }
+
+    if (tens > 99) {
+      console.log("seconds");
+      seconds++;
+      appendSeconds.innerHTML = "0" + seconds;
+      tens = 0;
+      appendTens.innerHTML = "0" + 0;
+    }
+
+    if (seconds > 9){
+      appendSeconds.innerHTML = seconds;
+    }
+
+  }
+
+
+}