From be8697e7bd02dedc83c7864e715a00b5c0b0108d Mon Sep 17 00:00:00 2001
From: David Mejia <davidsebas1825@gmail.com>
Date: Tue, 10 Jun 2025 17:11:33 -0500
Subject: [PATCH] Done

---
 index.html                |  6 +--
 javascript/chronometer.js | 24 +++++++----
 javascript/index.js       | 85 +++++++++++++++++++++++++++++----------
 3 files changed, 81 insertions(+), 34 deletions(-)

diff --git a/index.html b/index.html
index 3415d73..673e891 100644
--- a/index.html
+++ b/index.html
@@ -19,13 +19,9 @@ <h3>Splits</h3>
       <div id="sphere">
         <span id="minDec" class="number">0</span>
         <span id="minUni" class="number">0</span>
-        <span>:</span>
+        <span id="dots">:</span>
         <span id="secDec" class="number">0</span>
         <span id="secUni" class="number">0</span>
-        <div id="milliseconds">
-          <span id="milDec">0</span>
-          <span id="milUni">0</span>
-        </div>
         <button id="btnLeft" class="btn start">START</button>
         <button id="btnRight" class="btn reset">RESET</button>
       </div>
diff --git a/javascript/chronometer.js b/javascript/chronometer.js
index 7a13496..37b503a 100644
--- a/javascript/chronometer.js
+++ b/javascript/chronometer.js
@@ -1,34 +1,42 @@
 class Chronometer {
   constructor() {
-    // ... your code goes here
+    this.currentTime = 0;
+    this.intervalId = null;
   }
 
   start(callback) {
-    // ... your code goes here
+    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 this.currentTime % 60;
   }
 
   computeTwoDigitNumber(value) {
-    // ... your code goes here
+    return value < 10 ? `0${value}` : `${value}`;
   }
 
   stop() {
-    // ... your code goes here
+    clearInterval(this.intervalId);
   }
 
   reset() {
-    // ... your code goes here
+    this.currentTime = 0;
   }
 
   split() {
-    // ... your code goes here
+    return `${this.computeTwoDigitNumber(
+      this.getMinutes()
+    )}:${this.computeTwoDigitNumber(this.getSeconds())}`;
   }
 }
 
diff --git a/javascript/index.js b/javascript/index.js
index fb3a43a..c787e89 100644
--- a/javascript/index.js
+++ b/javascript/index.js
@@ -9,57 +9,100 @@ 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');
 
 function printTime() {
-  // ... your code goes here
+  printMinutes()
+  printSeconds()
 }
 
+//Print minuts & seconds
 function printMinutes() {
-  // ... your code goes here
+
+  const minutes = chronometer.getMinutes()
+  const minutesValue = chronometer.computeTwoDigitNumber(minutes)
+
+  minDecElement.innerHTML = minutesValue[0]
+  minUniElement.innerHTML = minutesValue[1];
 }
 
 function printSeconds() {
-  // ... your code goes here
-}
 
-// ==> BONUS
-function printMilliseconds() {
-  // ... your code goes here
+  const seconds = chronometer.getSeconds();
+  const secondsValue = chronometer.computeTwoDigitNumber(seconds);
+
+  secDecElement.innerHTML = secondsValue[0];
+  secUniElement.innerHTML = secondsValue[1];
 }
 
+//Display splits by creatin a li element with the value of split()
 function printSplit() {
-  // ... your code goes here
+  //3. insert the li split inside the ol
+
+  const split = document.createElement('li')
+  split.innerText = chronometer.split()
+
+  splitsElement.appendChild(split)
+
+
 }
 
+//Clear the ol element that store splits
 function clearSplits() {
-  // ... your code goes here
-}
+  splitsElement.innerHTML = '';
 
-function setStopBtn() {
-  // ... your code goes here
 }
 
-function setSplitBtn() {
-  // ... your code goes here
+function setStartBtn() {
+  btnLeftElement.className = "btn stop"
+  btnLeftElement.innerText = "STOP"
+  btnRightElement.className = "btn split"
+  btnRightElement.innerText="SPLIT"
 }
 
-function setStartBtn() {
-  // ... your code goes here
+function setStopBtn() {
+  btnLeftElement.className = 'btn start';
+  btnLeftElement.innerText = 'START';
+  btnRightElement.className = 'btn reset';
+  btnRightElement.innerText = 'RESET';
 }
 
+
 function setResetBtn() {
-  // ... your code goes here
+  clearSplits()
+  const spans = document.querySelectorAll('#sphere span:not(#dots)');
+  spans.forEach((span) => {
+    span.innerText = '0';
+  });
 }
 
+function setSplitBtn() {
+  printSplit()
+}
+
+
+
 // Start/Stop Button
 btnLeftElement.addEventListener('click', () => {
-  // ... your code goes here
+  if(btnLeftElement.classList.contains('start')){
+    setStartBtn()
+    chronometer.start(printTime);
+  }
+  else if (btnLeftElement.classList.contains('stop')){
+    setStopBtn()
+    chronometer.stop(printTime);
+  }
 });
 
 // Reset/Split Button
 btnRightElement.addEventListener('click', () => {
-  // ... your code goes here
+  if(btnRightElement.classList.contains('reset')){
+    setResetBtn()
+    chronometer.reset();
+  }
+  else if(btnRightElement.classList.contains('split')){
+    setSplitBtn()
+  }
 });
+