Let’s build a fun countdown timer with Tailwind CSS and Alpinejs.
A countdown timer is a way to display the remaining time until a certain event or deadline. It’s a great way to showcase the urgency of an event or to give people a sense of time left.
Uses cases:
This is the structure of the project: Understanding the code:
x-data="{ endDate: new Date('2024-12-31T23:59:59').getTime(), remainingTime: 0, formatTime(time) {
: This is the data that will be used to store the end date and remaining time.const days = Math.floor(time / (1000 * 60 * 60 * 24)); const hours = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((time % (1000 * 60)) / 1000);
: This is the calculation that will be used to format the remaining time.setInterval(() => {
: This is the event listener that will update the remaining time when the end date changes.const now = new Date().getTime();
: This is the variable that will be used to calculate the remaining time.const remainingTime = endDate - now;
: This is the calculation that will be used to update the remaining time.: 0;
: This is the condition that will be checked when the remaining time is updated.}, 1000);
: This is the interval that will be used to update the remaining time.x-if="remainingTime > 0"
: This is the condition that will be checked when the remaining time is greater than 0.x-text="formatTime(remainingTime).days"
: This is the display of the days remaining.x-text="formatTime(remainingTime).hours"
: This is the display of the hours remaining.x-text="formatTime(remainingTime).minutes"
: This is the display of the minutes remaining.x-text="formatTime(remainingTime).seconds"
: This is the display of the seconds remaining.<div>Countdown has ended!</div>
: This is the display of the countdown has ended message.<div
x-data="{
endDate: new Date('2024-12-31T23:59:59').getTime(),
remainingTime: 0,
formatTime(time) {
const days = Math.floor(time / (1000 * 60 * 60 * 24));
const hours = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((time % (1000 * 60)) / 1000);
return { days, hours, minutes, seconds };
}
}"
x-init="() => {
setInterval(() => {
const now = new Date().getTime();
const remainingTime = endDate - now;
$data.remainingTime = remainingTime > 0 ? remainingTime : 0;
}, 1000);
}">
<template x-if="remainingTime > 0">
<div>
<div>
<div
x-text="formatTime(remainingTime).days">
</div>
<div>Days</div>
</div>
<div>
<div
x-text="formatTime(remainingTime).hours">
</div>
<div>Hours</div>
</div>
<div>
<div
x-text="formatTime(remainingTime).minutes">
</div>
<div>Minutes</div>
</div>
<div>
<div
x-text="formatTime(remainingTime).seconds">
</div>
<div>Seconds</div>
</div>
</div>
</template>
<template x-if="remainingTime <= 0">
<div>
<div>Countdown has ended!</div>
</div>
</template>
</div>
This is a simple countdown timer that can be used for any type of content, such as movies, books, products, or services. The code is easy to understand and the structure is clear. The use of Tailwind CSS and Alpine.js makes it easy to style the countdown timer and add interactivity. Remeber to make it as accessible as possible, and you’re good to go!
Hope you enjoyed this tutorial and have a great day!
/Michael Andreuzza
"I bought a beautiful theme from Lexington a couple weeks ago. I didn't know Astro at the time, but Michael helped me get set up and really went above and beyond with his support. Now I'm happily redoing my site to look gorgeous with his template."
Stuart
Creator of saasydb.com
"Michael is one of the best designers on Twitter, would highly recommend his Lexington Themes if you want something in tailwind that doesn’t look the same as everyone else!"
Alex Hughes
letsloopin.com
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
No subscription required!
Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.