Countdown Timer tool

 

Countdown Timer

Select a date and time:

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .timer-container { max-width: 600px; margin: 50px auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); text-align: center; } h1 { color: #333; } .input-group { margin-bottom: 20px; } input[type="datetime-local"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 3px; } button { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 3px; cursor: pointer; } button:hover { background-color: #0056b3; } #countdown { font-size: 24px; font-weight: bold; margin-top: 20px; } let countdownInterval; function startTimer() { const endDate = new Date(document.getElementById('date-input').value).getTime(); if (isNaN(endDate)) { alert('Please select a valid date and time.'); return; } clearInterval(countdownInterval); countdownInterval = setInterval(() => { const now = new Date().getTime(); const distance = endDate - now; if (distance <= 0) { clearInterval(countdownInterval); document.getElementById('countdown').innerHTML = 'Countdown expired!'; } else { const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById('countdown').innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`; } }, 1000); }