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();
+ }
});