From 7b468c3990492d01d86ae17cd4efd22216711817 Mon Sep 17 00:00:00 2001 From: yuntingc Date: Sun, 27 Mar 2022 22:07:38 +0800 Subject: [PATCH 1/4] basic timer done --- index.html | 28 ++++++++ script.js | 203 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 63 ++++++++++++++++- 3 files changed, 293 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 4771b50..f4f6565 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,34 @@

Timer!

+
+
+
+ Lap + Lap Time + Total Time +
+
+
+
+
+ 00 + : + 00 + : + 00 +
+
+ + +
+
+ + +
+
+
+ diff --git a/script.js b/script.js index e2d0297..5e9715a 100644 --- a/script.js +++ b/script.js @@ -1 +1,204 @@ // Please implement exercise logic here + +// ===== GLOBAL VARIABLES ===== +let secondsCounter = 0; +let minutesCounter = 0; +let hoursCounter = 0; +let delayInMilliseconds = 1000; + +let seconds = document.getElementById('seconds'); +let minutes = document.getElementById('minutes'); +let hours = document.getElementById('hours'); + +let lapSeconds = 0; +let lapMinutes = 0; +let lapHours = 0; + +let timer; +let timerStatus; + +let lapCount = 0; + +let lapDetails = document.getElementById('lapDetails'); + + +// ===== HELPER FUNCTIONS ===== + +// display timer as 2 digits if number is 0-9 +const formatNum = (number) => { + if (number < 10) { + return "0" + number; + } else { + return number; + } +} + +const startTimer = () => { + + timer = setInterval( () => { + + //console.log('secondsCounter: ', secondsCounter); + + // at every second, print the status of seconds, minutes, hours + + seconds.innerText = formatNum(secondsCounter); + minutes.innerText = formatNum(minutesCounter); + hours.innerText = formatNum(hoursCounter); + + // when timer starts - for total time + + // second starts + secondsCounter += 1 + + // when seconds hit 60 + if (secondsCounter === 60) { + + // minutes increase by 1, seconds start from 0 + minutesCounter += 1; + secondsCounter = 0; + + // when minutes hit 60, minutes start from 0 + if (minutesCounter === 60) { + hoursCounter += 1; + minutesCounter = 0; + } + } + + // when timer starts - for lap time + + lapSeconds += 1 + + if (lapSeconds === 60) { + lapMinutes += 1; + lapSeconds = 0; + + if (lapMinutes === 60) { + lapHours += 1; + lapMinutes = 0; + } + + } + + }, delayInMilliseconds); +} + +const stopTimer = () => { + + console.log('secondsCounter: ', secondsCounter); + + timerStatus = 'stop'; + clearInterval(timer); + +} + +const resetTimer = () => { + + console.log('secondsCounter: ', secondsCounter); + + clearInterval(timer); + + secondsCounter = 0; + minutesCounter = 0; + hoursCounter = 0; + + lapSeconds = 0; + lapMinutes = 0; + lapHours = 0; + + lapDetails.innerText = ''; + lapCount = 0; + + // if reset button is hit when timer is running, timer will auto start + if (timerStatus === 'start') { + startTimer(); + } + + + // if reset button is hit when timer is not running, timer will display 00:00:00 + if (timerStatus === 'stop') { + + seconds.innerText = formatNum(secondsCounter); + minutes.innerText = formatNum(minutesCounter); + hours.innerText = formatNum(hoursCounter); + + } + +} + +const lapTimer = () => { + + lapCount += 1; + + console.log('lapHours: ', lapHours); + console.log('lapMinutes: ', lapMinutes); + console.log('lapSeconds: ', lapSeconds); + + let currentLapTime = `${formatNum(lapHours)} : ${formatNum(lapMinutes)} : ${formatNum(lapSeconds)}`; + let currentTotalTime = `${formatNum(hoursCounter)} : ${formatNum(minutesCounter)} : ${formatNum(secondsCounter)}`; + + + // create container for each set of data + let lapContainer = document.createElement('p'); + lapContainer.classList.add('lapContainer'); + document.getElementById('lapDetails').appendChild(lapContainer); + + + // create lap, lap time and total time containers + let lap = document.createElement('span'); + let lapTime = document.createElement('span'); + let totalTime = document.createElement('span'); + + lap.classList.add('lap'); + lapTime.classList.add('lapTime'); + totalTime.classList.add('totalTime'); + + // capture lap information to display + lap.innerText = formatNum(lapCount); + lapTime.innerText = currentLapTime; + totalTime.innerText = currentTotalTime; + + + // append containers + lapContainer.appendChild(lap); + lapContainer.appendChild(lapTime); + lapContainer.appendChild(totalTime); + + console.log('lapCount: ', lapCount); + console.log('currentLapTime: ', currentLapTime); + console.log('currentTotalTime: ', currentTotalTime); + + // to reset lap details; + lapSeconds = 0; + lapMinutes = 0; + lapHours = 0; + + +} + + +// add event listener for start button +const startButton = document.getElementById('startButton') +startButton.addEventListener('click', () => { + timerStatus = 'start' + startTimer(); +}) + +// add event listener for stop button +const stopButton = document.getElementById('stopButton') +stopButton.addEventListener('click', () => { + timerStatus = 'stop' + stopTimer(); +}) + +// add event listender for reset button +const resetButton = document.getElementById('resetButton') +resetButton.addEventListener('click', () => { + resetTimer(); +}) + +// add event listener for lap button +const lapButton = document.getElementById('lapButton') +lapButton.addEventListener('click', () => { + lapTimer(); +}) + diff --git a/styles.css b/styles.css index 04e7110..b333d0b 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,64 @@ body { - background-color: pink; + background-color: rgb(184, 225, 252); +} + +.stopwatch { + background-color: rgb(110, 110, 109); + display: inline-block; + padding: 20px; + border-radius: 30px; + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; +} + +.lapData { + background-color: rgb(182, 182, 182); + float: left; + margin: 20px 20px 20px 20px; + height: 20px; +} + +.timeData { + background-color: rgb(182, 182, 182); + font-size: 40px; + font-weight: bold; + float: right; + margin: 20px 20px 20px 20px; + padding: 20px 20px 20px 20px; + text-align: center; +} + +.button { + background-color: white; + margin: 10px; + padding: 10px; + border-radius: 10px; + border: none; + width: 75px; +} + +.lap { + margin: 10px; +} + +.lapTime { + margin: 10px; +} + +.totalTime { + margin: 10px; +} + +.lapTitle { + display: flex; + justify-content: space-between; + font-weight: bold; +} + +.lapDetails { + color: whitesmoke; +} + +.lapContainer { + display: flex; + justify-content: space-between; } From 8caaf1925acb6178639f7b18606596852f662841 Mon Sep 17 00:00:00 2001 From: yuntingc Date: Sun, 27 Mar 2022 22:39:28 +0800 Subject: [PATCH 2/4] display only latest 4 laps --- script.js | 104 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 77 insertions(+), 27 deletions(-) diff --git a/script.js b/script.js index 5e9715a..ce6f626 100644 --- a/script.js +++ b/script.js @@ -18,8 +18,8 @@ let timer; let timerStatus; let lapCount = 0; - let lapDetails = document.getElementById('lapDetails'); +let lapData = []; // ===== HELPER FUNCTIONS ===== @@ -105,15 +105,15 @@ const resetTimer = () => { lapMinutes = 0; lapHours = 0; + lapData = []; lapDetails.innerText = ''; lapCount = 0; - + // if reset button is hit when timer is running, timer will auto start if (timerStatus === 'start') { startTimer(); } - // if reset button is hit when timer is not running, timer will display 00:00:00 if (timerStatus === 'stop') { @@ -127,6 +127,8 @@ const resetTimer = () => { const lapTimer = () => { + lapDetails.innerText = ""; + lapCount += 1; console.log('lapHours: ', lapHours); @@ -136,46 +138,94 @@ const lapTimer = () => { let currentLapTime = `${formatNum(lapHours)} : ${formatNum(lapMinutes)} : ${formatNum(lapSeconds)}`; let currentTotalTime = `${formatNum(hoursCounter)} : ${formatNum(minutesCounter)} : ${formatNum(secondsCounter)}`; + const currentLapDetails = { + lapIndex: lapCount, + lapNum: formatNum(lapCount), + currLapTime: currentLapTime, + currTotalTime: currentTotalTime + } + + lapData.push(currentLapDetails); + console.log(lapData); - // create container for each set of data - let lapContainer = document.createElement('p'); - lapContainer.classList.add('lapContainer'); - document.getElementById('lapDetails').appendChild(lapContainer); + // to show only the latest 4 laps + // if more than 4 laps, start from lapData length - 4 + // if up to 4 laps, display all + if (lapData.length <= 4) { + for (let i = 0; i < lapData.length; i += 1) { + // create container for each set of data + let lapContainer = document.createElement('p'); + lapContainer.classList.add('lapContainer'); + document.getElementById('lapDetails').appendChild(lapContainer); - // create lap, lap time and total time containers - let lap = document.createElement('span'); - let lapTime = document.createElement('span'); - let totalTime = document.createElement('span'); - lap.classList.add('lap'); - lapTime.classList.add('lapTime'); - totalTime.classList.add('totalTime'); + // create lap, lap time and total time containers + let lap = document.createElement('span'); + let lapTime = document.createElement('span'); + let totalTime = document.createElement('span'); - // capture lap information to display - lap.innerText = formatNum(lapCount); - lapTime.innerText = currentLapTime; - totalTime.innerText = currentTotalTime; + lap.classList.add('lap'); + lapTime.classList.add('lapTime'); + totalTime.classList.add('totalTime'); + // capture lap information to display + lap.innerText = lapData[i].lapNum; + lapTime.innerText = lapData[i].currLapTime; + totalTime.innerText = lapData[i].currTotalTime; - // append containers - lapContainer.appendChild(lap); - lapContainer.appendChild(lapTime); - lapContainer.appendChild(totalTime); + // append containers + lapContainer.appendChild(lap); + lapContainer.appendChild(lapTime); + lapContainer.appendChild(totalTime); - console.log('lapCount: ', lapCount); - console.log('currentLapTime: ', currentLapTime); - console.log('currentTotalTime: ', currentTotalTime); + console.log('lapCount: ', lapCount); + console.log('currentLapTime: ', currentLapTime); + console.log('currentTotalTime: ', currentTotalTime); + } + } else if (lapData.length > 4) { + for (let i = lapData.length-4; i < lapData.length; i += 1) { + // create container for each set of data + let lapContainer = document.createElement('p'); + lapContainer.classList.add('lapContainer'); + document.getElementById('lapDetails').appendChild(lapContainer); + + + // create lap, lap time and total time containers + let lap = document.createElement('span'); + let lapTime = document.createElement('span'); + let totalTime = document.createElement('span'); + + lap.classList.add('lap'); + lapTime.classList.add('lapTime'); + totalTime.classList.add('totalTime'); + + // capture lap information to display + lap.innerText = lapData[i].lapNum; + lapTime.innerText = lapData[i].currLapTime; + totalTime.innerText = lapData[i].currTotalTime; + + // append containers + lapContainer.appendChild(lap); + lapContainer.appendChild(lapTime); + lapContainer.appendChild(totalTime); + + console.log('lapCount: ', lapCount); + console.log('currentLapTime: ', currentLapTime); + console.log('currentTotalTime: ', currentTotalTime); + } + } // to reset lap details; lapSeconds = 0; lapMinutes = 0; lapHours = 0; - - + } +// ===== INITIALISE TIMER ===== + // add event listener for start button const startButton = document.getElementById('startButton') startButton.addEventListener('click', () => { From 0a7c4734e4f4167f099ba30696a7d07b8b51f1a5 Mon Sep 17 00:00:00 2001 From: yuntingc Date: Sun, 27 Mar 2022 22:44:54 +0800 Subject: [PATCH 3/4] fixed bug for multiple start button clicks allowed --- script.js | 72 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 41 insertions(+), 31 deletions(-) diff --git a/script.js b/script.js index ce6f626..b3a96d6 100644 --- a/script.js +++ b/script.js @@ -21,6 +21,8 @@ let lapCount = 0; let lapDetails = document.getElementById('lapDetails'); let lapData = []; +let canClick = true; + // ===== HELPER FUNCTIONS ===== @@ -35,51 +37,56 @@ const formatNum = (number) => { const startTimer = () => { - timer = setInterval( () => { + if (canClick) { - //console.log('secondsCounter: ', secondsCounter); + canClick = false; - // at every second, print the status of seconds, minutes, hours + timer = setInterval( () => { - seconds.innerText = formatNum(secondsCounter); - minutes.innerText = formatNum(minutesCounter); - hours.innerText = formatNum(hoursCounter); + //console.log('secondsCounter: ', secondsCounter); + + // at every second, print the status of seconds, minutes, hours + + seconds.innerText = formatNum(secondsCounter); + minutes.innerText = formatNum(minutesCounter); + hours.innerText = formatNum(hoursCounter); - // when timer starts - for total time + // when timer starts - for total time - // second starts - secondsCounter += 1 + // second starts + secondsCounter += 1 - // when seconds hit 60 - if (secondsCounter === 60) { - - // minutes increase by 1, seconds start from 0 - minutesCounter += 1; - secondsCounter = 0; + // when seconds hit 60 + if (secondsCounter === 60) { + + // minutes increase by 1, seconds start from 0 + minutesCounter += 1; + secondsCounter = 0; - // when minutes hit 60, minutes start from 0 - if (minutesCounter === 60) { - hoursCounter += 1; - minutesCounter = 0; + // when minutes hit 60, minutes start from 0 + if (minutesCounter === 60) { + hoursCounter += 1; + minutesCounter = 0; + } } - } - // when timer starts - for lap time + // when timer starts - for lap time - lapSeconds += 1 + lapSeconds += 1 - if (lapSeconds === 60) { - lapMinutes += 1; - lapSeconds = 0; + if (lapSeconds === 60) { + lapMinutes += 1; + lapSeconds = 0; - if (lapMinutes === 60) { - lapHours += 1; - lapMinutes = 0; - } + if (lapMinutes === 60) { + lapHours += 1; + lapMinutes = 0; + } - } + } - }, delayInMilliseconds); + }, delayInMilliseconds); + } } const stopTimer = () => { @@ -87,12 +94,14 @@ const stopTimer = () => { console.log('secondsCounter: ', secondsCounter); timerStatus = 'stop'; + canClick = true; clearInterval(timer); } const resetTimer = () => { + console.log('secondsCounter: ', secondsCounter); clearInterval(timer); @@ -111,6 +120,7 @@ const resetTimer = () => { // if reset button is hit when timer is running, timer will auto start if (timerStatus === 'start') { + canClick = true; startTimer(); } From 7042ce259ae47f5f4901039f50ebdc7964bb5335 Mon Sep 17 00:00:00 2001 From: yuntingc Date: Sat, 2 Apr 2022 01:58:51 +0800 Subject: [PATCH 4/4] fixed 1 second lag --- script.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index b3a96d6..7a428f2 100644 --- a/script.js +++ b/script.js @@ -36,6 +36,7 @@ const formatNum = (number) => { } const startTimer = () => { + //console.log('secondsCounter: ', secondsCounter) if (canClick) { @@ -43,13 +44,9 @@ const startTimer = () => { timer = setInterval( () => { - //console.log('secondsCounter: ', secondsCounter); + console.log('before secondsCounter: ', secondsCounter); - // at every second, print the status of seconds, minutes, hours - seconds.innerText = formatNum(secondsCounter); - minutes.innerText = formatNum(minutesCounter); - hours.innerText = formatNum(hoursCounter); // when timer starts - for total time @@ -84,7 +81,13 @@ const startTimer = () => { } } + // at every second, print the status of seconds, minutes, hours + console.log('after secondsCounter: ', secondsCounter); + + seconds.innerText = formatNum(secondsCounter); + minutes.innerText = formatNum(minutesCounter); + hours.innerText = formatNum(hoursCounter); }, delayInMilliseconds); } }