From b9c10e7497f0d280d600fcc85040fc2c1b4293c4 Mon Sep 17 00:00:00 2001 From: Zihao1319 Date: Mon, 28 Mar 2022 15:00:01 +0800 Subject: [PATCH 1/4] added start stop reset --- script.js | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 23 ++++++++++++++ 2 files changed, 114 insertions(+) diff --git a/script.js b/script.js index e2d0297..1b5115b 100644 --- a/script.js +++ b/script.js @@ -1 +1,92 @@ // Please implement exercise logic here + +//timer display container +let timeDisplay = document.createElement("div"); +timeDisplay.classList.add("display"); +document.body.appendChild(timeDisplay); + +//default time display +let hour = 00; +let minute = 00; +let second = 00; +timeDisplay.innerHTML = timeDisplay.innerHTML = + "Time Elapsed: " + + ("0" + `${hour}`).slice(-2) + + ":" + + ("0" + `${minute}`).slice(-2) + + ":" + + ("0" + `${second}`).slice(-2); + +let totalTime = 0; + +//default ending time is 3 mins +const endTimeInMillisec = 180000; +let timeInterval; + +// display the timer each second +const displaySec = 1000; + +//Start button +let startButton = document.createElement("button"); +startButton.classList.add("button", "green"); +startButton.innerHTML = "Start"; +document.body.appendChild(startButton); + +//resume the timer once clicked +startButton.addEventListener("click", () => { + console.log("START BUTTON PRESSED"); + // clearing time interval everytime when the button gets clicked + clearInterval(timeInterval); + // updateClock(); + timeInterval = setInterval(updateClock, displaySec); +}); + +//Stop button +let stopButton = document.createElement("button"); +stopButton.classList.add("button", "red"); +stopButton.innerHTML = "Stop"; +document.body.appendChild(stopButton); + +// pause the timer once clicked +stopButton.addEventListener("click", () => { + console.log("STOP BUTTON PRESSED"); + + //record the paused time in case we need to resume it later + let pausedTime = totalTime; + console.log(pausedTime); + clearInterval(timeInterval); +}); + +//reset button +let resetButton = document.createElement("button"); +resetButton.classList.add("button", "yellow"); +resetButton.innerHTML = "Reset"; +document.body.appendChild(resetButton); + +resetButton.addEventListener("click", () => { + console.log("RESET BUTTON PRESSED"); + totalTime = 0; + clearInterval(timeInterval); + updateClock(); +}); + +function updateClock() { + let hour = Math.floor((totalTime / (1000 * 60 * 60)) % 24); + let minute = Math.floor((totalTime / 1000 / 60) % 60); + let second = Math.floor((totalTime / 1000) % 60); + + timeDisplay.innerHTML = + "Time Elapsed: " + + ("0" + `${hour}`).slice(-2) + + ":" + + ("0" + `${minute}`).slice(-2) + + ":" + + ("0" + `${second}`).slice(-2); + + if (totalTime >= endTimeInMillisec) { + clearInterval(timeInterval); + } + + totalTime += 1000; + console.log(totalTime); +} diff --git a/styles.css b/styles.css index 04e7110..658ded3 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,26 @@ body { background-color: pink; } + +.display { + margin: 10px; + padding: 10px; + background-color: white; +} + +.button { + margin: 10px; + padding: 10px; +} + +.green { + color: green; +} + +.red { + color: red; +} + +.yellow { + color: black; +} From d1472ee53b891592795743298beadbdde58e3899 Mon Sep 17 00:00:00 2001 From: Zihao1319 Date: Mon, 28 Mar 2022 17:00:02 +0800 Subject: [PATCH 2/4] added split and lap functions --- script.js | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++--- styles.css | 4 ++ 2 files changed, 104 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index 1b5115b..d4ec8f5 100644 --- a/script.js +++ b/script.js @@ -32,13 +32,14 @@ startButton.classList.add("button", "green"); startButton.innerHTML = "Start"; document.body.appendChild(startButton); -//resume the timer once clicked +//when start button is triggered startButton.addEventListener("click", () => { console.log("START BUTTON PRESSED"); // clearing time interval everytime when the button gets clicked clearInterval(timeInterval); // updateClock(); timeInterval = setInterval(updateClock, displaySec); + }); //Stop button @@ -47,7 +48,7 @@ stopButton.classList.add("button", "red"); stopButton.innerHTML = "Stop"; document.body.appendChild(stopButton); -// pause the timer once clicked +// when stop button is triggered stopButton.addEventListener("click", () => { console.log("STOP BUTTON PRESSED"); @@ -68,12 +69,97 @@ resetButton.addEventListener("click", () => { totalTime = 0; clearInterval(timeInterval); updateClock(); + + //clearing the lap display + lapDisplay.innerHTML = "" + + //clearing laptimes array + lapTimes = []; + counter = 1; +}); + +//lap button +let lapButton = document.createElement("button"); +lapButton.classList.add("button", "blue"); +lapButton.innerHTML = "Lap"; +document.body.appendChild(lapButton); + +//lap display container +let lapDisplay = document.createElement("div"); +lapDisplay.classList.add("display"); +document.body.appendChild(lapDisplay); + +//lap counter +let counter = 1; +let lapTimes = []; + +//when lap button is triggered +lapButton.addEventListener("click", () => { + // minus 1000ms as laptime is always 1s ahead + + let lapTime = totalTime - 1000; + let hour = convertTime(lapTime)[0] + let minute = convertTime(lapTime)[1] + let second = convertTime(lapTime)[2] + lapTimes.push(lapTime); + console.log(lapTimes); + + lapDisplay.innerHTML += + "Lap No." + `${counter}` + ": " + + ("0" + `${hour}`).slice(-2) + + ":" + + ("0" + `${minute}`).slice(-2) + + ":" + + ("0" + `${second}`).slice(-2) + "
"; + + // lapDisplay.appendChild(lapTime) + counter += 1; + split(lapTimes) }); +//lap display container +let splitDisplay = document.createElement("div"); +splitDisplay.classList.add("display"); +document.body.appendChild(splitDisplay); + +//split time calc +let splitTimes = []; +let splitCounter = 1; + +function split (lapTimes) { + +for (i = 0; i < lapTimes.length; i++) { + + // if there is more than 1 laps + if (lapTimes.length > 1) { + + splitTimes[splitCounter] = lapTimes[i+1] - lapTimes[i] + convertTime(splitTimes[splitCounter]); + let hour = convertTime(splitTimes[splitCounter])[0] + let minute = convertTime(splitTimes[splitCounter])[1] + let second = convertTime(splitTimes[splitCounter])[2] + + splitDisplay.innerHTML += `Split No. ${splitCounter}: ` + ("0" + `${hour}`).slice(-2) + + ":" + + ("0" + `${minute}`).slice(-2) + + ":" + + ("0" + `${second}`).slice(-2) + "
"; + splitCounter += 1; + } +} + +} + + function updateClock() { - let hour = Math.floor((totalTime / (1000 * 60 * 60)) % 24); - let minute = Math.floor((totalTime / 1000 / 60) % 60); - let second = Math.floor((totalTime / 1000) % 60); + + let hour = convertTime(totalTime)[0] + let minute = convertTime(totalTime)[1] + let second = convertTime(totalTime)[2] + + // let hour = Math.floor((totalTime / (1000 * 60 * 60)) % 24); + // let minute = Math.floor((totalTime / 1000 / 60) % 60); + // let second = Math.floor((totalTime / 1000) % 60); timeDisplay.innerHTML = "Time Elapsed: " + @@ -90,3 +176,12 @@ function updateClock() { totalTime += 1000; console.log(totalTime); } + +//convert millisecs to hours, minutes, seconds +function convertTime (totalTime) { + let hour = Math.floor((totalTime / (1000 * 60 * 60)) % 24); + let minute = Math.floor((totalTime / 1000 / 60) % 60); + let second = Math.floor((totalTime / 1000) % 60); + + return [hour,minute,second] +} \ No newline at end of file diff --git a/styles.css b/styles.css index 658ded3..479b7a4 100644 --- a/styles.css +++ b/styles.css @@ -24,3 +24,7 @@ body { .yellow { color: black; } + +.blue { + color: blue; +} \ No newline at end of file From a2750a3494f8b87b2f4cacf273944a2f6b557981 Mon Sep 17 00:00:00 2001 From: Zihao1319 Date: Tue, 29 Mar 2022 00:10:50 +0800 Subject: [PATCH 3/4] lap & split working well but has counter issue --- script.js | 126 ++++++++++++++++++++++++++++++++++++----------------- styles.css | 2 +- 2 files changed, 86 insertions(+), 42 deletions(-) diff --git a/script.js b/script.js index d4ec8f5..e8f25d1 100644 --- a/script.js +++ b/script.js @@ -39,7 +39,6 @@ startButton.addEventListener("click", () => { clearInterval(timeInterval); // updateClock(); timeInterval = setInterval(updateClock, displaySec); - }); //Stop button @@ -70,12 +69,16 @@ resetButton.addEventListener("click", () => { clearInterval(timeInterval); updateClock(); - //clearing the lap display - lapDisplay.innerHTML = "" + //clearing the lap display + lapDisplay.innerHTML = ""; //clearing laptimes array lapTimes = []; counter = 1; + + //clearing split records + splitDisplay.innerHTML = ""; + splitTimesRecord = []; }); //lap button @@ -91,30 +94,34 @@ document.body.appendChild(lapDisplay); //lap counter let counter = 1; -let lapTimes = []; +let lapTimes = []; //when lap button is triggered lapButton.addEventListener("click", () => { // minus 1000ms as laptime is always 1s ahead - + let lapTime = totalTime - 1000; - let hour = convertTime(lapTime)[0] - let minute = convertTime(lapTime)[1] - let second = convertTime(lapTime)[2] + let hour = convertTime(lapTime)[0]; + let minute = convertTime(lapTime)[1]; + let second = convertTime(lapTime)[2]; lapTimes.push(lapTime); console.log(lapTimes); lapDisplay.innerHTML += - "Lap No." + `${counter}` + ": " + - ("0" + `${hour}`).slice(-2) + - ":" + - ("0" + `${minute}`).slice(-2) + - ":" + - ("0" + `${second}`).slice(-2) + "
"; + "Lap No." + + `${counter}` + + ": " + + ("0" + `${hour}`).slice(-2) + + ":" + + ("0" + `${minute}`).slice(-2) + + ":" + + ("0" + `${second}`).slice(-2) + + "
"; - // lapDisplay.appendChild(lapTime) counter += 1; - split(lapTimes) + + // displaying split times + split(lapTimes); }); //lap display container @@ -123,39 +130,76 @@ splitDisplay.classList.add("display"); document.body.appendChild(splitDisplay); //split time calc -let splitTimes = []; + +let splitTime; let splitCounter = 1; -function split (lapTimes) { +function split(lapTimes) { + // empty the display everytime + splitDisplay.innerHTML = ""; -for (i = 0; i < lapTimes.length; i++) { + // recalculate the splits everytime the function is triggered + let splitTimesRecord = []; // if there is more than 1 laps if (lapTimes.length > 1) { - - splitTimes[splitCounter] = lapTimes[i+1] - lapTimes[i] - convertTime(splitTimes[splitCounter]); - let hour = convertTime(splitTimes[splitCounter])[0] - let minute = convertTime(splitTimes[splitCounter])[1] - let second = convertTime(splitTimes[splitCounter])[2] - - splitDisplay.innerHTML += `Split No. ${splitCounter}: ` + ("0" + `${hour}`).slice(-2) + - ":" + - ("0" + `${minute}`).slice(-2) + - ":" + - ("0" + `${second}`).slice(-2) + "
"; + // loop over lapTimes.length + for (i = 0; i < lapTimes.length - 1; i++) { + splitTime = lapTimes[i + 1] - lapTimes[i]; + + // converting them to proper time format + let hour = convertTime(splitTime)[0]; + let minute = convertTime(splitTime)[1]; + let second = convertTime(splitTime)[2]; + + splitTimesRecord.push(splitTime); + console.log(splitTimesRecord); + + splitDisplay.innerHTML += + "Split No." + + `${splitCounter}` + + ": " + + ("0" + `${hour}`).slice(-2) + + ":" + + ("0" + `${minute}`).slice(-2) + + ":" + + ("0" + `${second}`).slice(-2) + + "
"; + } splitCounter += 1; } } - -} +// function displaySplit(array) { +// // empty the display everytime +// splitDisplay.innerHTML = ""; -function updateClock() { +// splitCounter = 1; - let hour = convertTime(totalTime)[0] - let minute = convertTime(totalTime)[1] - let second = convertTime(totalTime)[2] +// for (i = 0; i < array.length; i++) { +// let hour = convertTime(array[0])[0]; +// let minute = convertTime(array[0])[1]; +// let second = convertTime(array[0])[3]; + +// splitDisplay.innerHTML += +// "Split No." + +// `${splitCounter}` + +// ": " + +// ("0" + `${hour}`).slice(-2) + +// ":" + +// ("0" + `${minute}`).slice(-2) + +// ":" + +// ("0" + `${second}`).slice(-2) + +// "
"; + +// splitCounter += 1; +// } +// } + +function updateClock() { + let hour = convertTime(totalTime)[0]; + let minute = convertTime(totalTime)[1]; + let second = convertTime(totalTime)[2]; // let hour = Math.floor((totalTime / (1000 * 60 * 60)) % 24); // let minute = Math.floor((totalTime / 1000 / 60) % 60); @@ -178,10 +222,10 @@ function updateClock() { } //convert millisecs to hours, minutes, seconds -function convertTime (totalTime) { +function convertTime(totalTime) { let hour = Math.floor((totalTime / (1000 * 60 * 60)) % 24); let minute = Math.floor((totalTime / 1000 / 60) % 60); let second = Math.floor((totalTime / 1000) % 60); - - return [hour,minute,second] -} \ No newline at end of file + + return [hour, minute, second]; +} diff --git a/styles.css b/styles.css index 479b7a4..9a3039b 100644 --- a/styles.css +++ b/styles.css @@ -27,4 +27,4 @@ body { .blue { color: blue; -} \ No newline at end of file +} From 9b327aa4c49a0e56b17ed8866e51c156d4242823 Mon Sep 17 00:00:00 2001 From: Zihao1319 Date: Tue, 29 Mar 2022 00:30:33 +0800 Subject: [PATCH 4/4] fixed bugs abt split counter issue --- script.js | 38 +++++--------------------------------- 1 file changed, 5 insertions(+), 33 deletions(-) diff --git a/script.js b/script.js index e8f25d1..ec8f3d4 100644 --- a/script.js +++ b/script.js @@ -130,20 +130,18 @@ splitDisplay.classList.add("display"); document.body.appendChild(splitDisplay); //split time calc - let splitTime; let splitCounter = 1; +let splitTimesRecord = []; function split(lapTimes) { // empty the display everytime splitDisplay.innerHTML = ""; - // recalculate the splits everytime the function is triggered - let splitTimesRecord = []; - // if there is more than 1 laps if (lapTimes.length > 1) { // loop over lapTimes.length + splitCounter = 1; for (i = 0; i < lapTimes.length - 1; i++) { splitTime = lapTimes[i + 1] - lapTimes[i]; @@ -152,8 +150,8 @@ function split(lapTimes) { let minute = convertTime(splitTime)[1]; let second = convertTime(splitTime)[2]; - splitTimesRecord.push(splitTime); - console.log(splitTimesRecord); + splitTimesRecord.push([hour, minute, second]); + // console.log(splitTimesRecord); splitDisplay.innerHTML += "Split No." + @@ -165,37 +163,11 @@ function split(lapTimes) { ":" + ("0" + `${second}`).slice(-2) + "
"; + splitCounter += 1; } - splitCounter += 1; } } -// function displaySplit(array) { -// // empty the display everytime -// splitDisplay.innerHTML = ""; - -// splitCounter = 1; - -// for (i = 0; i < array.length; i++) { -// let hour = convertTime(array[0])[0]; -// let minute = convertTime(array[0])[1]; -// let second = convertTime(array[0])[3]; - -// splitDisplay.innerHTML += -// "Split No." + -// `${splitCounter}` + -// ": " + -// ("0" + `${hour}`).slice(-2) + -// ":" + -// ("0" + `${minute}`).slice(-2) + -// ":" + -// ("0" + `${second}`).slice(-2) + -// "
"; - -// splitCounter += 1; -// } -// } - function updateClock() { let hour = convertTime(totalTime)[0]; let minute = convertTime(totalTime)[1];