diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a1349680..bbf94f228 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,34 +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++; + if (callback) { + callback(); // cada 10 ms se ejecuta el callback (la función que le pasemos) + } + }, 10); // Cada 10 ms incrementa el cronómetro (el update) } getMinutes() { - // ... your code goes here + return Math.floor(this.currentTime / 6000); // 6000 ms = 1 minuto } getSeconds() { - // ... your code goes here + return Math.floor((this.currentTime / 100) % 60); // 100 ms = 1 segundo } - computeTwoDigitNumber(value) { - // ... your code goes here + getMilliseconds() { + return this.currentTime % 100; // El resto son los ms } - stop() { - // ... your code goes here + computeTwoDigitNumber(value) { + return value.toString().padStart(2, '0'); // Asegura que siempre tenga 2 dígitos (1 = 01, ...) } reset() { - // ... your code goes here + this.currentTime = 0; // Reinicia el cronómetro a 0 + } + + stop() { + clearInterval(this.intervalId); } split() { - // ... your code goes here + return `${this.computeTwoDigitNumber(this.getMinutes())} + :${this.computeTwoDigitNumber(this.getSeconds())} + :${this.computeTwoDigitNumber(this.getMilliseconds())}`; + // Es extraña la línea pero devolvemos un string con el formato MM:SS:MS, siempre en el formate de 2 dígitos } } diff --git a/javascript/index.js b/javascript/index.js index fb3a43ab4..30262a463 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -14,52 +14,86 @@ const milUniElement = document.getElementById('milUni'); const splitsElement = document.getElementById('splits'); function printTime() { - // ... your code goes here + printMinutes(); + printSeconds(); + printMilliseconds(); // Bonus } function printMinutes() { - // ... your code goes here + const minutes = chronometer.computeTwoDigitNumber(chronometer.getMinutes()); + + minDecElement.innerText = minutes[0]; + minUniElement.innerText = minutes[1]; } function printSeconds() { - // ... your code goes here + const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds()); + + secDecElement.innerText = seconds[0]; + secUniElement.innerText = seconds[1]; } // ==> BONUS function printMilliseconds() { - // ... your code goes here + const milliseconds = chronometer.computeTwoDigitNumber( + chronometer.getMilliseconds() + ); + + milDecElement.innerText = milliseconds[0]; + milUniElement.innerText = milliseconds[1]; } function printSplit() { - // ... your code goes here + const li = document.createElement('li'); + li.className = 'list-item'; + li.innerText = chronometer.split(); + splitsElement.appendChild(li); } function clearSplits() { - // ... your code goes here + splitsElement.innerText = ''; // Limpia el contenido de la lista de elementos } function setStopBtn() { - // ... your code goes here + btnLeftElement.className = 'btn stop'; + btnLeftElement.innerText = 'STOP'; } function setSplitBtn() { - // ... your code goes here + btnRightElement.className = 'btn split'; + btnRightElement.innerText = 'SPLIT'; } function setStartBtn() { - // ... your code goes here + btnLeftElement.className = 'btn start'; + btnLeftElement.innerText = 'START'; } function setResetBtn() { - // ... your code goes here + btnRightElement.className = 'btn reset'; + btnRightElement.innerText = '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(); + } });