From 70dc738ee0b4fe59440f75bd42c1f71100f3abfa Mon Sep 17 00:00:00 2001 From: sosina14 Date: Fri, 2 May 2025 18:11:44 +0300 Subject: [PATCH] solve iteration x, y, z --- index.html | 1 + javascript/chronometer.js | 29 ++++++++++++++++++ javascript/index.js | 63 +++++++++++++++++++++++++++++---------- 3 files changed, 78 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 3415d73..b41fc4a 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ IronChronometer +
diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a13496..7a65c5a 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,34 +1,63 @@ class Chronometer { constructor() { // ... your code goes here + this.currentTime = 0; // in seconds + this.intervalId = null; // to store the interval ID + this.isRunning = false; // to track if the chronometer is running + } start(callback) { // ... your code goes here + this.isRunning = true; // set the running state to true + this.intervalId = setInterval(() => { + this.currentTime++; // increment the current time by 1 second + if (callback) { + callback(); // call the callback function if provided + } + }, 1000); // set the interval to 1000 milliseconds (1 second) } getMinutes() { // ... your code goes here + return Math.floor(this.currentTime / 60); // calculate minutes by dividing current time by 60 and rounding down + } getSeconds() { // ... your code goes here + return this.currentTime % 60; // calculate seconds by taking the remainder of current time divided by 60 } computeTwoDigitNumber(value) { // ... your code goes here + if (value < 10) { + return `0${value}`; // if value is less than 10, prepend a '0' + } else { + return `${value}`; // otherwise, return the value as a string + } } stop() { // ... your code goes here + this.isRunning = false; // set the running state to false + clearInterval(this.intervalId); // clear the interval to stop the chronometer + this.intervalId = null; // reset the interval ID to null + } reset() { // ... your code goes here + this.currentTime = 0; // reset the current time to 0 + this.isRunning = false; // set the running state to false + } split() { // ... your code goes here + const minutes = this.getMinutes(); // get the current minutes + const seconds = this.getSeconds(); // get the current seconds + const twoDigitMinutes = this.computeTwoDigitNumber(minutes); // format minutes to two digits } } diff --git a/javascript/index.js b/javascript/index.js index fb3a43a..24a3011 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,10 +1,10 @@ const chronometer = new Chronometer(); -// get the buttons: +// Get the buttons: const btnLeftElement = document.getElementById('btnLeft'); const btnRightElement = document.getElementById('btnRight'); -// get the DOM elements that will serve us to display the time: +// Get the DOM elements to display time: const minDecElement = document.getElementById('minDec'); const minUniElement = document.getElementById('minUni'); const secDecElement = document.getElementById('secDec'); @@ -14,52 +14,85 @@ const milUniElement = document.getElementById('milUni'); const splitsElement = document.getElementById('splits'); function printTime() { - // ... your code goes here + printMinutes(); + printSeconds(); + // Optional if you're doing milliseconds + // printMilliseconds(); } function printMinutes() { - // ... your code goes here + const minutes = chronometer.getMinutes(); + const twoDigitMinutes = chronometer.computeTwoDigitNumber(minutes); + minDecElement.innerText = twoDigitMinutes[0]; + minUniElement.innerText = twoDigitMinutes[1]; } function printSeconds() { - // ... your code goes here + const seconds = chronometer.getSeconds(); + const twoDigitSeconds = chronometer.computeTwoDigitNumber(seconds); + secDecElement.innerText = twoDigitSeconds[0]; + secUniElement.innerText = twoDigitSeconds[1]; } -// ==> BONUS +// BONUS: Milliseconds (only if you're doing it) function printMilliseconds() { - // ... your code goes here + const milliseconds = chronometer.getMilliseconds(); // Make sure this method exists + const twoDigitMilliseconds = chronometer.computeTwoDigitNumber(milliseconds); + milDecElement.innerText = twoDigitMilliseconds[0]; + milUniElement.innerText = twoDigitMilliseconds[1]; } function printSplit() { - // ... your code goes here + const splitTime = chronometer.split(); + const splitElement = document.createElement('li'); + splitElement.innerText = splitTime; + splitsElement.appendChild(splitElement); } function clearSplits() { - // ... your code goes here + splitsElement.innerHTML = ''; } 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(); + clearSplits(); + printTime(); // Resets the display too + } else { + printSplit(); + } });