timer complete

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>

style.css

@@ -1,20 +1,29 @@
-@import url(http://fonts.googleapis.com/css?family=Josefin+Slab);
+@import url(https://fonts.googleapis.com/css?family=Arya);
 
 .controls {
   margin: 50px;
   text-align: center;
 }
 
 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;
 }
-

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;
+    }
+
+  }
+
+
+}