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 6a892a0..c55cb54 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, @@ -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 new file mode 100644 index 0000000..710bcbb --- /dev/null +++ b/stopwatch.html @@ -0,0 +1,140 @@ + + + + + + + + + + + + timer boot camp + + + +
+
+
+
+
Lap data
+
+
+
+
+
+
+
+
+
Elapsed time
+
+
+
+ + + +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+ + + + + + + + + + + + + + \ No newline at end of file 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; +}