document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('stopwatch-container');
const addBoxBtn = document.getElementById('addBoxBtn');
let activeStopwatch = null;
const allStopwatches = [];
// The main keydown event listener
document.addEventListener('keydown', (e) => {
// Find the active stopwatch and check its assigned key
if (activeStopwatch) {
const assignedKey = activeStopwatch.keybinding;
if (e.key.toLowerCase() === assignedKey.toLowerCase()) {
const startStopBtn = activeStopwatch.querySelector('.start-btn');
if (startStopBtn.textContent === 'Start') {
startStopBtn.textContent = 'Stop';
startStopwatch(activeStopwatch);
} else {
startStopBtn.textContent = 'Start';
stopStopwatch(activeStopwatch);
}
}
}
});
// Add a new stopwatch box when the button is clicked
addBoxBtn.addEventListener('click', () => {
const newStopwatch = createStopwatchBox();
container.appendChild(newStopwatch);
allStopwatches.push(newStopwatch);
setActiveStopwatch(newStopwatch);
});
// Handle clicks within the container to set the active stopwatch
container.addEventListener('click', (e) => {
const box = e.target.closest('.stopwatch-box');
if (box) {
setActiveStopwatch(box);
}
});
// Function to set the active stopwatch box
function setActiveStopwatch(box) {
if (activeStopwatch) {
activeStopwatch.classList.remove('active');
}
activeStopwatch = box;
activeStopwatch.classList.add('active');
box.querySelector('.stopwatch-name-input').focus();
}
// Function to create a new stopwatch box element
function createStopwatchBox() {
const box = document.createElement('div');
box.classList.add('stopwatch-box');
box.innerHTML = `
<div class="stopwatch-box-header">
<input type="text" class="stopwatch-name-input" value="Stopwatch">
<input type="text" class="key-input" maxlength="1" value="S">
</div>
<div class="timer-display">00:00:00</div>
<div class="controls">
<button class="start-btn">Start</button>
<button class="reset-btn">Reset</button>
</div>
<button class="remove-btn">×</button>
`;
const display = box.querySelector('.timer-display');
const startStopBtn = box.querySelector('.start-btn');
const resetBtn = box.querySelector('.reset-btn');
const removeBtn = box.querySelector('.remove-btn');
const nameInput = box.querySelector('.stopwatch-name-input');
const keyInput = box.querySelector('.key-input');
let timerInterval = null;
let startTime = 0;
let elapsedTime = 0;
box.elapsedTime = elapsedTime;
box.keybinding = keyInput.value.toLowerCase(); // Default keybinding
// Update keybinding when input changes
keyInput.addEventListener('input', () => {
box.keybinding = keyInput.value.toLowerCase();
});
// Start/Stop button logic
startStopBtn.addEventListener('click', () => {
if (startStopBtn.textContent === 'Start') {
startStopBtn.textContent = 'Stop';
startStopwatch(box);
} else {
startStopBtn.textContent = 'Start';
stopStopwatch(box);
}
});
// Reset button logic
resetBtn.addEventListener('click', () => {
stopStopwatch(box);
elapsedTime = 0;
box.elapsedTime = 0;
display.textContent = formatTime(elapsedTime);
startStopBtn.textContent = 'Start';
sortStopwatches();
});
// Remove button logic
removeBtn.addEventListener('click', (e) => {
e.stopPropagation();
stopStopwatch(box);
const index = allStopwatches.indexOf(box);
if (index > -1) {
allStopwatches.splice(index, 1);
}
box.remove();
if (activeStopwatch === box) {
activeStopwatch = null;
}
sortStopwatches();
});
// Function to start the stopwatch
function startStopwatch(currentBox) {
if (!timerInterval) {
startTime = Date.now() - elapsedTime;
timerInterval = setInterval(() => {
elapsedTime = Date.now() - startTime;
currentBox.elapsedTime = elapsedTime;
currentBox.querySelector('.timer-display').textContent = formatTime(elapsedTime);
sortStopwatches();
}, 100);
}
}
// Function to stop the stopwatch
function stopStopwatch(currentBox) {
clearInterval(timerInterval);
timerInterval = null;
}
// Function to format the time display
function formatTime(ms) {
const date = new Date(ms);
const minutes = String(date.getUTCMinutes()).padStart(2, '0');
const seconds = String(date.getUTCSeconds()).padStart(2, '0');
const milliseconds = String(Math.floor(date.getUTCMilliseconds() / 100)).padStart(1, '0');
return `${minutes}:${seconds}:${milliseconds}`;
}
return box;
}
// Function to sort stopwatches based on their elapsed time
function sortStopwatches() {
allStopwatches.sort((a, b) => b.elapsedTime - a.elapsedTime);
allStopwatches.forEach(box => container.appendChild(box));
}
});