diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a13496..76f604e 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,37 +1,47 @@ class Chronometer { constructor() { - // ... your code goes here + this.currentTime = 0; + this.intervalId = null; } start(callback) { - // ... your code goes here + this.intervalId = setInterval(() => { + this.currentTime += 1; + 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 < 10 ? `0${value}` : `${value}`; } stop() { - // ... your code goes here + clearInterval(this.intervalId); + this.intervalId = null; } reset() { - // ... your code goes here + this.currentTime = 0; } split() { - // ... your code goes here + const minutes = this.computeTwoDigitNumber(this.getMinutes()); + const seconds = this.computeTwoDigitNumber(this.getSeconds()); + return `${minutes}:${seconds}`; } } + // The following is required to make unit tests work. /* Environment setup. Do not modify the below code. */ if (typeof module !== 'undefined') { diff --git a/javascript/index.js b/javascript/index.js index fb3a43a..067ba99 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,65 +1,81 @@ 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 + const minutes = chronometer.computeTwoDigitNumber(chronometer.getMinutes()); + minDecElement.innerHTML = minutes[0]; + minUniElement.innerHTML = minutes[1]; } function printSeconds() { - // ... your code goes here -} - -// ==> BONUS -function printMilliseconds() { - // ... your code goes here + const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds()); + secDecElement.innerHTML = seconds[0]; + secUniElement.innerHTML = seconds[1]; } 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 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 + btnRightElement.innerHTML = 'SPLIT'; + btnRightElement.className = 'btn split'; } function setStartBtn() { - // ... your code goes here + btnLeftElement.innerHTML = 'START'; + btnLeftElement.className = 'btn start'; } function setResetBtn() { - // ... your code goes here + btnRightElement.innerHTML = 'RESET'; + btnRightElement.className = 'btn reset'; } -// Start/Stop Button btnLeftElement.addEventListener('click', () => { - // ... your code goes here + 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 + if (btnRightElement.classList.contains('reset')) { + chronometer.reset(); + printTime(); + clearSplits(); + } else { + printSplit(); + } });