diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a1349680..435a4a451 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,34 +1,46 @@ 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(); + }, 10); } getMinutes() { - // ... your code goes here + return Math.floor(this.currentTime / 6000); } getSeconds() { - // ... your code goes here + return Math.floor((this.currentTime / 100) % 60); + } + + getMilliseconds() { + return this.currentTime % 100; } 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()); + const milliseconds = this.computeTwoDigitNumber(this.getMilliseconds()); + return `${minutes}:${seconds}:${milliseconds}`; } } diff --git a/javascript/index.js b/javascript/index.js index fb3a43ab4..a6851d52a 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -14,52 +14,87 @@ const milUniElement = document.getElementById('milUni'); const splitsElement = document.getElementById('splits'); function printTime() { - // ... your code goes here + printMinutes(); + printSeconds(); + printMilliseconds(); } function printMinutes() { - // ... your code goes here + const minutes = chronometer.computeTwoDigitNumber(chronometer.getMinutes()); + minDec.innerHTML = minutes[0]; + minUni.innerHTML = minutes[1]; } function printSeconds() { - // ... your code goes here + const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds()); + secDec.innerHTML = seconds[0]; + secUni.innerHTML = seconds[1]; } // ==> BONUS function printMilliseconds() { - // ... your code goes here + const milliseconds = chronometer.computeTwoDigitNumber(chronometer.getMilliseconds()); + milDecElement.innerHTML = milliseconds[0]; + milUniElement.innerHTML = milliseconds[1]; } function printSplit() { - // ... your code goes here + const splitTime = chronometer.split(); + const li = document.createElement('li'); + li.className = 'list-item'; + li.innerText = splitTime; + splitsElement.appendChild(li); } function clearSplits() { - // ... your code goes here + splitsElement.innerHTML = ''; + printTime(); } 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')) { + // Start the chronometer + chronometer.start(printTime); // Pass printTime to update the display every interval + setStopBtn(); // Change the button to "STOP" + setSplitBtn(); // Change the right button to "SPLIT" + } else { + // Stop the chronometer + chronometer.stop(); // Stop the interval + setStartBtn(); // Change the button to "START" + setResetBtn(); // Change the right button to "RESET" + } }); // Reset/Split Button btnRightElement.addEventListener('click', () => { - // ... your code goes here + if (btnRightElement.classList.contains('reset')) { + // Reset the chronometer + chronometer.reset(); + clearSplits(); + printTime(); + } else if (btnRightElement.classList.contains('split')) { + // Record a split time + printSplit(); + } }); diff --git a/styles/style.css b/styles/style.css index 695d4bfad..6805d1335 100644 --- a/styles/style.css +++ b/styles/style.css @@ -52,7 +52,8 @@ body { #milliseconds { font-size: 36px; position: absolute; - top: 20px; + top: 10px; + right: 20px; } .leash { @@ -124,3 +125,9 @@ body { .btn.split { background: #0851ab; } + +.list-item { + font-size: 1.2rem; + color: #333; + margin: 5px 0; +} \ No newline at end of file