lab-chronometer done

index.html

@@ -22,10 +22,10 @@ <h3>Splits</h3>
         <span>:</span>
         <span id="secDec" class="number">0</span>
         <span id="secUni" class="number">0</span>
-        <div id="milliseconds">
+        <!-- <div id="milliseconds">
           <span id="milDec">0</span>
           <span id="milUni">0</span>
-        </div>
+        </div> -->
         <button id="btnLeft" class="btn start">START</button>
         <button id="btnRight" class="btn reset">RESET</button>
       </div>

javascript/chronometer.js

@@ -1,34 +1,80 @@
-class Chronometer {
-  constructor() {
-    // ... your code goes here
+class Chronometer
+{
+  constructor()
+  {
+    this.currentTime = 0;
+    this.intervalId = null;
   }
 
-  start(callback) {
-    // ... your code goes here
+  start(callback)
+  {  
+    this.intervalId = setInterval(() => {
+      this.currentTime++;
+      if (callback) callback();
+    } , 1000);
   }
+
+  getMinutes()
+  {
+    let minutes = 0;
 
-  getMinutes() {
-    // ... your code goes here
+    if (typeof this.currentTime !== 'number' || isNaN(this.currentTime)) {
+      throw new Error('Invalid currentTime value');
+    }
+    minutes = Math.floor(this.currentTime / 60);
+
+    return (minutes);
   }
 
-  getSeconds() {
-    // ... your code goes here
+  getSeconds()
+  {
+    let seconds = 0;
+
+    if (typeof this.currentTime !== 'number' || isNaN(this.currentTime)) {
+      throw new Error('Invalid currentTime value');
+    }
+    seconds = Math.floor(this.currentTime % 60);
+
+    return (seconds);
   }
 
-  computeTwoDigitNumber(value) {
-    // ... your code goes here
+  // getMiliSeconds()
+  // {
+  //   let miliSeconds = 0;
+
+  //   if (typeof this.currentTime !== 'number' || isNaN(this.currentTime)) {
+  //     throw new Error('Invalid currentTime value');
+  //   }
+
+  //   miliSeconds = Math.floor(this.currentTime % 100);
+
+  //   return (miliSeconds);
+  // }
+
+  computeTwoDigitNumber(value)
+  {
+    if (typeof value !== 'number')
+      throw new Error('Invalid type of value');
+
+    return (('0' + value).slice(-2));
   }
 
-  stop() {
-    // ... your code goes here
+  stop()
+  {
+    clearInterval(this.intervalId);
   }
 
-  reset() {
-    // ... your code goes here
+  reset() 
+  {
+    this.currentTime = 0;
   }
 
-  split() {
-    // ... your code goes here
+  split()
+  {
+    const minutes = this.computeTwoDigitNumber(this.getMinutes());
+    const seconds = this.computeTwoDigitNumber(this.getSeconds());
+
+    return (`${minutes}:${seconds}`);
   }
 }
 

javascript/index.js

@@ -9,57 +9,104 @@ 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 milDecElement = document.getElementById('milDec');
+// const milUniElement = document.getElementById('milUni');
 const splitsElement = document.getElementById('splits');
 
-function printTime() {
-  // ... your code goes here
+function printTime()
+{
+  printMinutes();
+  printSeconds();
 }
 
-function printMinutes() {
-  // ... your code goes here
+function printMinutes()
+{
+  const minutes = chronometer.computeTwoDigitNumber(chronometer.getMinutes());
+  minDecElement.textContent = minutes[0];
+  minUniElement.textContent = minutes[1];
 }
 
-function printSeconds() {
-  // ... your code goes here
+function printSeconds()
+{
+  const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds());
+  secDecElement.textContent = seconds[0];
+  secUniElement.textContent = seconds[1];
 }
 
 // ==> BONUS
-function printMilliseconds() {
-  // ... your code goes here
+function printMilliseconds()
+{
+  const miliSeconds = chronometer.computeTwoDigitNumber(chronometer.getmiliSeconds());
+    milDecElement.textContent = miliSeconds[0];
+    milUniElement.textContent = miliSeconds[1];
 }
 
-function printSplit() {
-  // ... your code goes here
+function printSplit()
+{
+  const splitTime = chronometer.split();
+  const newLi = document.createElement('li');
+  newLi.textContent = splitTime;
+  splitsElement.appendChild(newLi); 
 }
 
-function clearSplits() {
-  // ... your code goes here
+function clearSplits()
+{
+  splitsElement.innerHTML = '';
 }
 
-function setStopBtn() {
-  // ... your code goes here
+function setStopBtn()
+{
+  btnLeftElement.textContent = 'STOP';
+  btnLeftElement.className = 'btn stop';
 }
 
-function setSplitBtn() {
-  // ... your code goes here
+function setSplitBtn()
+{
+  btnRightElement.textContent = 'SPLIT';
+  btnRightElement.className = 'btn split';
 }
 
-function setStartBtn() {
-  // ... your code goes here
+function setStartBtn()
+{
+  btnLeftElement.textContent = 'START';
+  btnLeftElement.className = 'btn start';
 }
 
-function setResetBtn() {
-  // ... your code goes here
+function setResetBtn()
+{
+  btnRightElement.textContent = 'RESET';
+  btnRightElement.className = 'btn reset';
+
+  document.getElementById("minDec").textContent = '0';
+  document.getElementById("minUni").textContent = '0';
+  document.getElementById("secDec").textContent = '0';
+  document.getElementById("secUni").textContent = '0';
+  // document.getElementById("milDec").textContent = '0';
+  // document.getElementById("milUni").textContent = '0';
 }
 
 // Start/Stop Button
-btnLeftElement.addEventListener('click', () => {
-  // ... your code goes here
+btnLeftElement.addEventListener('click', () =>
+{
+  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
+btnRightElement.addEventListener('click', () =>
+{
+  if (btnRightElement.classList.contains('reset')) {
+    chronometer.reset();
+    setResetBtn();
+    clearSplits();
+  } else {
+    printSplit();
+  }
 });