Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 20 additions & 14 deletions javascript/chronometer.js
Original file line number Diff line number Diff line change
@@ -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;
112 changes: 53 additions & 59 deletions javascript/index.js
Original file line number Diff line number Diff line change
@@ -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();
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,5 +33,8 @@
"prettier": {
"singleQuote": true,
"trailingComma": "none"
},
"dependencies": {
"lab-javascript-chronometer": "file:"
}
}