Solución completa del ejercicio de cronómetro con manipulación del DOM y lógica en JavaScript

javascript/chronometer.js

@@ -1,34 +1,66 @@
 class Chronometer {
   constructor() {
-    // ... your code goes here
+    this.currentTime = 0;
+    this.milliSeconds = 0; //centesimas
+    this.intervalId = null;
   }
 
   start(callback) {
-    // ... your code goes here
+    this.intervalId = setInterval(() => {
+      this.milliSeconds += 1; // cada 10 ms se suma 1 centesima
+
+      if (this.milliSeconds === 100) {
+      this.currentTime += 1;
+      this.milliSeconds = 0;
+      }
+
+      if (callback) {
+        callback();
+      }
+  }, 10);
   }
 
+  // mejor hacerlo sin this. no guardas nada extra en el objeto.
   getMinutes() {
-    // ... your code goes here
+    return Math.floor(this.currentTime / 60);
+
   }
 
   getSeconds() {
-    // ... your code goes here
+    return this.currentTime % 60;
+
+  }
+
+  getMilliseconds() {
+    return this.milliSeconds;
   }
 
   computeTwoDigitNumber(value) {
-    // ... your code goes here
+    let valueString = "0" + value 
+
+    return valueString.slice(-2);
   }
 
   stop() {
-    // ... your code goes here
+    clearInterval(this.intervalId);
   }
 
   reset() {
-    // ... your code goes here
+    this.currentTime = 0;
+
+    document.getElementById("minDec").innerHTML = "0";
+    document.getElementById("minUni").innerHTML = "0";
+    document.getElementById("secDec").innerHTML = "0";
+    document.getElementById("secUni").innerHTML = "0";
+    milDecElement.innerHTML = "0";
+    milUniElement.innerHTML = "0";
   }
 
   split() {
-    // ... your code goes here
+    const mm = this.computeTwoDigitNumber(this.getMinutes())
+    const ss = this.computeTwoDigitNumber(this.getSeconds())
+    const cc = this.computeTwoDigitNumber(this.getMilliseconds())
+    return `${mm}:${ss}:${cc}`
   }
 }
 

javascript/index.js

@@ -4,6 +4,9 @@ const chronometer = new Chronometer();
 const btnLeftElement = document.getElementById('btnLeft');
 const btnRightElement = document.getElementById('btnRight');
 
+
+
+
 // get the DOM elements that will serve us to display the time:
 const minDecElement = document.getElementById('minDec');
 const minUniElement = document.getElementById('minUni');
@@ -13,21 +16,33 @@ const milDecElement = document.getElementById('milDec');
 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.innerHTML = minutes.slice(0, 1);
+  minUniElement.innerHTML = minutes.slice(1);
 }
 
 function printSeconds() {
-  // ... your code goes here
+  const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds())
+  secDecElement.innerHTML = seconds[0]
+  secUniElement.innerHTML = seconds[1]
+
 }
 
 // ==> BONUS
 function printMilliseconds() {
-  // ... your code goes here
+  const milliSeconds = chronometer.computeTwoDigitNumber(chronometer.getMilliseconds())
+  milDecElement.innerHTML = milliSeconds.slice(0, 1)
+  milUniElement.innerHTML = milliSeconds.slice(1)
+
 }
 
 function printSplit() {
@@ -47,19 +62,60 @@ function setSplitBtn() {
 }
 
 function setStartBtn() {
-  // ... your code goes here
+
 }
 
 function setResetBtn() {
   // ... your code goes here
 }
 
+
+//HAY QUE HACER UN toogle (alternar estados)
 // Start/Stop Button
 btnLeftElement.addEventListener('click', () => {
-  // ... your code goes here
-});
+  if (btnLeftElement.innerText === 'START') {
+    btnLeftElement.innerText = 'STOP';
+    btnRightElement.innerText = 'SPLIT';
+    btnLeftElement.className = "btn stop";
+    btnRightElement.className = 'btn split';
+    chronometer.start(printTime);
+
+  } else if (btnLeftElement.innerText === 'STOP') {
+    btnLeftElement.innerText = 'START';
+    btnRightElement.innerText = 'RESET';
+    btnLeftElement.className = "btn start";
+    btnRightElement.className = "btn reset";
+    chronometer.stop()
+  }
+
+
+  }
+);
 
 // Reset/Split Button
 btnRightElement.addEventListener('click', () => {
-  // ... your code goes here
-});
+  if (btnRightElement.innerText === "SPLIT") {
+    const tablaSplits = document.getElementById('splits'); //es mejor meterlos fuera de la funcion?
+    const newSplit = document.createElement('li');
+    tablaSplits.appendChild(newSplit);
+    newSplit.innerText = chronometer.split() 
+  }
+
+  else if (btnRightElement.innerText === "RESET") {
+    chronometer.reset()
+    const ilSplits = document.querySelectorAll("#splits li")
+    const ilSplitsArr = [...ilSplits]
+    for (let split of ilSplitsArr) {
+      split.remove();
+    };
+  }
+})
+
+
+
+
+
+
+
+
+