diff --git a/index.html b/index.html
index 3415d73..673e891 100644
--- a/index.html
+++ b/index.html
@@ -19,13 +19,9 @@
Splits
0
0
-
:
+
:
0
0
-
- 0
- 0
-
diff --git a/javascript/chronometer.js b/javascript/chronometer.js
index 7a13496..37b503a 100644
--- a/javascript/chronometer.js
+++ b/javascript/chronometer.js
@@ -1,34 +1,42 @@
class Chronometer {
constructor() {
- // ... your code goes here
+ this.currentTime = 0;
+ this.intervalId = null;
}
start(callback) {
- // ... your code goes here
+ this.intervalId = setInterval(() => {
+ this.currentTime++;
+ if (callback) {
+ callback();
+ }
+ }, 1000);
}
getMinutes() {
- // ... your code goes here
+ return Math.floor(this.currentTime / 60);
}
getSeconds() {
- // ... your code goes here
+ return this.currentTime % 60;
}
computeTwoDigitNumber(value) {
- // ... your code goes here
+ return value < 10 ? `0${value}` : `${value}`;
}
stop() {
- // ... your code goes here
+ clearInterval(this.intervalId);
}
reset() {
- // ... your code goes here
+ this.currentTime = 0;
}
split() {
- // ... your code goes here
+ return `${this.computeTwoDigitNumber(
+ this.getMinutes()
+ )}:${this.computeTwoDigitNumber(this.getSeconds())}`;
}
}
diff --git a/javascript/index.js b/javascript/index.js
index fb3a43a..c787e89 100644
--- a/javascript/index.js
+++ b/javascript/index.js
@@ -9,57 +9,100 @@ const minDecElement = document.getElementById('minDec');
const minUniElement = document.getElementById('minUni');
const secDecElement = document.getElementById('secDec');
const secUniElement = document.getElementById('secUni');
-const milDecElement = document.getElementById('milDec');
-const milUniElement = document.getElementById('milUni');
+
const splitsElement = document.getElementById('splits');
function printTime() {
- // ... your code goes here
+ printMinutes()
+ printSeconds()
}
+//Print minuts & seconds
function printMinutes() {
- // ... your code goes here
+
+ const minutes = chronometer.getMinutes()
+ const minutesValue = chronometer.computeTwoDigitNumber(minutes)
+
+ minDecElement.innerHTML = minutesValue[0]
+ minUniElement.innerHTML = minutesValue[1];
}
function printSeconds() {
- // ... your code goes here
-}
-// ==> BONUS
-function printMilliseconds() {
- // ... your code goes here
+ const seconds = chronometer.getSeconds();
+ const secondsValue = chronometer.computeTwoDigitNumber(seconds);
+
+ secDecElement.innerHTML = secondsValue[0];
+ secUniElement.innerHTML = secondsValue[1];
}
+//Display splits by creatin a li element with the value of split()
function printSplit() {
- // ... your code goes here
+ //3. insert the li split inside the ol
+
+ const split = document.createElement('li')
+ split.innerText = chronometer.split()
+
+ splitsElement.appendChild(split)
+
+
}
+//Clear the ol element that store splits
function clearSplits() {
- // ... your code goes here
-}
+ splitsElement.innerHTML = '';
-function setStopBtn() {
- // ... your code goes here
}
-function setSplitBtn() {
- // ... your code goes here
+function setStartBtn() {
+ btnLeftElement.className = "btn stop"
+ btnLeftElement.innerText = "STOP"
+ btnRightElement.className = "btn split"
+ btnRightElement.innerText="SPLIT"
}
-function setStartBtn() {
- // ... your code goes here
+function setStopBtn() {
+ btnLeftElement.className = 'btn start';
+ btnLeftElement.innerText = 'START';
+ btnRightElement.className = 'btn reset';
+ btnRightElement.innerText = 'RESET';
}
+
function setResetBtn() {
- // ... your code goes here
+ clearSplits()
+ const spans = document.querySelectorAll('#sphere span:not(#dots)');
+ spans.forEach((span) => {
+ span.innerText = '0';
+ });
}
+function setSplitBtn() {
+ printSplit()
+}
+
+
+
// Start/Stop Button
btnLeftElement.addEventListener('click', () => {
- // ... your code goes here
+ if(btnLeftElement.classList.contains('start')){
+ setStartBtn()
+ chronometer.start(printTime);
+ }
+ else if (btnLeftElement.classList.contains('stop')){
+ setStopBtn()
+ chronometer.stop(printTime);
+ }
});
// Reset/Split Button
btnRightElement.addEventListener('click', () => {
- // ... your code goes here
+ if(btnRightElement.classList.contains('reset')){
+ setResetBtn()
+ chronometer.reset();
+ }
+ else if(btnRightElement.classList.contains('split')){
+ setSplitBtn()
+ }
});
+