diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a13496..bf539f1 100644 --- a/javascript/chronometer.js +++ b/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; +} diff --git a/javascript/index.js b/javascript/index.js index fb3a43a..5d30929 100644 --- a/javascript/index.js +++ b/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(); + } +});