From 5c7dca7236b24c76cc6131d5b5a07615ac711bfb Mon Sep 17 00:00:00 2001 From: Kanak sharma Date: Fri, 6 Dec 2024 18:58:27 +0530 Subject: [PATCH] Solved lab --- javascript/chronometer.js | 34 +++++++----- javascript/index.js | 112 ++++++++++++++++++-------------------- package.json | 3 + 3 files changed, 76 insertions(+), 73 deletions(-) diff --git a/javascript/chronometer.js b/javascript/chronometer.js index 7a13496..a5e573e 100644 --- a/javascript/chronometer.js +++ b/javascript/chronometer.js @@ -1,39 +1,45 @@ class Chronometer { constructor() { - // ... your code goes here + this.currentTime = 0; + this.intervalId = null; } - start(callback) { - // ... your code goes here + start() { + this.intervalId = setInterval(() => { + this.currentTime++; + }, 1000); } getMinutes() { - // ... your code goes here + return Math.floor(this.currentTime / 60); } + // Get seconds getSeconds() { - // ... your code goes here + return this.currentTime % 60; } + // Format to two digits computeTwoDigitNumber(value) { - // ... your code goes here + return value < 10 ? `0${value}` : `${value}`; } + // Stop the chronometer stop() { - // ... your code goes here + clearInterval(this.intervalId); } + // Reset the chronometer reset() { - // ... your code goes here + this.currentTime = 0; } + // Get the split time split() { - // ... your code goes here + const minutes = this.computeTwoDigitNumber(this.getMinutes()); + const seconds = this.computeTwoDigitNumber(this.getSeconds()); + return `${minutes}:${seconds}`; } } -// The following is required to make unit tests work. -/* Environment setup. Do not modify the below code. */ -if (typeof module !== 'undefined') { - module.exports = Chronometer; -} +module.exports = Chronometer; \ No newline at end of file diff --git a/javascript/index.js b/javascript/index.js index fb3a43a..147d676 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,65 +1,59 @@ const chronometer = new Chronometer(); -// 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: -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'); - +// Target DOM elements +const btnLeft = document.getElementById('btnLeft'); +const btnRight = document.getElementById('btnRight'); +const minDec = document.getElementById('minDec'); +const minUni = document.getElementById('minUni'); +const secDec = document.getElementById('secDec'); +const secUni = document.getElementById('secUni'); +const splits = document.getElementById('splits'); + +// Update display function printTime() { - // ... your code goes here -} - -function printMinutes() { - // ... your code goes here -} - -function printSeconds() { - // ... your code goes here -} - -// ==> BONUS -function printMilliseconds() { - // ... your code goes here -} - -function printSplit() { - // ... your code goes here -} - -function clearSplits() { - // ... your code goes here -} - -function setStopBtn() { - // ... your code goes here -} - -function setSplitBtn() { - // ... your code goes here -} - -function setStartBtn() { - // ... your code goes here -} - -function setResetBtn() { - // ... your code goes here -} - -// Start/Stop Button -btnLeftElement.addEventListener('click', () => { - // ... your code goes here + const minutes = chronometer.computeTwoDigitNumber(chronometer.getMinutes()); + const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds()); + + minDec.innerHTML = minutes[0]; + minUni.innerHTML = minutes[1]; + secDec.innerHTML = seconds[0]; + secUni.innerHTML = seconds[1]; +} + +// Handle left button click (Start/Stop) +btnLeft.addEventListener('click', () => { + if (btnLeft.classList.contains('start')) { + // Start the chronometer + chronometer.start(printTime); + btnLeft.innerHTML = 'STOP'; + btnLeft.className = 'btn stop'; + btnRight.innerHTML = 'SPLIT'; + btnRight.className = 'btn split'; + } else { + // Stop the chronometer + chronometer.stop(); + btnLeft.innerHTML = 'START'; + btnLeft.className = 'btn start'; + btnRight.innerHTML = 'RESET'; + btnRight.className = 'btn reset'; + } }); -// Reset/Split Button -btnRightElement.addEventListener('click', () => { - // ... your code goes here +// Handle right button click (Split/Reset) +btnRight.addEventListener('click', () => { + if (btnRight.classList.contains('split')) { + // Create and append a split time + const splitTime = document.createElement('li'); + splitTime.className = 'list-item'; + splitTime.innerHTML = chronometer.split(); + splits.appendChild(splitTime); + } else { + // Reset the chronometer + chronometer.reset(); + printTime(); + splits.innerHTML = ''; // Clear all split times + } }); + +// Initialize the display +printTime(); diff --git a/package.json b/package.json index 879644e..c4d7c7a 100644 --- a/package.json +++ b/package.json @@ -33,5 +33,8 @@ "prettier": { "singleQuote": true, "trailingComma": "none" + }, + "dependencies": { + "lab-javascript-chronometer": "file:" } }