solve iteration x, y, z (Chronometer Clockwork Coded by Nathan Chan)

index.html

@@ -19,7 +19,7 @@ <h3>Splits</h3>
       <div id="sphere">
         <span id="minDec" class="number">0</span>
         <span id="minUni" class="number">0</span>
-        <span>:</span>
+        <span class="timer-colon">:</span>
         <span id="secDec" class="number">0</span>
         <span id="secUni" class="number">0</span>
         <div id="milliseconds">
@@ -40,4 +40,4 @@ <h3>Splits</h3>
     <script src="javascript/chronometer.js"></script>
     <script src="javascript/index.js"></script>
   </body>
-</html>
+</html>

javascript/chronometer.js

@@ -1,39 +1,59 @@
 class Chronometer {
   constructor() {
-    // ... your code goes here
+    this.currentTime = 0;
+    this.intervalId = null;
   }
 
   start(callback) {
-    // ... your code goes here
+    this.intervalId = setInterval(() => {
+      this.currentTime += 10;
+      if (callback) callback();
+    }, 10);
   }
 
   getMinutes() {
-    // ... your code goes here
+    return Math.floor(this.currentTime / 60000);
   }
 
+
   getSeconds() {
-    // ... your code goes here
+    return Math.floor((this.currentTime % 60000) / 1000);
+  }
+
+  getMilliseconds() {
+    return Math.floor((this.currentTime % 1000) / 10);
   }
 
-  computeTwoDigitNumber(value) {
-    // ... your code goes here
+  computeTwoDigitNumber(number) {
+    return number.toString().padStart(2, '0');
   }
 
   stop() {
-    // ... your code goes here
+    clearInterval(this.intervalId);
   }
 
   reset() {
-    // ... your code goes here
+    this.currentTime = 0;
   }
 
   split() {
-    // ... your code goes here
+    const minutes = this.computeTwoDigitNumber(this.getMinutes());
+    const seconds = this.computeTwoDigitNumber(this.getSeconds());
+    const milliseconds = this.computeTwoDigitNumber(this.getMilliseconds());
+    return `${minutes}:${seconds}:${milliseconds}`;
   }
+
+
+computeTwoDigitNumber(number) {
+  return number.toString().padStart(2, '0');
+}
 }
 
 // The following is required to make unit tests work.
 /* Environment setup. Do not modify the below code. */
 if (typeof module !== 'undefined') {
   module.exports = Chronometer;
 }
+
+
+

javascript/index.js

@@ -1,65 +1,89 @@
 const chronometer = new Chronometer();
 
-// get the buttons:
-const btnLeftElement = document.getElementById('btnLeft');
-const btnRightElement = document.getElementById('btnRight');
-
-// get the DOM elements that will serve us to display the time:
+// DOM elements
 const minDecElement = document.getElementById('minDec');
 const minUniElement = document.getElementById('minUni');
 const secDecElement = document.getElementById('secDec');
 const secUniElement = document.getElementById('secUni');
 const milDecElement = document.getElementById('milDec');
 const milUniElement = document.getElementById('milUni');
 const splitsElement = document.getElementById('splits');
+const btnLeftElement = document.getElementById('btnLeft');
+const btnRightElement = document.getElementById('btnRight');
 
 function printTime() {
-  // ... your code goes here
-}
+  const minutes = chronometer.computeTwoDigitNumber(chronometer.getMinutes());
+  const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds());
+  const milliseconds = chronometer.computeTwoDigitNumber(chronometer.getMilliseconds());
 
-function printMinutes() {
-  // ... your code goes here
-}
-
-function printSeconds() {
-  // ... your code goes here
-}
-
-// ==> BONUS
-function printMilliseconds() {
-  // ... your code goes here
+  minDecElement.textContent = minutes[0];
+  minUniElement.textContent = minutes[1];
+  secDecElement.textContent = seconds[0];
+  secUniElement.textContent = seconds[1];
+  milDecElement.textContent = milliseconds[0];
+  milUniElement.textContent = milliseconds[1];
 }
 
 function printSplit() {
-  // ... your code goes here
+  const li = document.createElement('li');
+  li.className = 'list-item';
+  li.textContent = chronometer.split();
+  splitsElement.appendChild(li);
 }
 
 function clearSplits() {
-  // ... your code goes here
+  splitsElement.innerHTML = '';
 }
 
 function setStopBtn() {
-  // ... your code goes here
+  btnLeftElement.textContent = 'STOP';
+  btnLeftElement.className = 'btn stop';
 }
 
 function setSplitBtn() {
-  // ... your code goes here
+  btnRightElement.textContent = 'SPLIT';
+  btnRightElement.className = 'btn split';
 }
 
 function setStartBtn() {
-  // ... your code goes here
+  btnLeftElement.textContent = 'START';
+  btnLeftElement.className = 'btn start';
 }
 
 function setResetBtn() {
-  // ... your code goes here
+  btnRightElement.textContent = 'RESET';
+  btnRightElement.className = 'btn reset';
+}
+
+function resetDisplay() {
+  minDecElement.textContent = '0';
+  minUniElement.textContent = '0';
+  secDecElement.textContent = '0';
+  secUniElement.textContent = '0';
+  milDecElement.textContent = '0';
+  milUniElement.textContent = '0';
 }
 
 // Start/Stop Button
 btnLeftElement.addEventListener('click', () => {
-  // ... your code goes here
+  if (btnLeftElement.className.includes('start')) {
+    chronometer.start(printTime);
+    setStopBtn();
+    setSplitBtn();
+  } else {
+    chronometer.stop();
+    setStartBtn();
+    setResetBtn();
+  }
 });
 
 // Reset/Split Button
 btnRightElement.addEventListener('click', () => {
-  // ... your code goes here
+  if (btnRightElement.className.includes('reset')) {
+    chronometer.reset();
+    clearSplits();
+    resetDisplay();
+  } else {
+    printSplit();
+  }
 });

styles/style.css

@@ -28,7 +28,7 @@ body {
   font-size: 80px;
   height: 210px;
   margin: 0 auto;
-  padding: 35px 0;
+  padding: 35px 20px;
   position: relative;
   text-align: center;
   width: 220px;
@@ -52,7 +52,9 @@ body {
 #milliseconds {
   font-size: 36px;
   position: absolute;
-  top: 20px;
+  margin-top: 40px;
+  margin-right: -130px;
+  letter-spacing: -5px;
 }
 
 .leash {
@@ -86,8 +88,9 @@ body {
   width: 20px;
 }
 
-.number {
+.number, .timer-colon {
   width:40px;
+  margin-top: -50px;
 }
 
 .btn {
@@ -123,4 +126,4 @@ body {
 }
 .btn.split {
   background: #0851ab;
-}
+}