diff --git a/index.html b/index.html
index 4771b50..4ca1a49 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,62 @@
Timer
+
+
+
-
+ Timer!
+
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/script.js b/script.js
index e2d0297..f2ec847 100644
--- a/script.js
+++ b/script.js
@@ -1 +1,82 @@
// Please implement exercise logic here
+let totalSeconds = 0;
+let lapSeconds = 0;
+let lapData = [];
+/**
+ *
+ * id: 1
+ * lapTime: 00:00:00:000
+ * totalTime: 00:00:00:000
+ */
+let timer;
+
+document.getElementById("start-button").addEventListener("click", () => {
+ toggleDisabled("start-button", true);
+ toggleDisabled("reset-button", true);
+ toggleDisabled("stop-button", false);
+ toggleDisabled("lap-button", false);
+ timer = setInterval(function () {
+ addTimer();
+ updateElapsedTime();
+ }, 100);
+});
+
+document.getElementById("stop-button").addEventListener("click", () => {
+ toggleDisabled("stop-button", true);
+ toggleDisabled("start-button", false);
+ toggleDisabled("reset-button", false);
+ toggleDisabled("lap-button", true);
+ clearInterval(timer);
+});
+
+document.getElementById("reset-button").addEventListener("click", () => {
+ totalSeconds = 0;
+ lapSeconds = 0;
+ lapData = [];
+ document.getElementById("lap-data-times").innerHTML = "";
+ updateElapsedTime();
+});
+
+document.getElementById("lap-button").addEventListener("click", () => {
+ let lapObject = {};
+ lapObject.id = lapData.length + 1;
+ lapObject.lapTime = milliSecondsToString(lapSeconds);
+ lapObject.totalTime = milliSecondsToString(totalSeconds);
+
+ lapData.push(lapObject);
+
+ document.getElementById("lap-data-times").innerHTML = `Lap ${
+ lapObject.id
+ } ${lapObject.lapTime} (${lapObject.totalTime})${
+ document.getElementById("lap-data-times").innerHTML
+ }`;
+
+ lapSeconds = 0;
+});
+
+const toggleDisabled = (buttonId, status) => {
+ document.getElementById(buttonId).disabled = status;
+};
+
+const addTimer = () => {
+ lapSeconds += 100;
+ totalSeconds += 100;
+};
+
+const updateElapsedTime = () => {
+ document.getElementById("elapsed-time").innerHTML =
+ milliSecondsToString(totalSeconds);
+};
+
+const milliSecondsToString = (duration) => {
+ let milliseconds = parseInt((duration % 1000) / 100),
+ seconds = Math.floor((duration / 1000) % 60),
+ minutes = Math.floor((duration / (1000 * 60)) % 60),
+ hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+
+ hours = hours < 10 ? "0" + hours : hours;
+ minutes = minutes < 10 ? "0" + minutes : minutes;
+ seconds = seconds < 10 ? "0" + seconds : seconds;
+
+ return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
+};
diff --git a/styles.css b/styles.css
index 04e7110..79753dd 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,78 @@
body {
- background-color: pink;
+ background-color: #e74c3c;
+ text-align: center;
+}
+
+.flex {
+ display: flex;
+}
+
+.row {
+ flex-grow: 1;
+ padding: 20px;
+}
+
+.col {
+ flex-direction: column;
+ width: 50%;
+ height: 100%;
+}
+
+#timer-container {
+ background-color: #c0392b;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: 1000px;
+ margin-left: -500px;
+ height: 500px;
+ margin-top: -250px;
+ display: flex;
+ flex-direction: row;
+}
+
+#lap-data {
+ background-color: white;
+ width: 100%;
+ height: 460px;
+ overflow-y: scroll;
+}
+
+#lap-data-times {
+ margin-top: 0px;
+ list-style-type: none;
+ float: left;
+}
+
+#lap-data-times > li {
+ margin-left: -30px;
+}
+
+#elapsed-time {
+ background-color: white;
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+}
+
+#start,
+#stop,
+#reset,
+#lap {
+ height: 100%;
+}
+
+.button {
+ width: 100%;
+ height: 100%;
+}
+
+.bangers {
+ font-family: "Bangers", cursive;
+ letter-spacing: 2.5px;
+}
+
+.mono {
+ font-family: "Space Mono", monospace;
}