diff --git a/index.html b/index.html index 3415d73..1138298 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@

Splits

- - + + diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a13496..98d0172 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,34 +1,52 @@ class Chronometer { constructor() { - // ... your code goes here + this.currentTime = 0; + this.intervalId = null; } start(callback) { - // ... your code goes here + if (this.intervalId) return; + + 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; + } + + getMilliseconds() { + return this.currentTime % 100; } computeTwoDigitNumber(value) { - // ... your code goes here + let number = String(value); + + if (number.length === 1) { + return number.padStart(2, '0'); + } + return number; } stop() { - // ... your code goes here + clearInterval(this.intervalId); + this.intervalId = null; } reset() { - // ... your code goes here + this.currentTime = 0; } split() { - // ... your code goes here + let mins = this.computeTwoDigitNumber(this.getMinutes()); + let secs = this.computeTwoDigitNumber(this.getSeconds()); + return `${mins}:${secs}`; } } diff --git a/javascript/index.js b/javascript/index.js index fb3a43a..7234873 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,3 +1,5 @@ +import { Chronometer } from './chronometer.js'; + const chronometer = new Chronometer(); // get the buttons: @@ -56,10 +58,53 @@ function setResetBtn() { // Start/Stop Button btnLeftElement.addEventListener('click', () => { - // ... your code goes here + if (btnLeftElement.classList.contains('start')) { + btnLeftElement.innerText = 'STOP'; + btnLeftElement.classList.replace('start', 'stop'); + + btnRightElement.innerText = 'SPLIT'; + btnRightElement.classList.replace('reset', 'split'); + + chronometer.start(() => { + let minutes = chronometer.computeTwoDigitNumber(chronometer.getMinutes()); + let seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds()); + let milliseconds = chronometer.computeTwoDigitNumber( + chronometer.getMilliseconds() + ); + + minDecElement.innerHTML = minutes[0]; + minUniElement.innerHTML = minutes[1]; + secDecElement.innerHTML = seconds[0]; + secUniElement.innerHTML = seconds[1]; + milDecElement.textContent = milliseconds[0]; + milUniElement.textContent = milliseconds[1]; + }); + } else { + chronometer.stop(); + btnLeftElement.innerText = 'START'; + btnLeftElement.classList.replace('stop', 'start'); + + btnRightElement.innerText = 'RESET'; + btnRightElement.classList.replace('split', 'reset'); + } }); // Reset/Split Button btnRightElement.addEventListener('click', () => { - // ... your code goes here + const li = document.createElement('li'); + li.className = 'list-item'; + li.textContent = chronometer.split(); + splitsElement.appendChild(li); + + if (btnRightElement.classList.contains('reset')) { + chronometer.reset(); + minDecElement.textContent = '0'; + minUniElement.textContent = '0'; + secDecElement.textContent = '0'; + secUniElement.textContent = '0'; + milDecElement.textContent = '0'; + milUniElement.textContent = '0'; + + splitsElement.innerHTML = ''; + } });