diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a1349680..5cfe2bb4c 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,34 +1,42 @@ 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 + 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 + const minutes = this.computeTwoDigitNumber(this.getMinutes()); + const seconds = this.computeTwoDigitNumber(this.getSeconds()); + return `${minutes}:${seconds}`; } } diff --git a/javascript/index.js b/javascript/index.js index fb3a43ab4..175db86b2 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,28 +1,33 @@ const chronometer = new Chronometer(); // get the buttons: -const btnLeftElement = document.getElementById('btnLeft'); -const btnRightElement = document.getElementById('btnRight'); +const btnLeft = document.getElementById('btnLeft'); +const btnRight = 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 minDec = document.getElementById('minDec'); +const minUni = document.getElementById('minUni'); +const secDec = document.getElementById('secDec'); +const secUni = 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()); + minDec.innerText = minutes[0]; + minUni.innerText = minutes[1]; } function printSeconds() { - // ... your code goes here + const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds()); + secDec.innerText = seconds[0]; + secUni.innerText = seconds[1]; } // ==> BONUS @@ -31,35 +36,52 @@ function printMilliseconds() { } function printSplit() { - // ... your code goes here -} + const splitTime = chronometer.split(); + const splits = document.getElementById('splits'); + const li = document.createElement('li'); + li.innerText = splitTime; + splits.appendChild(li);} function clearSplits() { - // ... your code goes here -} - -function setStopBtn() { - // ... your code goes here -} - -function setSplitBtn() { - // ... your code goes here + document.getElementById('splits').innerHTML = ''; } function setStartBtn() { - // ... your code goes here + btnLeft.innerText = 'STOP'; + btnLeft.className = 'btn stop'; + btnRight.innerText = 'SPLIT'; + btnRight.className = 'btn split'; } -function setResetBtn() { - // ... your code goes here +function setStopBtn() { + btnLeft.innerText = 'START'; + btnLeft.className = 'btn start'; + btnRight.innerText = 'RESET'; + btnRight.className = 'btn reset'; } // Start/Stop Button -btnLeftElement.addEventListener('click', () => { - // ... your code goes here +btnLeft.addEventListener('click', () => { + if (btnLeft.classList.contains('start')) { + // Start + chronometer.start(printTime); + setStartBtn(); + } else { + // Stop + chronometer.stop(); + setStopBtn(); + } }); // Reset/Split Button -btnRightElement.addEventListener('click', () => { - // ... your code goes here -}); +btnRight.addEventListener('click', () => { + if (btnRight.classList.contains('reset')) { + // Reset + chronometer.reset(); + printTime(); + clearSplits(); + } else { + // Split + printSplit(); + } +}); \ No newline at end of file diff --git a/package.json b/package.json index 879644e13..c4d7c7ac3 100644 --- a/package.json +++ b/package.json @@ -33,5 +33,8 @@ "prettier": { "singleQuote": true, "trailingComma": "none" + }, + "dependencies": { + "lab-javascript-chronometer": "file:" } }