diff --git a/index.html b/index.html index c1129f7..dd40b2d 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ i ♥ js + @@ -14,7 +15,5 @@

Stop Watch

- - diff --git a/style.css b/style.css index 6ddb643..2d5982b 100644 --- a/style.css +++ b/style.css @@ -12,7 +12,7 @@ h1 { } button { - background: #4479BA; + background: lightgreen; color: #FFF; font-family: Josefin Slab; font-size: 50px; @@ -27,4 +27,3 @@ button { button:hover{ background: #356094; } - diff --git a/timers.js b/timers.js index fd40910..528903a 100644 --- a/timers.js +++ b/timers.js @@ -1,4 +1,45 @@ +window.onload = function() { +let timeElapsed = 1; +let timeElapsedDisplay = document.createElement('span'); +let startButton = document.getElementById("start"); +let resetButton = document.getElementById("reset"); +let pauseButton = document.getElementById("pause"); +let timerText = document.getElementById("timer"); +let isStarted = false; +//* When "Start" is clicked, the text "Stop Watch" should be replaced by +// "Time elapsed: 0", and the count should increment every second. +let startTimer = () => { + if(!isStarted){ + intervalID = window.setInterval(function(){ + console.log(timeElapsed); + timerText.innerHTML = "Time elapsed: " + timeElapsed; + timeElapsed++; + isStarted = true; + }, 1000); + } +}; +startButton.addEventListener("click", startTimer); +//* When "Reset" is clicked, the text should return to "Stop Watch" +let resetTimer = () => { + window.clearInterval(intervalID); + timerText.innerHTML = "Stop Watch"; + timeElapsed = 1; + isStarted = false; +}; + +resetButton.addEventListener("click", resetTimer); + + +//* When "Pause" is clicked, the text should say "Time elapsed: 1", +//but stop incrementing. + let pauseTimer = () => { + window.clearInterval(intervalID); + }; + +pauseButton.addEventListener("click", pauseTimer); + +};