From 552a67ecf7713fdebee87512662e8e46e7921344 Mon Sep 17 00:00:00 2001 From: afminguela Date: Thu, 26 Jun 2025 12:16:32 +0200 Subject: [PATCH 1/3] cronometer.js hecho --- javascript/chronometer.js | 40 +++++++++++++++++++++++++++++++++++++-- javascript/index.js | 18 ++++++++++++++---- 2 files changed, 52 insertions(+), 6 deletions(-) diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a1349680..bdf2c4b3e 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,33 +1,69 @@ class Chronometer { constructor() { + this.currentTime = 0; + this.intervalId = null; // ... your code goes here } start(callback) { + if(this.intervalId !== null)return; + this.intervalId= setInterval(() => { + this.currentTime++ + if(typeof callback === "function" ) { + callback() + } + }, 1000); // ... your code goes here } getMinutes() { + return Math.floor(this.currentTime / 60) // ... your code goes here } getSeconds() { + return Math.floor(this.currentTime % 60) // ... your code goes here } computeTwoDigitNumber(value) { - // ... your code goes here - } +return value.toString().padStart(2,"0") + +} stop() { + clearInterval(this.intervalId) + // ... your code goes here } reset() { + this.currentTime = 0; + this.intervalId = null; + document.querySelector('#clock').innerHTML=` +
+ 0 + 0 + : + 0 + 0 +
+ 0 + 0 +
+
+ ` // ... your code goes here } split() { + const minutes = this.getMinutes(); + const seconds = this.getSeconds(); + + const minutesFormat = this.computeTwoDigitNumber(minutes); + const secondsFormat = this.computeTwoDigitNumber(seconds); + + return `${minutesFormat}:${secondsFormat}` // ... your code goes here } } diff --git a/javascript/index.js b/javascript/index.js index fb3a43ab4..532ebde24 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,3 +1,5 @@ +const Chronometer = require("./chronometer"); + const chronometer = new Chronometer(); // get the buttons: @@ -18,10 +20,14 @@ function printTime() { } function printMinutes() { + chronometer.getMinutes + // ... your code goes here } function printSeconds() { + chronometer.getSeconds + // ... your code goes here } @@ -31,32 +37,36 @@ function printMilliseconds() { } function printSplit() { + chronometer.split // ... your code goes here } function clearSplits() { + // ... your code goes here } function setStopBtn() { + chronometer.stop // ... your code goes here } function setSplitBtn() { + chronometer.split // ... your code goes here } function setStartBtn() { - // ... your code goes here -} - + chronometer.start + } function setResetBtn() { +chronometer.reset // ... your code goes here } // Start/Stop Button btnLeftElement.addEventListener('click', () => { - // ... your code goes here + }); // Reset/Split Button From 7360512f68c3c630a8e70aedbc850f46981cfca8 Mon Sep 17 00:00:00 2001 From: afminguela Date: Thu, 26 Jun 2025 13:38:22 +0200 Subject: [PATCH 2/3] Index functions half way --- javascript/chronometer.js | 27 +++--------- javascript/index.js | 92 ++++++++++++++++++++++++++++++--------- 2 files changed, 77 insertions(+), 42 deletions(-) diff --git a/javascript/chronometer.js b/javascript/chronometer.js index bdf2c4b3e..259f7d8ab 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -2,7 +2,7 @@ class Chronometer { constructor() { this.currentTime = 0; this.intervalId = null; - // ... your code goes here + } start(callback) { @@ -18,42 +18,27 @@ class Chronometer { getMinutes() { return Math.floor(this.currentTime / 60) - // ... your code goes here } getSeconds() { return Math.floor(this.currentTime % 60) - // ... your code goes here + } computeTwoDigitNumber(value) { -return value.toString().padStart(2,"0") + return value.toString().padStart(2,"0") } stop() { clearInterval(this.intervalId) - // ... your code goes here + } reset() { - this.currentTime = 0; - this.intervalId = null; - document.querySelector('#clock').innerHTML=` -
- 0 - 0 - : - 0 - 0 -
- 0 - 0 -
-
- ` - // ... your code goes here + this.currentTime= 0; + } split() { diff --git a/javascript/index.js b/javascript/index.js index 532ebde24..b5107c701 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -15,61 +15,111 @@ const milDecElement = document.getElementById('milDec'); const milUniElement = document.getElementById('milUni'); const splitsElement = document.getElementById('splits'); + + function printTime() { - // ... your code goes here + printMinutes() + printSeconds() } + + function printMinutes() { - chronometer.getMinutes - - // ... your code goes here -} + const numMin = chronometer.computeTwoDigitNumber(chronometer.getMinutes()). + + minDecElement.textContent = numMin[0]; + minUniElement.textContent = numMin[1]; + + } + -function printSeconds() { - chronometer.getSeconds - // ... your code goes here +function printSeconds() { + const numSec = chronometer.computeTwoDigitNumber(chronometer.getSeconds()). + + secDecElement.textContent = numSec[0]; + secUniElement.textContent = numSec[1]; } // ==> BONUS function printMilliseconds() { - // ... your code goes here + } function printSplit() { - chronometer.split - // ... your code goes here -} + const split = chronometer.split(); + + splitsElement.textContent = split; + + } function clearSplits() { - // ... your code goes here + } function setStopBtn() { - chronometer.stop - // ... your code goes here + chronometer.stop() + + btnLeftElement.textContent = 'Start' ; + btnLeftElement.className = 'btn start'; + } function setSplitBtn() { - chronometer.split - // ... your code goes here + chronometer.split() + btnRightElement.textContent = 'Split' ; +btnRightElement.className = 'btn split'; } function setStartBtn() { - chronometer.start + chronometer.start(printTime) + + btnLeftElement.textContent = 'Stop' ; + btnLeftElement.className = 'btn stop'; + + + } function setResetBtn() { -chronometer.reset - // ... your code goes here +chronometer.reset() +btnRightElement.textContent = 'Reset' ; +btnRightElement.className = 'btn reset'; + + +minDecElement.textContent = '0'; +minUniElement.textContent = '0'; +secDecElement.textContent = '0'; +secUniElement.textContent = '0'; +milDecElement.textContent = '0'; +milUniElement.textContent = '0'; +splitsElement.textContent = '0'; +// document.querySelector('#clock').innerHTML=` +//
+// 0 +// 0 +// : +// 0 +// 0 +//
+// 0 +// 0 +//
+//
+// ` } // Start/Stop Button btnLeftElement.addEventListener('click', () => { + if (btnLeftElement.textContent.contains("start")) { + + setStartBtn()} + setStopBtn() }); // Reset/Split Button btnRightElement.addEventListener('click', () => { - // ... your code goes here + }); + From 02afdb3a020309aa8d0afb362740f6debce7c00f Mon Sep 17 00:00:00 2001 From: afminguela Date: Thu, 26 Jun 2025 14:26:51 +0200 Subject: [PATCH 3/3] working --- javascript/chronometer.js | 8 +-- javascript/index.js | 143 ++++++++++++++++++++------------------ 2 files changed, 80 insertions(+), 71 deletions(-) diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 259f7d8ab..ff7ec5691 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -25,14 +25,14 @@ class Chronometer { } - computeTwoDigitNumber(value) { - return value.toString().padStart(2,"0") - +computeTwoDigitNumber(value) { + return value.toString().padStart(2, "0"); } + stop() { clearInterval(this.intervalId) - + this.intervalId = null; } diff --git a/javascript/index.js b/javascript/index.js index b5107c701..9c0b1bade 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,7 +1,8 @@ -const Chronometer = require("./chronometer"); const chronometer = new Chronometer(); +console.log('hola'); + // get the buttons: const btnLeftElement = document.getElementById('btnLeft'); const btnRightElement = document.getElementById('btnRight'); @@ -15,111 +16,119 @@ const milDecElement = document.getElementById('milDec'); const milUniElement = document.getElementById('milUni'); const splitsElement = document.getElementById('splits'); - +console.log('variables declaradas'); function printTime() { - printMinutes() - printSeconds() + printMinutes(); + printSeconds(); } +function printMinutes() { + const numMin = chronometer.computeTwoDigitNumber( + chronometer.getMinutes()); -function printMinutes() { - const numMin = chronometer.computeTwoDigitNumber(chronometer.getMinutes()). - - minDecElement.textContent = numMin[0]; + minDecElement.textContent = numMin[0]; minUniElement.textContent = numMin[1]; +} - } - +function printSeconds() { + const numSec = chronometer.computeTwoDigitNumber( + chronometer.getSeconds()); -function printSeconds() { - const numSec = chronometer.computeTwoDigitNumber(chronometer.getSeconds()). - - secDecElement.textContent = numSec[0]; +secDecElement.textContent = numSec[0]; secUniElement.textContent = numSec[1]; } // ==> BONUS -function printMilliseconds() { - -} +function printMilliseconds() {} function printSplit() { const split = chronometer.split(); splitsElement.textContent = split; - - } +} function clearSplits() { - - + splitsElement.innerHTML = ''; } function setStopBtn() { - chronometer.stop() + chronometer.stop(); - btnLeftElement.textContent = 'Start' ; + btnLeftElement.textContent = 'START'; btnLeftElement.className = 'btn start'; - + btnRightElement.textContent = 'RESET'; + btnRightElement.className = 'btn reset'; } function setSplitBtn() { - chronometer.split() - btnRightElement.textContent = 'Split' ; -btnRightElement.className = 'btn split'; + const split = chronometer.split(); + const splitItem = document.createElement('li'); + splitItem.textContent = split; + splitsElement.appendChild(splitItem); } function setStartBtn() { - chronometer.start(printTime) - - btnLeftElement.textContent = 'Stop' ; - btnLeftElement.className = 'btn stop'; + chronometer.start(printTime); - + btnLeftElement.textContent = 'STOP'; + btnLeftElement.className = 'btn stop'; - } + btnRightElement.textContent = 'SPLIT'; + btnRightElement.className = 'btn split'; +} function setResetBtn() { -chronometer.reset() -btnRightElement.textContent = 'Reset' ; -btnRightElement.className = 'btn reset'; - - -minDecElement.textContent = '0'; -minUniElement.textContent = '0'; -secDecElement.textContent = '0'; -secUniElement.textContent = '0'; -milDecElement.textContent = '0'; -milUniElement.textContent = '0'; -splitsElement.textContent = '0'; -// document.querySelector('#clock').innerHTML=` -//
-// 0 -// 0 -// : -// 0 -// 0 -//
-// 0 -// 0 -//
-//
-// ` + chronometer.reset(); + + btnLeftElement.textContent = 'START'; + btnLeftElement.className = 'btn start'; + btnRightElement.textContent = 'RESET'; + btnRightElement.className = 'btn reset'; + + minDecElement.textContent = '0'; + minUniElement.textContent = '0'; + secDecElement.textContent = '0'; + secUniElement.textContent = '0'; + milDecElement.textContent = '0'; + milUniElement.textContent = '0'; + splitsElement.textContent = '0'; + // document.querySelector('#clock').innerHTML=` + //
+ // 0 + // 0 + // : + // 0 + // 0 + //
+ // 0 + // 0 + //
+ //
+ // + // + + clearSplits(); + } -// Start/Stop Button btnLeftElement.addEventListener('click', () => { - if (btnLeftElement.textContent.contains("start")) { - - setStartBtn()} - - setStopBtn() + if (btnLeftElement.textContent.includes('START')) { + + setStartBtn(); + + } else { + setStopBtn(); + + } }); -// Reset/Split Button btnRightElement.addEventListener('click', () => { - -}); + if (btnRightElement.textContent.includes('RESET')) { + setResetBtn(); + } else { + setSplitBtn(); + } +}); \ No newline at end of file