From 2f18398a2d1dd7151c19e9dec9d9b48d63050a86 Mon Sep 17 00:00:00 2001 From: Gina Fitzgerald Date: Sun, 27 Nov 2016 20:23:41 -0600 Subject: [PATCH 1/5] attempted to create timer --- index.html | 2 +- style.css | 5 ++++- timers.js | 24 ++++++++++++++++++++++++ 3 files changed, 29 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index c1129f7..adec9b2 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ -

Stop Watch

+

Stop Watch

diff --git a/style.css b/style.css index 6ddb643..6024a6c 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,9 @@ @import url(http://fonts.googleapis.com/css?family=Josefin+Slab); +#counterTime { + display: none; +} + .controls { margin: 50px; text-align: center; @@ -27,4 +31,3 @@ button { button:hover{ background: #356094; } - diff --git a/timers.js b/timers.js index fd40910..2e627e8 100644 --- a/timers.js +++ b/timers.js @@ -1,4 +1,28 @@ +$(function() { + var second = 0; + var intervalId; + $('#reset').on('click', function(event){ + console.log('reset was clicked'); + }); + $('#start').on('click', function(event){ + console.log('start was clicked'); + intervalId = setInterval(function(){ + second++; + }); + //change timer value to counter + $('#timer').text('Time Elapsed: '); + $('#counterTime').val(intervalId).show(); + }); + $('#pause').on('click', function(event){ + console.log('pause was clicked'); + }); + + //reset function + var resetTimer = function(event){ + clearInterval(intervalId); + } +}); From 1e777593ffdd56c51062d3bc31787e2cffaa1227 Mon Sep 17 00:00:00 2001 From: Gina Fitzgerald Date: Mon, 28 Nov 2016 09:23:13 -0600 Subject: [PATCH 2/5] start timer works --- timers.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/timers.js b/timers.js index 2e627e8..2c340b2 100644 --- a/timers.js +++ b/timers.js @@ -1,21 +1,21 @@ $(function() { - var second = 0; + var second; var intervalId; + function updateTime(){ + var count = 0; + second = setInterval(function(){ + $('#timer').text('Time Elapsed: '+ count); + count++ + }, 1000); + }; + $('#reset').on('click', function(event){ console.log('reset was clicked'); }); - $('#start').on('click', function(event){ - console.log('start was clicked'); - intervalId = setInterval(function(){ - second++; - }); - //change timer value to counter - $('#timer').text('Time Elapsed: '); - $('#counterTime').val(intervalId).show(); - }); + $('#start').on('click', updateTime); $('#pause').on('click', function(event){ console.log('pause was clicked'); From 610d8b3d2167c87170d7ea276c900d85ea814805 Mon Sep 17 00:00:00 2001 From: Gina Fitzgerald Date: Mon, 28 Nov 2016 09:42:20 -0600 Subject: [PATCH 3/5] start pause reset buttons display and function --- index.html | 2 +- timers.js | 39 +++++++++++++++++++++++---------------- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index adec9b2..c1129f7 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ -

Stop Watch

+

Stop Watch

diff --git a/timers.js b/timers.js index 2c340b2..27a0128 100644 --- a/timers.js +++ b/timers.js @@ -2,27 +2,34 @@ $(function() { var second; var intervalId; + var count=0; + var timerRunning = false; function updateTime(){ - var count = 0; - second = setInterval(function(){ - $('#timer').text('Time Elapsed: '+ count); - count++ - }, 1000); + if (timerRunning === false) { + second = setInterval(function(){ + $('#timer').text('Time Elapsed: '+ count); + count++ + }, 1000); + timerRunning = true; + }; }; - $('#reset').on('click', function(event){ - console.log('reset was clicked'); - }); + function pauseTime() { + clearInterval(second); + timerRunning = false; + }; - $('#start').on('click', updateTime); + function resetTime() { + pauseTime(); + count = 0; + timerRunning = false; + $('#timer').text('Time Elapsed: ' + count) + }; - $('#pause').on('click', function(event){ - console.log('pause was clicked'); - }); + $('#reset').on('click', resetTime); + + $('#start').on('click', updateTime); - //reset function - var resetTimer = function(event){ - clearInterval(intervalId); - } + $('#pause').on('click', pauseTime); }); From 060f699d51ed0ac10aa4228ef4e014092527ca9e Mon Sep 17 00:00:00 2001 From: Gina Fitzgerald Date: Mon, 28 Nov 2016 09:51:35 -0600 Subject: [PATCH 4/5] added style to counter --- style.css | 10 ++++++++-- timers.js | 4 ++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 6024a6c..36e786b 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,13 @@ @import url(http://fonts.googleapis.com/css?family=Josefin+Slab); -#counterTime { - display: none; +#timer { + background-color: #9b9fa5; + border: 1px solid black; + box-shadow: 2px 2px black; + border-radius: 10px; + margin: 20px; + padding: 15px 25px; + font-family: Josefin Slab; } .controls { diff --git a/timers.js b/timers.js index 27a0128..9cd9ffe 100644 --- a/timers.js +++ b/timers.js @@ -7,10 +7,14 @@ $(function() { 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; }; }; From 87cff1185cc5b12e3b940b6b88c98d0662d70674 Mon Sep 17 00:00:00 2001 From: Gina Fitzgerald Date: Mon, 28 Nov 2016 10:04:03 -0600 Subject: [PATCH 5/5] styled background and buttons --- style.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 36e786b..0363e03 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,8 @@ @import url(http://fonts.googleapis.com/css?family=Josefin+Slab); #timer { - background-color: #9b9fa5; + color: #FFF; + background: -webkit-radial-gradient(#4479BA, #9b9fa5); border: 1px solid black; box-shadow: 2px 2px black; border-radius: 10px; @@ -15,6 +16,10 @@ text-align: center; } +body { + background: -webkit-linear-gradient(#FFF, #9b9fa5); +} + h1 { font-family: Josefin Slab; font-size: 72px; @@ -22,7 +27,7 @@ h1 { } button { - background: #4479BA; + background: -webkit-radial-gradient(#4479BA, #9b9fa5); color: #FFF; font-family: Josefin Slab; font-size: 50px;