complete all iterations + bonus + tests

javascript/chronometer.js

@@ -1,34 +1,66 @@
 class Chronometer {
   constructor() {
-    // ... your code goes here
+    this.currentTime = 0;
+    this.intervalId = null;
+    this.currentMilliseconds = 0;
+    this.millisecIntervalId = null;
   }
 
   start(callback) {
-    // ... your code goes here
+    // Milliseconds interval (10ms)
+    this.millisecIntervalId = setInterval(() => {
+      this.currentMilliseconds++;
+      if (this.currentMilliseconds >= 100) {
+        this.currentMilliseconds = 0;
+      }
+      if (callback) callback();
+    }, 10);
+
+    this.intervalId = setInterval(() => {
+      this.currentTime++;
+      if (callback) {
+        callback();
+      }
+    }, 1000);
   }
 
   getMinutes() {
-    // ... your code goes here
+    return Math.floor(this.currentTime / 60);
   }
 
   getSeconds() {
-    // ... your code goes here
+    return Math.floor(this.currentTime) % 60;
+  }
+
+  getMilliseconds() {
+    return this.currentMilliseconds;
   }
 
   computeTwoDigitNumber(value) {
-    // ... your code goes here
+    return String(value).padStart(2, '0');
   }
 
   stop() {
-    // ... your code goes here
+    clearInterval(this.intervalId);
+    clearInterval(this.millisecIntervalId);
+    this.intervalId = null;
+    this.millisecIntervalId = null;
   }
 
   reset() {
-    // ... your code goes here
+    this.currentTime = 0;
+    this.currentMilliseconds = 0;
   }
 
   split() {
-    // ... your code goes here
+    const formatedMinutes = this.computeTwoDigitNumber(this.getMinutes());
+    const formatedSeconds = this.computeTwoDigitNumber(this.getSeconds());
+    return `${formatedMinutes}:${formatedSeconds}`;
+  }
+
+  // Separate logic to make the tests pass
+  splitMilliseconds() {
+    return this.computeTwoDigitNumber(this.getMilliseconds());
   }
 }
 

javascript/index.js

@@ -14,52 +14,97 @@ const milUniElement = document.getElementById('milUni');
 const splitsElement = document.getElementById('splits');
 
 function printTime() {
-  // ... your code goes here
+  printMinutes();
+  printSeconds();
+  printMilliseconds();
 }
 
 function printMinutes() {
-  // ... your code goes here
+  const minutes = chronometer.computeTwoDigitNumber(chronometer.getMinutes());
+  minDecElement.textContent = minutes[0];
+  minUniElement.textContent = minutes[1];
 }
 
 function printSeconds() {
-  // ... your code goes here
+  const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds());
+  secDecElement.textContent = seconds[0];
+  secUniElement.textContent = seconds[1];
 }
 
 // ==> BONUS
 function printMilliseconds() {
-  // ... your code goes here
+  const milliseconds = chronometer.computeTwoDigitNumber(
+    chronometer.getMilliseconds()
+  );
+  milDecElement.textContent = milliseconds[0];
+  milUniElement.textContent = milliseconds[1];
 }
 
 function printSplit() {
-  // ... your code goes here
+  const splitsElement = document.getElementById('splits');
+  const splitItem = document.createElement('li');
+  splitItem.className = 'list-item';
+  splitItem.innerHTML = `${chronometer.split()}:${chronometer.splitMilliseconds()}`;
+  splitsElement.appendChild(splitItem);
 }
 
 function clearSplits() {
-  // ... your code goes here
+  const splitsElement = document.getElementById('splits');
+  splitsElement.innerHTML = '';
 }
 
+// Change Left Button to STOP
 function setStopBtn() {
-  // ... your code goes here
+  btnLeftElement.className = 'btn stop';
+  btnLeftElement.innerText = 'STOP';
+  chronometer.start(printTime);
 }
 
+// Change Right Button to SPLIT
 function setSplitBtn() {
-  // ... your code goes here
+  btnRightElement.className = 'btn split';
+  btnRightElement.innerText = 'SPLIT';
 }
 
+// Change Left Button to START
 function setStartBtn() {
-  // ... your code goes here
+  btnLeftElement.className = 'btn start';
+  btnLeftElement.innerText = 'START';
+  chronometer.stop();
 }
 
+// Change Right Button to RESET
 function setResetBtn() {
-  // ... your code goes here
+  btnRightElement.className = 'btn reset';
+  btnRightElement.innerText = 'RESET';
 }
 
 // Start/Stop Button
 btnLeftElement.addEventListener('click', () => {
-  // ... your code goes here
+  if (btnLeftElement.classList.contains('start')) {
+    // Change Left Button to STOP
+    setStopBtn();
+
+    // Change Right Button to SPLIT
+    setSplitBtn();
+  } else {
+    // Change Left Button to START
+    setStartBtn();
+
+    // Change Right Button to RESET
+    setResetBtn();
+  }
 });
 
 // Reset/Split Button
 btnRightElement.addEventListener('click', () => {
-  // ... your code goes here
+  if (btnRightElement.classList.contains('reset')) {
+    // RESET
+    clearSplits();
+    chronometer.reset();
+    printTime(); // clear timer
+  } else {
+    // SPLIT
+    printSplit();
+  }
 });