web-dev-open · sosina14 · May 2, 2025
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>IronChronometer</title>
     <link rel="stylesheet" href="styles/style.css" />
+
   </head>
   <body>
     <section id="splits-container">

diff --git a/javascript/chronometer.js b/javascript/chronometer.js
@@ -1,34 +1,63 @@
 class Chronometer {
   constructor() {
     // ... your code goes here
+    this.currentTime = 0; // in seconds
+    this.intervalId = null; // to store the interval ID 
+    this.isRunning = false; // to track if the chronometer is running
+
   }
 
   start(callback) {
     // ... your code goes here
+    this.isRunning = true; // set the running state to true
+    this.intervalId = setInterval(() => {
+      this.currentTime++; // increment the current time by 1 second
+      if (callback) {
+        callback(); // call the callback function if provided
+      }
+    }, 1000); // set the interval to 1000 milliseconds (1 second)
   }
 
   getMinutes() {
     // ... your code goes here
+    return Math.floor(this.currentTime / 60); // calculate minutes by dividing current time by 60 and rounding down
+
   }
 
   getSeconds() {
     // ... your code goes here
+    return this.currentTime % 60; // calculate seconds by taking the remainder of current time divided by 60
   }
 
   computeTwoDigitNumber(value) {
     // ... your code goes here
+    if (value < 10) {
+      return `0${value}`; // if value is less than 10, prepend a '0'
+    } else {
+      return `${value}`; // otherwise, return the value as a string
+    }
   }
 
   stop() {
     // ... your code goes here
+    this.isRunning = false; // set the running state to false
+    clearInterval(this.intervalId); // clear the interval to stop the chronometer
+    this.intervalId = null; // reset the interval ID to null
+
   }
 
   reset() {
     // ... your code goes here
+    this.currentTime = 0; // reset the current time to 0
+    this.isRunning = false; // set the running state to false
+
   }
 
   split() {
     // ... your code goes here
+    const minutes = this.getMinutes(); // get the current minutes
+    const seconds = this.getSeconds(); // get the current seconds
+    const twoDigitMinutes = this.computeTwoDigitNumber(minutes); // format minutes to two digits
   }
 }
 

diff --git a/javascript/index.js b/javascript/index.js
@@ -1,10 +1,10 @@
 const chronometer = new Chronometer();
 
-// get the buttons:
+// 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:
+// Get the DOM elements to display time:
 const minDecElement = document.getElementById('minDec');
 const minUniElement = document.getElementById('minUni');
 const secDecElement = document.getElementById('secDec');
@@ -14,52 +14,85 @@ const milUniElement = document.getElementById('milUni');
 const splitsElement = document.getElementById('splits');
 
 function printTime() {
-  // ... your code goes here
+  printMinutes();
+  printSeconds();
+  // Optional if you're doing milliseconds
+  // printMilliseconds();
 }
 
 function printMinutes() {
-  // ... your code goes here
+  const minutes = chronometer.getMinutes();
+  const twoDigitMinutes = chronometer.computeTwoDigitNumber(minutes);
+  minDecElement.innerText = twoDigitMinutes[0];
+  minUniElement.innerText = twoDigitMinutes[1];
 }
 
 function printSeconds() {
-  // ... your code goes here
+  const seconds = chronometer.getSeconds();
+  const twoDigitSeconds = chronometer.computeTwoDigitNumber(seconds);
+  secDecElement.innerText = twoDigitSeconds[0];
+  secUniElement.innerText = twoDigitSeconds[1];
 }
 
-// ==> BONUS
+// BONUS: Milliseconds (only if you're doing it)
 function printMilliseconds() {
-  // ... your code goes here
+  const milliseconds = chronometer.getMilliseconds(); // Make sure this method exists
+  const twoDigitMilliseconds = chronometer.computeTwoDigitNumber(milliseconds);
+  milDecElement.innerText = twoDigitMilliseconds[0];
+  milUniElement.innerText = twoDigitMilliseconds[1];
 }
 
 function printSplit() {
-  // ... your code goes here
+  const splitTime = chronometer.split();
+  const splitElement = document.createElement('li');
+  splitElement.innerText = splitTime;
+  splitsElement.appendChild(splitElement);
 }
 
 function clearSplits() {
-  // ... your code goes here
+  splitsElement.innerHTML = '';
 }
 
 function setStopBtn() {
-  // ... your code goes here
+  btnLeftElement.className = 'btn stop';
+  btnLeftElement.innerText = 'STOP';
 }
 
 function setSplitBtn() {
-  // ... your code goes here
+  btnRightElement.className = 'btn split';
+  btnRightElement.innerText = 'SPLIT';
 }
 
 function setStartBtn() {
-  // ... your code goes here
+  btnLeftElement.className = 'btn start';
+  btnLeftElement.innerText = 'START';
 }
 
 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')) {
+    chronometer.start(printTime);
+    setStopBtn();
+    setSplitBtn();
+  } else {
+    chronometer.stop();
+    setStartBtn();
+    setResetBtn();
+  }
 });
 
 // Reset/Split Button
 btnRightElement.addEventListener('click', () => {
-  // ... your code goes here
+  if (btnRightElement.classList.contains('reset')) {
+    chronometer.reset();
+    clearSplits();
+    printTime(); // Resets the display too
+  } else {
+    printSplit();
+  }
 });