From b6aa6ec0825aed4195c61de07269443e58d76e0e Mon Sep 17 00:00:00 2001 From: tanfeng95 <31460702+tanfeng95@users.noreply.github.com> Date: Sat, 4 Sep 2021 11:09:02 +0800 Subject: [PATCH 1/2] 1st commit -> look at stopwatch html --- package-lock.json | 2 +- stopwatch.html | 143 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 144 insertions(+), 1 deletion(-) create mode 100644 stopwatch.html 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/stopwatch.html b/stopwatch.html new file mode 100644 index 0000000..32b38d3 --- /dev/null +++ b/stopwatch.html @@ -0,0 +1,143 @@ + + + + + + + + + + + + Hello, world! + + + +
+
+
+
+
Lap data
+
+
+
+ +
+
+
+
+
+
Elapsed time
+
+
+
+ + + +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ + +
+ + + + + + + + + + + + + + \ No newline at end of file From 4b492474d79e3d2a9c28db12fac7d5b41f7f5c77 Mon Sep 17 00:00:00 2001 From: tanfeng95 <31460702+tanfeng95@users.noreply.github.com> Date: Sun, 5 Sep 2021 14:15:24 +0800 Subject: [PATCH 2/2] updated script.js --- index.html | 49 ++++++++++++++++++++++++++++++++++++++++++++++ package-lock.json | 5 +++++ package.json | 3 +++ script.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++ stopwatch.html | 5 +---- styles.css | 4 ++++ 6 files changed, 112 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 4771b50..178ac14 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,61 @@ + + + + + + Timer

Timer!

+
+
+
+
+
Lap data
+
+
+
+
+
+
+
+
+
Elapsed time
+
+
+
+ + + +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
diff --git a/package-lock.json b/package-lock.json index bf21e0c..c55cb54 100644 --- a/package-lock.json +++ b/package-lock.json @@ -196,6 +196,11 @@ "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true }, + "bootstrap": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.0.tgz", + "integrity": "sha512-bs74WNI9BgBo3cEovmdMHikSKoXnDgA6VQjJ7TyTotU6L7d41ZyCEEelPwkYEzsG/Zjv3ie9IE3EMAje0W9Xew==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index 8df494d..cd69b4a 100644 --- a/package.json +++ b/package.json @@ -20,5 +20,8 @@ "eslint": "^7.6.0", "eslint-config-airbnb-base": "^14.2.0", "eslint-plugin-import": "^2.22.0" + }, + "dependencies": { + "bootstrap": "^5.1.0" } } diff --git a/script.js b/script.js index e2d0297..b8c5f0e 100644 --- a/script.js +++ b/script.js @@ -1 +1,51 @@ // Please implement exercise logic here + +const minutesLabel = document.getElementById('minutes'); +const secondsLabel = document.getElementById('seconds'); +let totalSeconds = 0; + +let stopCount; + +const start = () => { + stopCount = setInterval(setTime, 1000); +}; + +const stop = () => { + clearInterval(stopCount); +}; +let lapArray = []; +const reset = () => { + clearInterval(stopCount); + minutesLabel.innerHTML = '00'; + secondsLabel.innerHTML = '00'; + lapArray = []; + const lapData = document.getElementById('lap_data'); + lapData.innerHTML = ''; + totalSeconds = 0; +}; + +const lap = () => { + const minutesLabelCurrent = document.getElementById('minutes'); + const secondsLabelCurrent = document.getElementById('seconds'); + lapArray.push(`${minutesLabelCurrent.innerHTML} : ${secondsLabelCurrent.innerHTML}`); + console.log(lapArray); + const lapData = document.getElementById('lap_data'); + const lapDiv = document.createElement('div'); + lapDiv.innerHTML = lapArray[lapArray.length - 1]; + lapData.appendChild(lapDiv); +}; + +function setTime() { + ++totalSeconds; + secondsLabel.innerHTML = pad(totalSeconds % 60); + minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60)); +} + +function pad(val) { + const valString = `${val}`; + if (valString.length < 2) { + return `0${valString}`; + } + + return valString; +} diff --git a/stopwatch.html b/stopwatch.html index 32b38d3..710bcbb 100644 --- a/stopwatch.html +++ b/stopwatch.html @@ -10,7 +10,7 @@ - Hello, world! + timer boot camp @@ -22,7 +22,6 @@
Lap data
-
@@ -56,8 +55,6 @@
Elapsed time
- - diff --git a/styles.css b/styles.css index 04e7110..ab5ce42 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,7 @@ body { background-color: pink; } + +.row { + padding: 10px; +}