Clever Niwagaba - Internship

javascript/chronometer.js

@@ -1,39 +1,53 @@
-class Chronometer {
-  constructor() {
-    // ... your code goes here
-  }
-
-  start(callback) {
-    // ... your code goes here
-  }
-
-  getMinutes() {
-    // ... your code goes here
-  }
-
-  getSeconds() {
-    // ... your code goes here
-  }
-
-  computeTwoDigitNumber(value) {
-    // ... your code goes here
-  }
-
-  stop() {
-    // ... your code goes here
-  }
-
-  reset() {
-    // ... your code goes here
-  }
-
-  split() {
-    // ... your code goes here
-  }
-}
-
-// The following is required to make unit tests work.
-/* Environment setup. Do not modify the below code. */
-if (typeof module !== 'undefined') {
-  module.exports = Chronometer;
-}
+class Chronometer {
+  constructor() {
+    // ... your code goes here
+    this.currentTime = 0;
+    this.intervalID = 0;
+  }
+
+  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.toString().padStart(2,'0');
+  }
+
+  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())}`;
+  }
+}
+
+// The following is required to make unit tests work.
+/* Environment setup. Do not modify the below code. */
+if (typeof module !== 'undefined') {
+  module.exports = Chronometer;
+}

javascript/index.js

@@ -1,65 +1,117 @@
-const chronometer = new Chronometer();
-
-// 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:
-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
-}
-
-function printMinutes() {
-  // ... your code goes here
-}
-
-function printSeconds() {
-  // ... your code goes here
-}
-
-// ==> BONUS
-function printMilliseconds() {
-  // ... your code goes here
-}
-
-function printSplit() {
-  // ... your code goes here
-}
-
-function clearSplits() {
-  // ... your code goes here
-}
-
-function setStopBtn() {
-  // ... your code goes here
-}
-
-function setSplitBtn() {
-  // ... your code goes here
-}
-
-function setStartBtn() {
-  // ... your code goes here
-}
-
-function setResetBtn() {
-  // ... your code goes here
-}
-
-// Start/Stop Button
-btnLeftElement.addEventListener('click', () => {
-  // ... your code goes here
-});
-
-// Reset/Split Button
-btnRightElement.addEventListener('click', () => {
-  // ... your code goes here
-});
+import Chronometer from "./chronometer.js";
+const chronometer = new Chronometer();
+
+// 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:
+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();
+}
+
+function printMinutes() {
+  // ... your code goes here
+  let min = chronometer.computeTwoDigitNumber(chronometer.getMinutes());
+  minDecElement.innerHTML = min[0];
+  minUniElement.innerHTML = min[1];
+}
+
+function printSeconds() {
+  // ... your code goes here
+  let sec = chronometer.computeTwoDigitNumber(chronometer.getSeconds());
+  secDecElementDecElement.innerHTML = sec[0];
+  secUniElementUniElement.innerHTML = sec[1];
+}
+
+// ==> BONUS
+function printMilliseconds() {
+  // ... your code goes here
+  let millisec = chronometer.computeTwoDigitNumber(printSeconds() % 1000);
+  milDecElement.innerHTML = millisec[0];
+  milUniElement = millisec[1];
+}
+
+function printSplit() {
+  // ... your code goes here
+  const TimeofSplit = chronometer.split();
+  const newSplit = document.createElement('li');
+
+  newSplit.innerHTML = TimeofSplit;
+  splitsElement.appendChild(newSplit);
+}
+
+function clearSplits() {
+  // ... your code goes here
+  splitsElement.innerHTML = '';
+}
+
+function setStopBtn() {
+  // ... your code goes here
+  btnLeftElement.innerHTML = 'STOP';
+  btnLeftElement.className = 'btn stop';
+}
+
+function setSplitBtn() {
+  // ... your code goes here
+  if (btnLeftElement.className.includes('stop')) {
+    btnRightElement.innerHTML = 'SPLIT';
+    btnRightElement.className = 'btn split';
+  } else {
+    btnRightElement.innerHTML = 'RESET';
+    btnRightElement.className = 'btn reset';
+  }
+}
+
+function setStartBtn() {
+  // ... your code goes here
+  btnLeftElement.innerHTML = 'START';
+  btnLeftElement.className = 'btn start';
+}
+
+function setResetBtn() {
+  // ... your code goes here
+  if (btnLeftElement.className.includes('stop')) {
+    btnRightElement.innerHTML = 'SPLIT';
+    btnRightElement.className = 'btn split';
+  } else {
+    btnRightElement.innerHTML = 'RESET';
+    btnRightElement.className = 'btn reset';
+  }
+}
+
+// Start/Stop Button
+btnLeftElement.addEventListener('click', () => {
+  // ... your code goes here
+  if (btnLeftElement.className.includes('start')) {
+    setStopBtn();
+    setSplitBtn();
+    chronometer.start(printTime);
+  } else {
+    setStartBtn();
+    setResetBtn();
+    chronometer.stop();
+  }
+});
+
+// Reset/Split Button
+btnRightElement.addEventListener('click', () => {
+  // ... your code goes here
+  if (btnRightElement.className.includes('reset')) {
+    chronometer.reset();
+    printTime();
+    clearSplits();
+  } else {
+    printSplit();
+  }
+});