diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a1349680..f711f9075 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,34 +1,66 @@ class Chronometer { constructor() { - // ... your code goes here + this.currentTime = 0; + this.milliSeconds = 0; //centesimas + this.intervalId = null; } start(callback) { - // ... your code goes here + this.intervalId = setInterval(() => { + this.milliSeconds += 1; // cada 10 ms se suma 1 centesima + + if (this.milliSeconds === 100) { + this.currentTime += 1; + this.milliSeconds = 0; + } + + if (callback) { + callback(); + } + }, 10); } + // mejor hacerlo sin this. no guardas nada extra en el objeto. getMinutes() { - // ... your code goes here + return Math.floor(this.currentTime / 60); + } getSeconds() { - // ... your code goes here + return this.currentTime % 60; + + } + + getMilliseconds() { + return this.milliSeconds; } computeTwoDigitNumber(value) { - // ... your code goes here + let valueString = "0" + value + + return valueString.slice(-2); } stop() { - // ... your code goes here + clearInterval(this.intervalId); } reset() { - // ... your code goes here + this.currentTime = 0; + + document.getElementById("minDec").innerHTML = "0"; + document.getElementById("minUni").innerHTML = "0"; + document.getElementById("secDec").innerHTML = "0"; + document.getElementById("secUni").innerHTML = "0"; + milDecElement.innerHTML = "0"; + milUniElement.innerHTML = "0"; } split() { - // ... your code goes here + const mm = this.computeTwoDigitNumber(this.getMinutes()) + const ss = this.computeTwoDigitNumber(this.getSeconds()) + const cc = this.computeTwoDigitNumber(this.getMilliseconds()) + return `${mm}:${ss}:${cc}` } } diff --git a/javascript/index.js b/javascript/index.js index fb3a43ab4..59c18d0ea 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -4,6 +4,9 @@ const chronometer = new Chronometer(); const btnLeftElement = document.getElementById('btnLeft'); const btnRightElement = 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'); @@ -13,21 +16,33 @@ const milDecElement = document.getElementById('milDec'); 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()); + minDecElement.innerHTML = minutes.slice(0, 1); + minUniElement.innerHTML = minutes.slice(1); } function printSeconds() { - // ... your code goes here + const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds()) + secDecElement.innerHTML = seconds[0] + secUniElement.innerHTML = seconds[1] + } // ==> BONUS function printMilliseconds() { - // ... your code goes here + const milliSeconds = chronometer.computeTwoDigitNumber(chronometer.getMilliseconds()) + milDecElement.innerHTML = milliSeconds.slice(0, 1) + milUniElement.innerHTML = milliSeconds.slice(1) + } function printSplit() { @@ -47,19 +62,60 @@ function setSplitBtn() { } function setStartBtn() { - // ... your code goes here + } function setResetBtn() { // ... your code goes here } + +//HAY QUE HACER UN toogle (alternar estados) // Start/Stop Button btnLeftElement.addEventListener('click', () => { - // ... your code goes here -}); + if (btnLeftElement.innerText === 'START') { + btnLeftElement.innerText = 'STOP'; + btnRightElement.innerText = 'SPLIT'; + btnLeftElement.className = "btn stop"; + btnRightElement.className = 'btn split'; + chronometer.start(printTime); + + } else if (btnLeftElement.innerText === 'STOP') { + btnLeftElement.innerText = 'START'; + btnRightElement.innerText = 'RESET'; + btnLeftElement.className = "btn start"; + btnRightElement.className = "btn reset"; + chronometer.stop() + } + + + } +); // Reset/Split Button btnRightElement.addEventListener('click', () => { - // ... your code goes here -}); + if (btnRightElement.innerText === "SPLIT") { + const tablaSplits = document.getElementById('splits'); //es mejor meterlos fuera de la funcion? + const newSplit = document.createElement('li'); + tablaSplits.appendChild(newSplit); + newSplit.innerText = chronometer.split() + } + + else if (btnRightElement.innerText === "RESET") { + chronometer.reset() + const ilSplits = document.querySelectorAll("#splits li") + const ilSplitsArr = [...ilSplits] + for (let split of ilSplitsArr) { + split.remove(); + }; + } +}) + + + + + + + + +