rocketacademy · c3scno · Dec 3, 2021 · Dec 3, 2021 · Dec 4, 2021
diff --git a/index.html b/index.html
@@ -6,8 +6,28 @@
   </head>
 
   <body>
-    <h1 id="header">Timer!</h1>
+    <h1 id="header">Timer!⏳</h1>
     <!-- Import program logic -->
+    <section id="container">
+      <div id="lap-data"></div>
+      <div id="right-side">
+        <div id="top">
+          <div id="main-timer">00:00:00:00</div>
+          <div id="lap-timer">00:00:00:00</div>
+        </div>
+        <div id="bottom">
+          <div id="top-buttons">
+            <button class="btn" id="start-button">Start</button>
+            <button class="btn" id="stop-button">Stop</button>
+          </div>
+
+          <div id="bottom-buttons">
+            <button class="btn" id="lap-button">Lap</button>
+            <button class="btn" id="reset-button">Reset</button>
+          </div>
+        </div>
+      </div>
+    </section>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -1 +1,128 @@
 // Please implement exercise logic here
+//### DOM SELECTORS ###
+const mainTimer =  document.getElementById('main-timer')
+const lapTimer = document.getElementById('lap-timer')
+const actionButtons = document.querySelectorAll('.btn')
+const container = document.getElementById('lap-data')
+
+const laps = document.createElement('table');
+laps.style.display = 'none';
+container.appendChild(laps);
+const row = laps.insertRow();
+const headings = ['Lap', 'Lap times', 'Overall time'];
+for (let j = 0; j < headings.length; j += 1) {
+  const cell = row.insertCell();
+  cell.appendChild(document.createTextNode(headings[j]));
+  cell.style.fontWeight = 'bold';
+}
+
+// GLOBAL VARIABLES
+let counter
+let mainTime = [0,0,0,0]
+let lapTime = [0,0,0,0]
+let noOfLaps = 0
+
+// ### HELPER FUNCTION ###
+const formatClock = (timeArray) => {
+  let [hours, minutes, seconds, miliseconds] = timeArray.map(String)
+  hours = hours.length > 1 ? hours : `0${hours}`
+  minutes = minutes.length > 1 ? minutes : `0${minutes}`
+  seconds = seconds.length > 1 ? seconds : `0${seconds}`
+  miliseconds = miliseconds.length > 1 ? miliseconds : `0${miliseconds}`
+
+  return `${hours}:${minutes}:${seconds}:${miliseconds}`
+}
+
+// ### MAIN FUNCTION ###
+const startTimer = () => {
+  const interval = setInterval(() => {
+    mainTime[3] += 1;
+      if (mainTime[3] > 99) {
+        mainTime[2] += 1;
+        mainTime[3] = 0;
+      }
+      if (mainTime[2] > 59) {
+        mainTime[1] += 1;
+        mainTime[2] = 0;
+      }
+      if (mainTime[1] > 59) {
+        mainTime[0] += 1;
+        mainTime[1] = 0;
+      }
+
+      mainTimer.innerText = formatClock(mainTime)
+
+      if (noOfLaps > 0) {
+      lapTime[3] += 1;
+      if (lapTime[3] > 99) {
+        lapTime[2] += 1;
+        lapTime[3] = 0;
+      }
+      if (lapTime[2] > 59) {
+        lapTime[1] += 1;
+        lapTime[2] = 0;
+      }
+      if (lapTime[1] > 59) {
+        lapTime[0] += 1;
+        lapTime[1] = 0;
+      }
+
+      lapTimer.innerText = formatClock(lapTime)
+    }
+  }, 10)
+
+  // EVENT LISTENERS
+  actionButtons[1].onclick = () => {
+    clearInterval(interval)
+  }
+
+  actionButtons[0].onclick =() => {
+    clearInterval(interval)
+    startTimer()
+  }
+
+  actionButtons[3].onclick =() => {
+    clearInterval(interval)
+    mainTime = [0,0,0,0]
+    lapTime = [0,0,0,0]
+    noOfLaps = 0
+    container.innerText = ''
+    mainTimer.innerText = '00:00:00:00'
+    lapTimer.innerText = '00:00:00:00'
+  }
+}
+
+const newLap = () => {
+  noOfLaps += 1
+  const newRow = laps.insertRow();
+  const rowData = [noOfLaps];
+
+  if (noOfLaps == 1) {
+    rowData.push(mainTimer.innerText);
+    rowData.push(mainTimer.innerText);
+    lapTimer.style.display='block'
+    laps.style.display = 'table'
+  } else {
+    rowData.push(lapTimer.innerText)
+    rowData.push(mainTimer.innerText)
+    lapClock = [0, 0, 0]
+    lapTimer.innerText = '00:00:00'
+  }
+
+  for (let i = 0; i < headings.length; i += 1) {
+    const newCell = newRow.insertCell();
+    newCell.appendChild(document.createTextNode(rowData[i]));
+  }
+}
+
+
+actionButtons[0].onclick =() => {
+  startTimer()
+}
+
+actionButtons[2].onclick =() => {
+  lapClock = [0, 0, 0]
+  newLap()
+  console.log(noOfLaps)
+}
+
diff --git a/styles.css b/styles.css
@@ -1,3 +1,60 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;700&display=swap");
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
 body {
   background-color: pink;
 }
+
+h1 {
+  font-family: "Arial";
+  font-size: 4em;
+  margin-top: 50px;
+  margin-left: 50px;
+}
+
+#container {
+  display: flex;
+  height: 90%;
+}
+
+#lap-data {
+  width: 40%;
+  padding: 0 50px 0 20px;
+  margin-top: 40px;
+}
+
+#right-side {
+  display: flex;
+  flex-direction: column;
+}
+
+#main-timer {
+  width: 100%;
+  font-family: "Roboto Mono", monospace;
+  font-size: 6rem;
+}
+
+#lap-timer {
+  width: 100%;
+  font-family: "Roboto Mono", monospace;
+  font-size: 5rem;
+  display: none;
+}
+
+#bottom {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 100px;
+}
+
+button {
+  width: 10vw;
+  padding: 2em;
+  margin: 0.5em;
+}