Solve iteration x, y, z

index.html

@@ -37,7 +37,7 @@ <h3>Splits</h3>
       <div class="hole"></div>
     </div>
 
-    <script src="javascript/chronometer.js"></script>
-    <script src="javascript/index.js"></script>
+    <script type="module" src="javascript/chronometer.js"></script>
+    <script type="module" src="javascript/index.js"></script>
   </body>
 </html>

javascript/chronometer.js

@@ -1,34 +1,52 @@
 class Chronometer {
   constructor() {
-    // ... your code goes here
+    this.currentTime = 0;
+    this.intervalId = null;
   }
 
   start(callback) {
-    // ... your code goes here
+    if (this.intervalId) return;
+
+    this.intervalId = setInterval(() => {
+      this.currentTime += 1;
+      if (callback) callback();
+    }, 1000);
   }
 
   getMinutes() {
-    // ... your code goes here
+    return Math.floor(this.currentTime / 60);
   }
 
   getSeconds() {
-    // ... your code goes here
+    return this.currentTime % 60;
+  }
+
+  getMilliseconds() {
+    return this.currentTime % 100;
   }
 
   computeTwoDigitNumber(value) {
-    // ... your code goes here
+    let number = String(value);
+
+    if (number.length === 1) {
+      return number.padStart(2, '0');
+    }
+    return number;
   }
 
   stop() {
-    // ... your code goes here
+    clearInterval(this.intervalId);
+    this.intervalId = null;
   }
 
   reset() {
-    // ... your code goes here
+    this.currentTime = 0;
   }
 
   split() {
-    // ... your code goes here
+    let mins = this.computeTwoDigitNumber(this.getMinutes());
+    let secs = this.computeTwoDigitNumber(this.getSeconds());
+    return `${mins}:${secs}`;
   }
 }
 

javascript/index.js

@@ -1,3 +1,5 @@
+import { Chronometer } from './chronometer.js';
+
 const chronometer = new Chronometer();
 
 // get the buttons:
@@ -56,10 +58,53 @@ function setResetBtn() {
 
 // Start/Stop Button
 btnLeftElement.addEventListener('click', () => {
-  // ... your code goes here
+  if (btnLeftElement.classList.contains('start')) {
+    btnLeftElement.innerText = 'STOP';
+    btnLeftElement.classList.replace('start', 'stop');
+
+    btnRightElement.innerText = 'SPLIT';
+    btnRightElement.classList.replace('reset', 'split');
+
+    chronometer.start(() => {
+      let minutes = chronometer.computeTwoDigitNumber(chronometer.getMinutes());
+      let seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds());
+      let milliseconds = chronometer.computeTwoDigitNumber(
+        chronometer.getMilliseconds()
+      );
+
+      minDecElement.innerHTML = minutes[0];
+      minUniElement.innerHTML = minutes[1];
+      secDecElement.innerHTML = seconds[0];
+      secUniElement.innerHTML = seconds[1];
+      milDecElement.textContent = milliseconds[0];
+      milUniElement.textContent = milliseconds[1];
+    });
+  } else {
+    chronometer.stop();
+    btnLeftElement.innerText = 'START';
+    btnLeftElement.classList.replace('stop', 'start');
+
+    btnRightElement.innerText = 'RESET';
+    btnRightElement.classList.replace('split', 'reset');
+  }
 });
 
 // Reset/Split Button
 btnRightElement.addEventListener('click', () => {
-  // ... your code goes here
+  const li = document.createElement('li');
+  li.className = 'list-item';
+  li.textContent = chronometer.split();
+  splitsElement.appendChild(li);
+
+  if (btnRightElement.classList.contains('reset')) {
+    chronometer.reset();
+    minDecElement.textContent = '0';
+    minUniElement.textContent = '0';
+    secDecElement.textContent = '0';
+    secUniElement.textContent = '0';
+    milDecElement.textContent = '0';
+    milUniElement.textContent = '0';
+
+    splitsElement.innerHTML = '';
+  }
 });