Open Tool `; toolGrid.appendChild(card); } // 2. MODAL HANDLING let stopwatchInterval = null; // To hold the interval for the stopwatch toolGrid.addEventListener('click', (e) => { if (e.target.classList.contains('btn')) { const toolId = e.target.getAttribute('data-tool-id'); openModal(toolId); } }); const closeModal = () => { modal.classList.remove('show'); // Important: Clear stopwatch interval when closing modal to prevent background running if (stopwatchInterval) { clearInterval(stopwatchInterval); stopwatchInterval = null; } }; closeBtn.onclick = closeModal; modal.addEventListener('click', (e) => { if (e.target === modal) { closeModal(); } }); function openModal(toolId) { const tool = conversionsData[toolId]; modalHost.innerHTML = getToolHTML(toolId, tool.title); modal.classList.add('show'); attachToolListener(toolId); } // 3. GENERATE HTML FOR EACH TOOL'S INTERFACE function getToolHTML(toolId, title) { let html = `

${title}

`; const toolData = conversionsData[toolId]; if (toolId === 'stopwatch') { html += ` `; } else { // Generic converter layout html += ` `; } return html; } // 4. ATTACH EVENT LISTENERS AND DEFINE TOOL LOGIC function attachToolListener(toolId) { const toolData = conversionsData[toolId]; if (toolId === 'stopwatch') { const display = modal.querySelector('.stopwatch-display'); const startBtn = modal.querySelector('.start-btn'); const stopBtn = modal.querySelector('.stop-btn'); const resetBtn = modal.querySelector('.reset-btn'); let startTime = 0; let elapsedTime = 0; let running = false; function formatTime(time) { const date = new Date(time); const minutes = String(date.getUTCMinutes()).padStart(2, '0'); const seconds = String(date.getUTCSeconds()).padStart(2, '0'); const centiseconds = String(Math.floor(date.getUTCMilliseconds() / 10)).padStart(2, '0'); // We don't display hours unless necessary if (time >= 3600000) { const hours = String(date.getUTCHours()).padStart(2, '0'); return `${hours}:${minutes}:${seconds}.${centiseconds}`; } return `${minutes}:${seconds}.${centiseconds}`; } function updateDisplay() { const now = Date.now(); elapsedTime += now - startTime; startTime = now; display.textContent = formatTime(elapsedTime); } startBtn.onclick = () => { if (!running) { running = true; startTime = Date.now(); stopwatchInterval = setInterval(updateDisplay, 10); } }; stopBtn.onclick = () => { if (running) { running = false; clearInterval(stopwatchInterval); stopwatchInterval = null; } }; resetBtn.onclick = () => { running = false; clearInterval(stopwatchInterval); stopwatchInterval = null; elapsedTime = 0; display.textContent = formatTime(0); }; } else { // Generic converter logic const input1 = modal.querySelector('#input1'); const select1 = modal.querySelector('#select1'); const input2 = modal.querySelector('#input2'); const select2 = modal.querySelector('#select2'); const units = toolData.units || { 'Celsius': 'c', 'Fahrenheit': 'f', 'Kelvin': 'k' }; // Populate select dropdowns for (const unitName in units) { select1.innerHTML += ``; select2.innerHTML += ``; } select2.selectedIndex = 1; function convert() { const val1 = parseFloat(input1.value); const fromUnit = select1.value; const toUnit = select2.value; if (isNaN(val1)) { input2.value = ''; return; } let result; // Special case for temperature if (toolId === 'temperature') { if (fromUnit === toUnit) { result = val1; } else if (fromUnit === 'Celsius') { result = toUnit === 'Fahrenheit' ? (val1 * 9/5) + 32 : val1 + 273.15; } else if (fromUnit === 'Fahrenheit') { result = toUnit === 'Celsius' ? (val1 - 32) * 5/9 : (val1 - 32) * 5/9 + 273.15; } else { // From Kelvin result = toUnit === 'Celsius' ? val1 - 273.15 : (val1 - 273.15) * 9/5 + 32; } } else { // Standard unit conversion const baseValue = val1 * toolData.units[fromUnit]; result = baseValue / toolData.units[toUnit]; } // Display result rounded to a reasonable number of decimal places input2.value = Number(result.toFixed(6)); } // Initial conversion convert(); input1.addEventListener('input', convert); select1.addEventListener('change', convert); select2.addEventListener('change', convert); // Allow two-way conversion input2.addEventListener('input', () => { const val2 = parseFloat(input2.value); const fromUnit = select2.value; const toUnit = select1.value; if (isNaN(val2)) { input1.value = ''; return; } let result; if (toolId === 'temperature') { if (fromUnit === toUnit) { result = val2; } else if (fromUnit === 'Celsius') { result = toUnit === 'Fahrenheit' ? (val2 * 9/5) + 32 : val2 + 273.15; } else if (fromUnit === 'Fahrenheit') { result = toUnit === 'Celsius' ? (val2 - 32) * 5/9 : (val2 - 32) * 5/9 + 273.15; } else { // From Kelvin result = toUnit === 'Celsius' ? val2 - 273.15 : (val2 - 273.15) * 9/5 + 32; } } else { const baseValue = val2 * toolData.units[fromUnit]; result = baseValue / toolData.units[toUnit]; } input1.value = Number(result.toFixed(6)); }); } } })();