diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a1349680..6c06fe396 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,34 +1,43 @@ class Chronometer { constructor() { - // ... your code goes here - } + this.currentTime = 0; + this.intervalId = null +} start(callback) { - // ... your code goes here + this.intervalId = setInterval(() => {// se usa función flecha para referenciar al chronometer + this.currentTime += 1; + if (callback){ + callback(); + } + }, 1000); } - getMinutes() { - // ... your code goes here + getMinutes() { //math floor redondea el valor de la opereción + return Math.floor(this.currentTime /60); // extraer minutos enteros } - getSeconds() { - // ... your code goes here + getSeconds() { // calcular segundos restantes de la función anterior + return Math.floor (this.currentTime%60); } computeTwoDigitNumber(value) { - // ... your code goes here + return("0" + value).slice(-2) // esta función devuelve 0 + el parametro y el slice lo que hace es que siempre devuelva dos digitos } stop() { - // ... your code goes here + clearInterval(this.intervalId); } reset() { - // ... your code goes here + this.currentTime = 0; + this.intervalId= null; } - split() { - // ... your code goes here + split() { // crear el diseño mm:ss creando dos contaste donde se llama los minutos y segundo previamente creados. Para combinarlos y devolverlos en forma de cadena + 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..ea1fac166 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -13,16 +13,24 @@ const milDecElement = document.getElementById('milDec'); const milUniElement = document.getElementById('milUni'); const splitsElement = document.getElementById('splits'); -function printTime() { - // ... your code goes here +function printTime() { // imprime los numeros de las funciones creadas en chonometro "getminute" "getseconds" + printMinutes(); + printSeconds(); } function printMinutes() { - // ... your code goes here + const min = chronometer.getMinutes(); + const minToStr = chronometer.computeTwoDigitNumber(min); + minDecElement.textContent = minToStr[0]; + minUniElement.textContent = minToStr[1]; } function printSeconds() { - // ... your code goes here + const sec = chronometer.getSeconds(); + const secStr = chronometer.computeTwoDigitNumber(sec); + console.log(secStr) + secDecElement.textContent = secStr[0]; + secUniElement.textContent = secStr[1]; } // ==> BONUS @@ -31,35 +39,58 @@ function printMilliseconds() { } function printSplit() { - // ... your code goes here + const li = document.createElement('li'); + li.textContent = chronometer.split(); + splitsElement.appendChild(li); } function clearSplits() { - // ... your code goes here + splitsElement.innerHTML = ''; } function setStopBtn() { - // ... your code goes here + btnLeftElement.classList.add('stop'); + btnLeftElement.textContent = 'STOP'; } function setSplitBtn() { - // ... your code goes here + btnRightElement.classList.add('split'); + btnRightElement.textContent = 'SPLIT' } function setStartBtn() { - // ... your code goes here + btnLeftElement.classList.remove('stop'); + btnLeftElement.textContent = 'START'; } function setResetBtn() { - // ... your code goes here + btnRightElement.classList.remove('split'); + btnRightElement.textContent = 'RESET'; } // Start/Stop Button btnLeftElement.addEventListener('click', () => { - // ... your code goes here + if (btnLeftElement.classList.contains('stop')) { + setStartBtn(); + setResetBtn(); + chronometer.stop(); + } else { + setStopBtn(); + setSplitBtn(); + chronometer.start(printTime) + } }); // Reset/Split Button btnRightElement.addEventListener('click', () => { - // ... your code goes here + if (btnRightElement.classList.contains('split')) { + printSplit(); + } else { + chronometer.reset(); + minDecElement.textContent = '0'; + milUniElement.textContent = '0'; + secDecElement.textContent = '0'; + secUniElement.textContent = '0'; + clearSplits(); + } });