From 0aa1508965fdca9f7214b5927f3c8828fd22cac4 Mon Sep 17 00:00:00 2001 From: Frankie Date: Sat, 4 Dec 2021 00:49:18 +0800 Subject: [PATCH 1/3] finished wireframe --- index.html | 27 ++++++++++++++++++++++++- styles.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 85 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 4771b50..c838803 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,33 @@ -

Timer!

+

Timer!⏳

+
+
+
+
+
+ 00: + 00: + 00 + :00 +
+
Placeholder
+
+
+
+ + +
+ +
+ + +
+
+
+
diff --git a/styles.css b/styles.css index 04e7110..24c1936 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,62 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;700&display=swap"); +* { + box-sizing: border-box; + margin: 0; + padding: 0; + border: none; +} body { background-color: pink; } + +h1 { + font-family: "Arial"; + font-size: 4em; + margin: 50px; +} + +#container { + display: flex; + height: 90%; +} + +#lap-data { + width: 40%; +} + +#right-side { + display: flex; + flex-direction: column; +} + +#main-timer { + width: 100%; + font-family: "Roboto Mono", monospace; +} + +.timer { + font-size: 6.5em; +} +.miliseconds { + font-size: 5em; +} +#lap-timer { + width: 80%; + font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", + "Lucida Sans", Arial, sans-serif; + font-size: 5em; +} + +#bottom { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 100px; +} + +button { + width: 10vw; + padding: 2em; + margin: 0.5em; +} From 2cec9990d0f9da2621e5e14c14b44ef198cd300a Mon Sep 17 00:00:00 2001 From: Frankie Date: Sat, 4 Dec 2021 01:44:30 +0800 Subject: [PATCH 2/3] finished base --- index.html | 28 ++++++++++++-------- script.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 26 ++++++++++++------- 3 files changed, 110 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index c838803..8ca3502 100644 --- a/index.html +++ b/index.html @@ -9,26 +9,34 @@

Timer!⏳

-
+
+ LAP DATA
+ 11:11:11:11 +
- 00: - 00: - 00 - :00 + 00: + 00: + 00: + 00 +
+
+ 00: + 00: + 00: + 00
-
Placeholder
- - + +
- - + +
diff --git a/script.js b/script.js index e2d0297..9a111b1 100644 --- a/script.js +++ b/script.js @@ -1 +1,76 @@ // Please implement exercise logic here +//### DOM SELECTORS ### +const timerSelector = document.querySelectorAll('.timer') +const actionButtons = document.querySelectorAll('.btn') + +// GLOBAL VARIABLES +let counter + +// ### HELPER FUNCTIONS ### +const getHours = () => { + counter = parseInt(timerSelector[0].innerHTML) + counter += 1 + timerSelector[0].innerHTML = counter < 10 ? `0${counter}:` : `${counter}:` +} + +const getMinutes = () => { + counter = parseInt(timerSelector[1].innerHTML) + counter += 1 + + timerSelector[1].innerHTML = counter < 10 ? `0${counter}:` : `${counter}:` + + if (counter == 60) { + timerSelector[1].innerHTML = '00:'; + getHours() + } +} + +const getSeconds = () => { + counter= parseInt(timerSelector[2].innerHTML) + counter += 1 + + timerSelector[2].innerHTML = counter < 10 ? `0${counter}` : counter + + if (counter == 60) { + timerSelector[2].innerHTML = '00'; + getMinutes() + } +} + +// ### MAIN FUNCTION ### +const startTimer = () => { + const interval = setInterval(() => { + counter = parseInt(timerSelector[3].innerHTML) + counter += 1 + + timerSelector[3].innerHTML = counter < 10 ? `0${counter}` : counter + + if (counter == 100) { + timerSelector[3].innerHTML = '00' + getSeconds() + } + + }, 10) + + // ### EVENT LISTENERS + actionButtons[1].onclick = () => { + clearInterval(interval) + } + + actionButtons[0].onclick =() => { + clearInterval(interval) + startTimer() + } + + actionButtons[3].onclick =() => { + for (let i = 0; i< timerSelector.length; i +=1) { + clearInterval(interval) + timerSelector[i].innerHTML = "00" + } + } +} + +actionButtons[0].onclick =() => { + startTimer() + } + diff --git a/styles.css b/styles.css index 24c1936..3b32210 100644 --- a/styles.css +++ b/styles.css @@ -12,7 +12,8 @@ body { h1 { font-family: "Arial"; font-size: 4em; - margin: 50px; + margin-top: 50px; + margin-left: 50px; } #container { @@ -22,6 +23,8 @@ h1 { #lap-data { width: 40%; + padding: 0 50px; + margin-top: 40px; } #right-side { @@ -32,19 +35,24 @@ h1 { #main-timer { width: 100%; font-family: "Roboto Mono", monospace; + font-size: 32px; } .timer { - font-size: 6.5em; + font-size: 6.5rem; } -.miliseconds { - font-size: 5em; +.timer.miliseconds { + font-size: 5rem; } -#lap-timer { - width: 80%; - font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", - "Lucida Sans", Arial, sans-serif; - font-size: 5em; + +.timer-lap { + width: 100%; + font-family: "Roboto Mono", monospace; + font-size: 4em; +} + +.timer-lap.miliseconds { + font-size: 2.5em; } #bottom { From a1ef652587d7bd477ed07a7c527d8b0c7a958904 Mon Sep 17 00:00:00 2001 From: Frankie Date: Sat, 4 Dec 2021 12:19:01 +0800 Subject: [PATCH 3/3] added lap functionalities but still has bugs --- index.html | 19 ++----- script.js | 146 ++++++++++++++++++++++++++++++++++++----------------- styles.css | 20 ++------ 3 files changed, 107 insertions(+), 78 deletions(-) diff --git a/index.html b/index.html index 8ca3502..e6080df 100644 --- a/index.html +++ b/index.html @@ -9,24 +9,11 @@

