Countdown Timer tool with colorful styling and all its features use any free library...

 

Countdown Timer

00 Days

00 Hours

00 Minutes

00 Seconds

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background: linear-gradient(to right, #00b4db, #0083b0); color: #fff; display: flex; justify-content: center; align-items: center; height: 100vh; text-align: center; } .container { background-color: rgba(0, 0, 0, 0.5); padding: 20px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } h1 { font-size: 2.5rem; margin-bottom: 20px; } .countdown { display: flex; justify-content: center; gap: 20px; } .countdown-box { background-color: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; width: 80px; text-align: center; } .countdown-number { font-size: 2rem; font-weight: bold; color: #ffcc00; } .label { font-size: 1rem; margin-top: 5px; display: block; } @media screen and (max-width: 768px) { .countdown { flex-direction: column; } .countdown-box { width: 100px; margin-bottom: 10px; } } // Set the end date for the countdown let endDate = moment().add(10, 'days'); // Example: 10 days from now function updateCountdown() { let now = moment(); let duration = moment.duration(endDate.diff(now)); let days = Math.floor(duration.asDays()); let hours = Math.floor(duration.hours()); let minutes = Math.floor(duration.minutes()); let seconds = Math.floor(duration.seconds()); document.getElementById('days').textContent = days < 10 ? '0' + days : days; document.getElementById('hours').textContent = hours < 10 ? '0' + hours : hours; document.getElementById('minutes').textContent = minutes < 10 ? '0' + minutes : minutes; document.getElementById('seconds').textContent = seconds < 10 ? '0' + seconds : seconds; // Stop the countdown when it reaches zero if (duration.asSeconds() <= 0) { clearInterval(timer); document.getElementById('countdown').innerHTML = "

Countdown Finished!

"; } } // Update countdown every second let timer = setInterval(updateCountdown, 1000);