diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a13496..e1327ff 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,39 +1,39 @@ class Chronometer { constructor() { - // ... your code goes here + this.currentTime = 0; + this.intervalId = null; } 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 + computeTwoDigitNumber(num) { + return num < 10 ? `0${num}` : `${num}`; } 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..ee184c0 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,65 +1,39 @@ 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'); +const btnLeft = document.getElementById('btnLeft'); +const btnRight = document.getElementById('btnRight'); +const splitsList = 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 + const minutes = chronometer.computeTwoDigitNumber(chronometer.getMinutes()); + const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds()); + document.getElementById('time').innerHTML = `${minutes}:${seconds}`; +} + +btnLeft.addEventListener('click', () => { + if (btnLeft.classList.contains('start')) { + chronometer.start(printTime); + btnLeft.classList.replace('start', 'stop'); + btnLeft.innerHTML = 'STOP'; + btnRight.classList.replace('reset', 'split'); + btnRight.innerHTML = 'SPLIT'; + } else { + chronometer.stop(); + btnLeft.classList.replace('stop', 'start'); + btnLeft.innerHTML = 'START'; + btnRight.classList.replace('split', 'reset'); + btnRight.innerHTML = 'RESET'; + } }); -// Reset/Split Button -btnRightElement.addEventListener('click', () => { - // ... your code goes here +btnRight.addEventListener('click', () => { + if (btnRight.classList.contains('split')) { + const splitItem = document.createElement('li'); + splitItem.innerHTML = chronometer.split(); + splitItem.classList.add('list-item'); + splitsList.appendChild(splitItem); + } else { + chronometer.reset(); + document.getElementById('time').innerHTML = '00:00'; + splitsList.innerHTML = ''; // Clear all splits + } });