Timer!⏳

-
- LAP DATA
- 11:11:11:11 -
+
-
- 00: - 00: - 00: - 00 -
-
- 00: - 00: - 00: - 00 -
+
00:00:00:00
+
00:00:00:00
diff --git a/script.js b/script.js index 9a111b1..5891e1d 100644 --- a/script.js +++ b/script.js @@ -1,58 +1,77 @@ // Please implement exercise logic here //### DOM SELECTORS ### -const timerSelector = document.querySelectorAll('.timer') +const mainTimer = document.getElementById('main-timer') +const lapTimer = document.getElementById('lap-timer') const actionButtons = document.querySelectorAll('.btn') +const container = document.getElementById('lap-data') + +const laps = document.createElement('table'); +laps.style.display = 'none'; +container.appendChild(laps); +const row = laps.insertRow(); +const headings = ['Lap', 'Lap times', 'Overall time']; +for (let j = 0; j < headings.length; j += 1) { + const cell = row.insertCell(); + cell.appendChild(document.createTextNode(headings[j])); + cell.style.fontWeight = 'bold'; +} // GLOBAL VARIABLES let counter - -// ### HELPER FUNCTIONS ### -const getHours = () => { - counter = parseInt(timerSelector[0].innerHTML) - counter += 1 - timerSelector[0].innerHTML = counter < 10 ? `0${counter}:` : `${counter}:` -} - -const getMinutes = () => { - counter = parseInt(timerSelector[1].innerHTML) - counter += 1 - - timerSelector[1].innerHTML = counter < 10 ? `0${counter}:` : `${counter}:` - - if (counter == 60) { - timerSelector[1].innerHTML = '00:'; - getHours() - } -} - -const getSeconds = () => { - counter= parseInt(timerSelector[2].innerHTML) - counter += 1 - - timerSelector[2].innerHTML = counter < 10 ? `0${counter}` : counter - - if (counter == 60) { - timerSelector[2].innerHTML = '00'; - getMinutes() - } +let mainTime = [0,0,0,0] +let lapTime = [0,0,0,0] +let noOfLaps = 0 + +// ### HELPER FUNCTION ### +const formatClock = (timeArray) => { + let [hours, minutes, seconds, miliseconds] = timeArray.map(String) + hours = hours.length > 1 ? hours : `0${hours}` + minutes = minutes.length > 1 ? minutes : `0${minutes}` + seconds = seconds.length > 1 ? seconds : `0${seconds}` + miliseconds = miliseconds.length > 1 ? miliseconds : `0${miliseconds}` + + return `${hours}:${minutes}:${seconds}:${miliseconds}` } // ### MAIN FUNCTION ### const startTimer = () => { const interval = setInterval(() => { - counter = parseInt(timerSelector[3].innerHTML) - counter += 1 - - timerSelector[3].innerHTML = counter < 10 ? `0${counter}` : counter - - if (counter == 100) { - timerSelector[3].innerHTML = '00' - getSeconds() + mainTime[3] += 1; + if (mainTime[3] > 99) { + mainTime[2] += 1; + mainTime[3] = 0; + } + if (mainTime[2] > 59) { + mainTime[1] += 1; + mainTime[2] = 0; + } + if (mainTime[1] > 59) { + mainTime[0] += 1; + mainTime[1] = 0; + } + + mainTimer.innerText = formatClock(mainTime) + + if (noOfLaps > 0) { + lapTime[3] += 1; + if (lapTime[3] > 99) { + lapTime[2] += 1; + lapTime[3] = 0; + } + if (lapTime[2] > 59) { + lapTime[1] += 1; + lapTime[2] = 0; + } + if (lapTime[1] > 59) { + lapTime[0] += 1; + lapTime[1] = 0; + } + + lapTimer.innerText = formatClock(lapTime) } - }, 10) - // ### EVENT LISTENERS + // EVENT LISTENERS actionButtons[1].onclick = () => { clearInterval(interval) } @@ -63,14 +82,47 @@ const startTimer = () => { } actionButtons[3].onclick =() => { - for (let i = 0; i< timerSelector.length; i +=1) { - clearInterval(interval) - timerSelector[i].innerHTML = "00" - } + clearInterval(interval) + mainTime = [0,0,0,0] + lapTime = [0,0,0,0] + noOfLaps = 0 + container.innerText = '' + mainTimer.innerText = '00:00:00:00' + lapTimer.innerText = '00:00:00:00' } } -actionButtons[0].onclick =() => { - startTimer() +const newLap = () => { + noOfLaps += 1 + const newRow = laps.insertRow(); + const rowData = [noOfLaps]; + + if (noOfLaps == 1) { + rowData.push(mainTimer.innerText); + rowData.push(mainTimer.innerText); + lapTimer.style.display='block' + laps.style.display = 'table' + } else { + rowData.push(lapTimer.innerText) + rowData.push(mainTimer.innerText) + lapClock = [0, 0, 0] + lapTimer.innerText = '00:00:00' + } + + for (let i = 0; i < headings.length; i += 1) { + const newCell = newRow.insertCell(); + newCell.appendChild(document.createTextNode(rowData[i])); } +} + + +actionButtons[0].onclick =() => { + startTimer() +} + +actionButtons[2].onclick =() => { + lapClock = [0, 0, 0] + newLap() + console.log(noOfLaps) +} diff --git a/styles.css b/styles.css index 3b32210..948096f 100644 --- a/styles.css +++ b/styles.css @@ -23,7 +23,7 @@ h1 { #lap-data { width: 40%; - padding: 0 50px; + padding: 0 50px 0 20px; margin-top: 40px; } @@ -35,24 +35,14 @@ h1 { #main-timer { width: 100%; font-family: "Roboto Mono", monospace; - font-size: 32px; + font-size: 6rem; } -.timer { - font-size: 6.5rem; -} -.timer.miliseconds { - font-size: 5rem; -} - -.timer-lap { +#lap-timer { width: 100%; font-family: "Roboto Mono", monospace; - font-size: 4em; -} - -.timer-lap.miliseconds { - font-size: 2.5em; + font-size: 5rem; + display: none; } #bottom {