diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a13496..d413f8f 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,34 +1,47 @@ class Chronometer { constructor() { - // ... your code goes here + this.currentTime = 0; //stores time in secnds + this.intervalId = null; // stores id of interval so we can clear it out later + + + } + start(callback) { - // ... your code goes here - } + this.intervalId = setInterval(() => { + this.currentTime += 1; + if (callback) callback(); //gets called every second and increments + }, 1000) //increments every second + } + +getMinutes() { + return Math.floor(this.currentTime / 60); // Minutes are the number of full 60 seconds +} - getMinutes() { - // ... your code goes here - } +getSeconds() { + return this.currentTime % 60; // Seconds are the remainder after dividing by 60 +} - getSeconds() { - // ... your code goes here - } computeTwoDigitNumber(value) { - // ... your code goes here + return value < 10 ? `0${value}` : `${value}`; // takes a number an returns it as two-digit + //if num is less than 10, pad it with 0; } stop() { - // ... your code goes here + clearInterval(this.intervalId); //clears interval so it stops counting } reset() { - // ... your code goes here + this.currentTime = 0; //resets time to 0 } split() { - // ... your code goes here + const minutes = this.computeTwoDigitNumber(this.getMinutes()); + const seconds = this.computeTwoDigitNumber(this.getSeconds()); + + return `${minutes}:${seconds}`; //returns time in format MM:SS } } diff --git a/javascript/index.js b/javascript/index.js index fb3a43a..bc7e366 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -4,6 +4,7 @@ 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'); @@ -14,52 +15,77 @@ const milUniElement = document.getElementById('milUni'); const splitsElement = document.getElementById('splits'); function printTime() { - // ... your code goes here + printMinutes(); + printSeconds(); } function printMinutes() { - // ... your code goes here + const minutes = chronometer.getMinutes(); + const formattedMinutes = chronometer.computeTwoDigitNumber(minutes); + minDecElement.innerText = formattedMinutes[0]; // Tens place + minUniElement.innerText = formattedMinutes[1]; // Units place } function printSeconds() { - // ... your code goes here -} + const seconds = chronometer.getSeconds(); -// ==> BONUS -function printMilliseconds() { - // ... your code goes here + const formattedSeconds = chronometer.computeTwoDigitNumber(seconds); + secDecElement.innerText = formattedSeconds[0]; // Tens place + secUniElement.innerText = formattedSeconds[1]; // Units place } +n function printSplit() { - // ... your code goes here + const splitTime = chronometer.split(); + const li = document.createElement("li") // creates list to save split time + li.className = "list-item"; + li.innerText = splitTime; + splitsElement.appendChild(li); } 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.classList.contains('start')) { + setStopBtn(); + setSplitBtn(); + chronometer.start(printTime); // pass printTime as callback + + } else { + setStartBtn(); + setResetBtn(); + chronometer.stop(); + } }); // Reset/Split Button btnRightElement.addEventListener('click', () => { - // ... your code goes here + if (btnRightElement.classList.contains('reset')) { + chronometer.reset(); + printTime(); // update display after reset + clearSplits(); + } else { + printSplit(); + } });