From 8b9cf4c7d754ae404e24830d575a14cbfe926b25 Mon Sep 17 00:00:00 2001 From: gracethedragon Date: Sun, 16 Jan 2022 11:45:33 -0500 Subject: [PATCH 1/2] updated css and added reset --- index.html | 32 +++++++++++++- package-lock.json | 2 +- script.js | 110 +++++++++++++++++++++++++++++++++++++++++++++- styles.css | 50 ++++++++++++++++++++- 4 files changed, 189 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 4771b50..cfbf34d 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,40 @@ - Timer + stopwatch + + + + -

Timer!

+

stopwatch

+ + + diff --git a/package-lock.json b/package-lock.json index 6a892a0..bf21e0c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "timer-swe1", + "name": "timer-bootcamp", "version": "1.0.0", "lockfileVersion": 1, "requires": true, diff --git a/script.js b/script.js index e2d0297..007cf07 100644 --- a/script.js +++ b/script.js @@ -1 +1,109 @@ -// Please implement exercise logic here + +//create stopwatch face +const stopwatchContainer = document.createElement('div') +stopwatchContainer.id = "stopwatchContainer" +document.body.append(stopwatchContainer) + +//create display +const leftOuter = document.createElement('div') +leftOuter.classList.add('outer') +stopwatchContainer.appendChild(leftOuter) + +const lapTime = document.createElement('span') +lapTime.classList.add('center') +leftOuter.appendChild(lapTime) +lapTime.innerText = 'lap time' + +const rightOuter = document.createElement('div') +rightOuter.classList.add('outer') +stopwatchContainer.appendChild(rightOuter) + +//timer output +const display = document.createElement('div') +display.id = "display" +rightOuter.appendChild(display) + + + +//create buttons +const buttons = document.createElement('div') +buttons.id = "buttons" +rightOuter.appendChild(buttons) + +const topButtons = document.createElement('div') +buttons.appendChild(topButtons) + + +const startButton = document.createElement('button') +startButton.innerText = 'start' +startButton.classList.add("left") +topButtons.appendChild(startButton) + +const stopButton = document.createElement('button') +stopButton.innerText = 'stop' +stopButton.classList.add("right") +topButtons.appendChild(stopButton) + +const bottomButtons = document.createElement('div') +buttons.appendChild(bottomButtons) + +const resetButton = document.createElement('button') +resetButton.innerText = 'reset' +resetButton.classList.add("left") +bottomButtons.appendChild(resetButton) + +const lapButton = document.createElement('button') +lapButton.innerText = 'lap' +lapButton.classList.add("right") +bottomButtons.appendChild(lapButton) + +// //show timer output +// const output = document.createElement('div'); +// output.classList.add("display") +// output.id = 'center' +// document.body.appendChild(output); + +//declare variables +let milliseconds = 1000; +const delayInMilliseconds = 1000; +display.innerText = `00:00:00`; + +const start =()=> { + + // output.innerText = `00:00:00`; + const ref = setInterval(() => { + + + stopButton.addEventListener('click', ()=>clearInterval(ref)) + + + const totalSeconds = Math.floor(milliseconds / 1000); + const totalMinutes = Math.floor((milliseconds/1000)/60) + let hours = Math.floor(totalMinutes/60) + let minutes = totalMinutes - hours * 60; + let seconds = totalSeconds - hours * 60 * 60 - minutes * 60; + + if (seconds < 10) { + seconds = `0${seconds}`; + } + if (minutes < 10) { + minutes = `0${minutes}` + } + if(hours < 10) { + hours = `0${hours}` + } + display.innerText = `${hours}:${minutes}:${seconds} `; + console.log(milliseconds); + + milliseconds += 1000; +}, delayInMilliseconds); +} + + +//add event listeners + +startButton.addEventListener('click', start) +resetButton.addEventListener('click', ()=>window.location.reload()) + +//how to make it reset + diff --git a/styles.css b/styles.css index 04e7110..faea760 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,51 @@ body { - background-color: pink; + background-color: lightsteelblue; + box-sizing: border-box; + text-align: center; + font-size: 30px; + font-family: "Orbitron", sans-serif; +} + +#stopwatchContainer { + display: block; + width: 50%; + margin: auto auto; +} + +div { + text-align: center; + /* position: fixed; */ +} +.outer { + border: 2px solid black; + background-color: lightsteelblue; + height: 200px; + width: 50%; + float: left; + margin: 0 auto; +} + +.left, +.right { + width: 40%; + margin: 5%; +} + +button { + margin: 15%; + border: 2px solid slategrey; + background-color: lightskyblue; +} + +button:hover { + background-color: lightseagreen; + color: white; +} + +#display { + height: 20px; + margin-bottom: 20%; +} +div > div { + box-sizing: border-box; } From 791c163dff7d02e8446f2b1103088c9d68cd952a Mon Sep 17 00:00:00 2001 From: gracethedragon Date: Sun, 16 Jan 2022 23:17:15 -0500 Subject: [PATCH 2/2] updated so that multiple clicks on start does not make timer go faster --- script.js | 183 ++++++++++++++++++++++++++---------------------------- 1 file changed, 89 insertions(+), 94 deletions(-) diff --git a/script.js b/script.js index 007cf07..7bf2f67 100644 --- a/script.js +++ b/script.js @@ -1,61 +1,57 @@ - -//create stopwatch face -const stopwatchContainer = document.createElement('div') -stopwatchContainer.id = "stopwatchContainer" -document.body.append(stopwatchContainer) - -//create display -const leftOuter = document.createElement('div') -leftOuter.classList.add('outer') -stopwatchContainer.appendChild(leftOuter) - -const lapTime = document.createElement('span') -lapTime.classList.add('center') -leftOuter.appendChild(lapTime) -lapTime.innerText = 'lap time' - -const rightOuter = document.createElement('div') -rightOuter.classList.add('outer') -stopwatchContainer.appendChild(rightOuter) - -//timer output -const display = document.createElement('div') -display.id = "display" -rightOuter.appendChild(display) - - - -//create buttons -const buttons = document.createElement('div') -buttons.id = "buttons" -rightOuter.appendChild(buttons) - -const topButtons = document.createElement('div') -buttons.appendChild(topButtons) - - -const startButton = document.createElement('button') -startButton.innerText = 'start' -startButton.classList.add("left") -topButtons.appendChild(startButton) - -const stopButton = document.createElement('button') -stopButton.innerText = 'stop' -stopButton.classList.add("right") -topButtons.appendChild(stopButton) - -const bottomButtons = document.createElement('div') -buttons.appendChild(bottomButtons) - -const resetButton = document.createElement('button') -resetButton.innerText = 'reset' -resetButton.classList.add("left") -bottomButtons.appendChild(resetButton) - -const lapButton = document.createElement('button') -lapButton.innerText = 'lap' -lapButton.classList.add("right") -bottomButtons.appendChild(lapButton) +// create stopwatch face +const stopwatchContainer = document.createElement('div'); +stopwatchContainer.id = 'stopwatchContainer'; +document.body.append(stopwatchContainer); + +// create display +const leftOuter = document.createElement('div'); +leftOuter.classList.add('outer'); +stopwatchContainer.appendChild(leftOuter); + +const lapTime = document.createElement('span'); +lapTime.classList.add('center'); +leftOuter.appendChild(lapTime); +lapTime.innerText = 'lap time'; + +const rightOuter = document.createElement('div'); +rightOuter.classList.add('outer'); +stopwatchContainer.appendChild(rightOuter); + +// timer output +const display = document.createElement('div'); +display.id = 'display'; +rightOuter.appendChild(display); + +// create buttons +const buttons = document.createElement('div'); +buttons.id = 'buttons'; +rightOuter.appendChild(buttons); + +const topButtons = document.createElement('div'); +buttons.appendChild(topButtons); + +const startButton = document.createElement('button'); +startButton.innerText = 'start'; +startButton.classList.add('left'); +topButtons.appendChild(startButton); + +const stopButton = document.createElement('button'); +stopButton.innerText = 'stop'; +stopButton.classList.add('right'); +topButtons.appendChild(stopButton); + +const bottomButtons = document.createElement('div'); +buttons.appendChild(bottomButtons); + +const resetButton = document.createElement('button'); +resetButton.innerText = 'reset'; +resetButton.classList.add('left'); +bottomButtons.appendChild(resetButton); + +const lapButton = document.createElement('button'); +lapButton.innerText = 'lap'; +lapButton.classList.add('right'); +bottomButtons.appendChild(lapButton); // //show timer output // const output = document.createElement('div'); @@ -63,47 +59,46 @@ bottomButtons.appendChild(lapButton) // output.id = 'center' // document.body.appendChild(output); -//declare variables +// declare variables let milliseconds = 1000; const delayInMilliseconds = 1000; -display.innerText = `00:00:00`; - -const start =()=> { - - // output.innerText = `00:00:00`; - const ref = setInterval(() => { - - - stopButton.addEventListener('click', ()=>clearInterval(ref)) +display.innerText = '00:00:00'; +let ref = null; - const totalSeconds = Math.floor(milliseconds / 1000); - const totalMinutes = Math.floor((milliseconds/1000)/60) - let hours = Math.floor(totalMinutes/60) - let minutes = totalMinutes - hours * 60; - let seconds = totalSeconds - hours * 60 * 60 - minutes * 60; - - if (seconds < 10) { - seconds = `0${seconds}`; - } - if (minutes < 10) { - minutes = `0${minutes}` - } - if(hours < 10) { - hours = `0${hours}` +const start = () => { + // output.innerText = `00:00:00`; + if (ref === null) { + ref = setInterval(() => { + stopButton.addEventListener('click', () => { clearInterval(ref); + ref = null; }); + + const totalSeconds = Math.floor(milliseconds / 1000); + const totalMinutes = Math.floor((milliseconds / 1000) / 60); + let hours = Math.floor(totalMinutes / 60); + let minutes = totalMinutes - hours * 60; + let seconds = totalSeconds - hours * 60 * 60 - minutes * 60; + + if (seconds < 10) { + seconds = `0${seconds}`; + } + if (minutes < 10) { + minutes = `0${minutes}`; + } + if (hours < 10) { + hours = `0${hours}`; + } + display.innerText = `${hours}:${minutes}:${seconds} `; + console.log(milliseconds); + + milliseconds += 1000; + }, delayInMilliseconds); } - display.innerText = `${hours}:${minutes}:${seconds} `; - console.log(milliseconds); - - milliseconds += 1000; -}, delayInMilliseconds); -} - - -//add event listeners +}; -startButton.addEventListener('click', start) -resetButton.addEventListener('click', ()=>window.location.reload()) +// add event listeners -//how to make it reset +startButton.addEventListener('click', start); +resetButton.addEventListener('click', () => window.location.reload()); +// how to make it reset