attempted to create timer

style.css

@@ -1,18 +1,33 @@
 @import url(http://fonts.googleapis.com/css?family=Josefin+Slab);
 
+#timer {
+  color: #FFF;
+  background: -webkit-radial-gradient(#4479BA, #9b9fa5);
+  border: 1px solid black;
+  box-shadow: 2px 2px black;
+  border-radius: 10px;
+  margin: 20px;
+  padding: 15px 25px;
+  font-family: Josefin Slab;
+}
+
 .controls {
   margin: 50px;
   text-align: center;
 }
 
+body {
+  background: -webkit-linear-gradient(#FFF, #9b9fa5);
+}
+
 h1 {
   font-family: Josefin Slab;
   font-size: 72px;
   text-align: center;
 }
 
 button {
-  background: #4479BA;
+  background: -webkit-radial-gradient(#4479BA, #9b9fa5);
   color: #FFF;
   font-family: Josefin Slab;
   font-size: 50px;
@@ -27,4 +42,3 @@ button {
 button:hover{
     background: #356094;
 }
-

timers.js

@@ -1,4 +1,39 @@
+$(function() {
 
+  var second;
+  var intervalId;
+  var count=0;
+  var timerRunning = false;
 
+  function updateTime(){
+    if (timerRunning === false) {
+      //this code forces the program to pause momentarily at 0 before starting count
+      $('#timer').text('Time Elapsed: ' + count);
+      //here we start counting up
+      second = setInterval(function(){
+        $('#timer').text('Time Elapsed: '+ count);
+        count++
+      }, 1000);
+      //while timerRunning = true, we can't updateTime again
+      timerRunning = true;
+    };
+  };
 
+  function pauseTime() {
+    clearInterval(second);
+    timerRunning = false;
+  };
 
+  function resetTime() {
+    pauseTime();
+    count = 0;
+    timerRunning = false;
+    $('#timer').text('Time Elapsed: ' + count)
+  };
+
+  $('#reset').on('click', resetTime);
+
+  $('#start').on('click', updateTime);
+
+  $('#pause').on('click', pauseTime);
+});