diff --git a/index.html b/index.html index 4771b50..e6080df 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,28 @@ -

Timer!

+

Timer!⏳

+
+
+
+
+
00:00:00:00
+
00:00:00:00
+
+
+
+ + +
+ +
+ + +
+
+
+
diff --git a/script.js b/script.js index e2d0297..5891e1d 100644 --- a/script.js +++ b/script.js @@ -1 +1,128 @@ // Please implement exercise logic here +//### DOM SELECTORS ### +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 +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(() => { + 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 + actionButtons[1].onclick = () => { + clearInterval(interval) + } + + actionButtons[0].onclick =() => { + clearInterval(interval) + startTimer() + } + + actionButtons[3].onclick =() => { + 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' + } +} + +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 04e7110..948096f 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,60 @@ +@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-top: 50px; + margin-left: 50px; +} + +#container { + display: flex; + height: 90%; +} + +#lap-data { + width: 40%; + padding: 0 50px 0 20px; + margin-top: 40px; +} + +#right-side { + display: flex; + flex-direction: column; +} + +#main-timer { + width: 100%; + font-family: "Roboto Mono", monospace; + font-size: 6rem; +} + +#lap-timer { + width: 100%; + font-family: "Roboto Mono", monospace; + font-size: 5rem; + display: none; +} + +#bottom { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 100px; +} + +button { + width: 10vw; + padding: 2em; + margin: 0.5em; +}