diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a13496..47da365 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,34 +1,59 @@ class Chronometer { constructor() { - // ... your code goes here + this.currentTime = 0; + this.intervalId = null; + this.milliseconds = 0; } start(callback) { - // ... your code goes here + this.intervalId = setInterval(() => { + this.milliseconds++; + if (this.milliseconds === 1000) { + this.currentTime++; + this.milliseconds = 0; + } + if (callback) { + callback(); + } + }, 1); } getMinutes() { - // ... your code goes here + return Math.floor(this.currentTime / 60); } getSeconds() { - // ... your code goes here + return Math.floor((this.currentTime % 60) + (this.milliseconds / 1000)); } + getMilliseconds() { + + return this.milliseconds ; + } + + computeTwoDigitNumber(value) { - // ... your code goes here + if (value < 10) { + return `0${value}`; + } else { + return `${value}`; + } } stop() { - // ... your code goes here + clearInterval(this.intervalId); } reset() { - // ... your code goes here + this.currentTime = 0; + this.milliseconds = 0; } split() { - // ... your code goes here + const minutes = this.computeTwoDigitNumber(this.getMinutes()); + const seconds = this.computeTwoDigitNumber(this.getSeconds()); + const milliseconds = this.computeTwoDigitNumber(this.getMilliseconds()); + return `${minutes}:${seconds}.${milliseconds}`; } } diff --git a/javascript/index.js b/javascript/index.js index fb3a43a..751caa0 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -13,53 +13,100 @@ const milDecElement = document.getElementById('milDec'); const milUniElement = document.getElementById('milUni'); const splitsElement = document.getElementById('splits'); +function computeTwoDigitNumber(number) { + return number.toString().padStart(2, '0'); +} function printTime() { - // ... your code goes here + printMinutes(); + printSeconds(); + printMilliseconds(); } function printMinutes() { - // ... your code goes here + const minutes = chronometer.getMinutes(); + minDecElement.innerText = computeTwoDigitNumber(minutes)[0]; + minUniElement.innerText = computeTwoDigitNumber(minutes)[1]; } function printSeconds() { - // ... your code goes here + const seconds = chronometer.getSeconds(); + secDecElement.innerText = computeTwoDigitNumber(seconds)[0]; + secUniElement.innerText = computeTwoDigitNumber(seconds)[1]; + } // ==> BONUS function printMilliseconds() { - // ... your code goes here + const milliseconds = chronometer.getMilliseconds(); + milDecElement.innerText = computeTwoDigitNumber(milliseconds)[0]; + milUniElement.innerText = computeTwoDigitNumber(milliseconds)[1]; + } function printSplit() { - // ... your code goes here + const newSplit = document.createElement('li'); + newSplit.className = 'list-item'; + newSplit.innerHTML = chronometer.split(); // Get formatted split time + splitsElement.appendChild(newSplit); } function clearSplits() { - // ... your code goes here + splitsElement.innerHTML = ''; } function setStopBtn() { - // ... your code goes here + btnLeftElement.innerText = 'STOP'; + btnLeftElement.className = 'btn stop'; + btnRightElement.innerText = 'SPLIT'; + btnRightElement.className = 'btn split'; + chronometer.start(printTime); } function setSplitBtn() { - // ... your code goes here + + chronometer.split(); + } function setStartBtn() { - // ... your code goes here + btnLeftElement.innerText = 'START'; + btnLeftElement.className = 'btn start'; + btnRightElement.innerText = 'RESET'; + btnRightElement.className = 'btn reset'; + chronometer.stop(); } function setResetBtn() { - // ... your code goes here + minDecElement.innerText = '0'; + minUniElement.innerText = '0'; + secDecElement.innerText = '0'; + secUniElement.innerText = '0'; + milDecElement.innerText = '0'; + milUniElement.innerText = '0'; + chronometer.reset(); } // Start/Stop Button btnLeftElement.addEventListener('click', () => { - // ... your code goes here + if (btnLeftElement.classList.contains('start')) { + + setStopBtn(); + + } else { + + setStartBtn(); + + } }); // Reset/Split Button btnRightElement.addEventListener('click', () => { - // ... your code goes here + if (btnRightElement.classList.contains('split')) { + printSplit(); + setSplitBtn(); + } else { + clearSplits(); + + setResetBtn(); + } });