Time Calculator tool with colorful styling and all its features use any free library...

 

Time Calculator

Time 1 (HH:MM:SS): Operation: Add Subtract Time 2 (HH:MM:SS):

Result: 00:00:00

* { box-sizing: border-box; } body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #72c6ef, #f0a3b7); color: #333; margin: 0; padding: 20px; } .container { background: white; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); padding: 20px; max-width: 500px; margin: auto; text-align: center; } h1 { color: #ff6347; } .time-inputs { display: flex; flex-direction: column; margin-bottom: 20px; } label { margin: 10px 0 5px; font-weight: bold; } input[type="time"], select { padding: 10px; border-radius: 5px; border: 1px solid #ddd; margin-bottom: 15px; } button { background-color: #ff6347; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #e5533d; } h2 { margin-top: 20px; } document.getElementById('calculate').addEventListener('click', function() { const time1 = document.getElementById('time1').value.split(':').map(Number); const time2 = document.getElementById('time2').value.split(':').map(Number); const operation = document.getElementById('operation').value; const totalSeconds1 = time1[0] * 3600 + time1[1] * 60 + time1[2]; const totalSeconds2 = time2[0] * 3600 + time2[1] * 60 + time2[2]; let resultSeconds; if (operation === 'add') { resultSeconds = totalSeconds1 + totalSeconds2; } else { resultSeconds = totalSeconds1 - totalSeconds2; } if (resultSeconds < 0) { resultSeconds = 0; // Prevent negative results } const hours = Math.floor(resultSeconds / 3600); const minutes = Math.floor((resultSeconds % 3600) / 60); const seconds = resultSeconds % 60; document.getElementById('result').textContent = String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0'); });