diff --git a/javascript/index.js b/javascript/index.js index fb3a43ab4..6a9655b33 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 + // Here we're going to call printMinutes + printSeconds + setInterval(() => { + let seconds = printSeconds(); + let minutes = printMinutes(); + + minDecElement.innerText = minutes[0]; + minUniElement.innerText = minutes[1]; + secUniElement.innerText = seconds[1]; + secDecElement.innerText = seconds[0]; + }, 1000); } function printMinutes() { - // ... your code goes here + return chronometer.computeTwoDigitNumber(chronometer.getMinutes()); } function printSeconds() { - // ... your code goes here -} - -// ==> BONUS -function printMilliseconds() { - // ... your code goes here + return chronometer.computeTwoDigitNumber(chronometer.getSeconds()); } function printSplit() { - // ... your code goes here + // We receive the string from the split method inside the chronometer + let timestamp = chronometer.split(); + + // Create an element to insert into the DOM + let listItemElement = document.createElement('li'); + // Assign the value of listItemElement to timestamp + listItemElement.innerText = timestamp; + // Point to the DOM selection variable containing the splits id and append a child :) + splitsElement.appendChild(listItemElement); } function clearSplits() { - // ... your code goes here + splitsElement.innerHTML = ''; } function setStopBtn() { - // ... your code goes here + btnLeftElement.innerText = 'STOP'; + btnLeftElement.className = 'btn stop'; } function setSplitBtn() { - // ... your code goes here + btnRightElement.innerText = 'SPLIT'; + btnRightElement.className = 'btn split'; } function setStartBtn() { - // ... your code goes here + btnLeftElement.innerText = 'START'; + btnLeftElement.className = 'btn start'; } function setResetBtn() { - // ... your code goes here + btnRightElement.innerText = 'RESET'; + btnRightElement.className = 'btn reset'; } // Start/Stop Button btnLeftElement.addEventListener('click', () => { - // ... your code goes here + if (btnLeftElement.innerText === 'START') { + setStopBtn(); + chronometer.start(); + printTime(); + setSplitBtn(); + } else { + setStartBtn(); + setResetBtn(); + chronometer.stop(); + } }); // Reset/Split Button btnRightElement.addEventListener('click', () => { - // ... your code goes here + if (btnRightElement.innerText === 'RESET') { + chronometer.stop(); + chronometer.reset(); + minDecElement.innerText = '0'; + minUniElement.innerText = '0'; + secUniElement.innerText = '0'; + secDecElement.innerText = '0'; + clearSplits(); + } else { + printSplit(); + } });