Solved Lab

javascript/chronometer.js

@@ -1,34 +1,48 @@
 class Chronometer {
   constructor() {
-    // ... your code goes here
+    // Initialize properties
+    this.currentTime = 0;
+    this.intervalId = null;
   }
 
   start(callback) {
-    // ... your code goes here
+    // Start the interval and increment time every second
+    this.intervalId = setInterval(() => {
+      this.currentTime++;
+      if (callback) callback(); // Execute callback if provided
+    }, 1000);
   }
 
   getMinutes() {
-    // ... your code goes here
+    // Calculate whole minutes passed
+    return Math.floor(this.currentTime / 60);
   }
 
   getSeconds() {
-    // ... your code goes here
+    // Get the remainder seconds after the last full minute
+    return this.currentTime % 60;
   }
 
   computeTwoDigitNumber(value) {
-    // ... your code goes here
+    // Ensure the value is two digits, padding with a leading 0 if needed
+    return value.toString().padStart(2, '0');
   }
 
   stop() {
-    // ... your code goes here
+    // Stop the interval using the stored intervalId
+    clearInterval(this.intervalId);
   }
 
   reset() {
-    // ... your code goes here
+    // Reset the current time to 0
+    this.currentTime = 0;
   }
 
   split() {
-    // ... your code goes here
+    // Get the formatted time in mm:ss format
+    const minutes = this.computeTwoDigitNumber(this.getMinutes());
+    const seconds = this.computeTwoDigitNumber(this.getSeconds());
+    return `${minutes}:${seconds}`;
   }
 }
 

javascript/index.js

@@ -9,20 +9,26 @@ 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 to print the full time (minutes and seconds)
 function printTime() {
-  // ... your code goes here
+  printMinutes();
+  printSeconds();
 }
 
+// Function to print minutes
 function printMinutes() {
-  // ... your code goes here
+  const minutes = chronometer.computeTwoDigitNumber(chronometer.getMinutes());
+  minDecElement.innerHTML = minutes[0];
+  minUniElement.innerHTML = minutes[1];
 }
 
+// Function to print seconds
 function printSeconds() {
-  // ... your code goes here
+  const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds());
+  secDecElement.innerHTML = seconds[0];
+  secUniElement.innerHTML = seconds[1];
 }
 
 // ==> BONUS
@@ -31,35 +37,62 @@ function printMilliseconds() {
 }
 
 function printSplit() {
-  // ... your code goes here
+  const splitTime = chronometer.split();
+  const li = document.createElement('li');
+  li.className = 'list-item';
+  li.innerHTML = splitTime;
+  splitsElement.appendChild(li);
 }
 
+// Function to clear split times
 function clearSplits() {
-  // ... your code goes here
+  splitsElement.innerHTML = ''; // Remove all splits
 }
 
+// Function to toggle the Start button to Stop
 function setStopBtn() {
-  // ... your code goes here
+  btnLeftElement.className = 'btn stop';
+  btnLeftElement.innerHTML = 'STOP';
 }
 
-function setSplitBtn() {
-  // ... your code goes here
+// Function to toggle the Stop button to Start
+function setStartBtn() {
+  btnLeftElement.className = 'btn start';
+  btnLeftElement.innerHTML = 'START';
 }
 
-function setStartBtn() {
-  // ... your code goes here
+// Function to toggle the Reset button to Split
+function setSplitBtn() {
+  btnRightElement.className = 'btn split';
+  btnRightElement.innerHTML = 'SPLIT';
 }
 
+// Function to toggle the Split button to Reset
 function setResetBtn() {
-  // ... your code goes here
+  btnRightElement.className = 'btn reset';
+  btnRightElement.innerHTML = 'RESET';
 }
 
-// Start/Stop Button
+// Event listener for Start/Stop button
 btnLeftElement.addEventListener('click', () => {
-  // ... your code goes here
+  if (btnLeftElement.classList.contains('start')) {
+    chronometer.start(printTime); // Start the chronometer and update the time
+    setStopBtn(); // Change Start to Stop
+    setSplitBtn(); // Change Reset to Split
+  } else {
+    chronometer.stop(); // Stop the chronometer
+    setStartBtn(); // Change Stop to Start
+    setResetBtn(); // Change Split to Reset
+  }
 });
 
-// Reset/Split Button
+// Event listener for Reset/Split button
 btnRightElement.addEventListener('click', () => {
-  // ... your code goes here
-});
+  if (btnRightElement.classList.contains('reset')) {
+    chronometer.reset(); // Reset the chronometer
+    printTime(); // Update time display to 00:00
+    clearSplits(); // Clear all splits
+  } else {
+    printSplit(); // Record and display the split time
+  }
+});