In this article, I will explain how you can create a Countdown Timer using Alpine.js. If you’re not familiar with Alpine.js, don’t worry—I will first give you a brief introduction before showing you how to build the timer.
So What’s Alpine.js, Anyway?
Okay, so Alpine.js is this neat little JavaScript framework. It’s super lightweight, doesn’t take up much space, and lets you add cool interactive features to your webpage without breaking a sweat. It’s kind of like Vue.js, but way simpler—no complex setup or anything.
If you’re like me and just want to throw some quick JavaScript into your HTML without dragging in React, Vue, or whatever else, this is the way to go.
If you want to learn more about Alpine.js, just read my full article Introduction to Alpine.js
Here’s what I like about Alpine.js:
- Really tiny file size—less than 10KB.
- Super easy to learn and use, even for the simplest things!
- Feels a bit like Vue.js, if you’re familiar with that.
- It is lightweight and doesn’t take up much space.”
Countdown Timer Preview
Now, let’s dive into the implementation. I’ll walk you through each step, making it simple and easy to follow so you can get your countdown timer up and running in no time!
Step by Step guide for you
Step 1: Basic HTML
Create a basic HTML page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Countdown Timer</title>
</head>
<body>
<!-- code goes here -->
</body>
</html>Step 2: Add Alpine.js
Add the Alpine.js CDN link to your file.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>Step 3: Set Up Countdown
- Define the countdown data, including the target date and time.
<div x-data="{
targetTime: new Date().getTime() + (80 * 24 * 60 * 60 + 15 * 60 * 60 + 53 * 60 + 41) * 1000,
timeLeft: {}
}">Step 4: Update Time
Create a function that calculates the time left and updates the countdown.”
updateCountdown() {
let difference = this.targetTime - new Date().getTime();
this.timeLeft = difference > 0 ? {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
seconds: Math.floor((difference % (1000 * 60)) / 1000)
} : { days: 0, hours: 0, minutes: 0, seconds: 0 };
},Step 5: Run It
Start the countdown and set it to repeat until the target time is reached.
init() {
this.updateCountdown();
setInterval(() => this.updateCountdown(), 1000);
}Step 6: Show Time
Display the countdown on the page by binding the calculated time to an HTML element.”
<div>
<h1>Countdown to Launch</h1>
<div>
<span x-text="timeLeft.days"></span> Days
<span x-text="timeLeft.hours"></span> Hours
<span x-text="timeLeft.minutes"></span> Minutes
<span x-text="timeLeft.seconds"></span> Seconds
</div>
</div>Full Code Snippet
Here’s everything together:
Here’s a simple countdown timer made with Alpine.js. It doesn’t have any CSS or Tailwind, but you can copy or download it and style it with Tailwind or any other design you like!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Countdown Timer</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
</head>
<body>
<div x-data="{
targetTime: new Date().getTime() + (80 * 24 * 60 * 60 + 15 * 60 * 60 + 53 * 60 + 41) * 1000,
timeLeft: {},
updateCountdown() {
let difference = this.targetTime - new Date().getTime();
this.timeLeft = difference > 0 ? {
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
seconds: Math.floor((difference % (1000 * 60)) / 1000)
} : { days: 0, hours: 0, minutes: 0, seconds: 0 };
},
init() {
this.updateCountdown();
setInterval(() => this.updateCountdown(), 1000);
}
}">
<div>
<h1>Countdown to Launch</h1>
<div>
<span x-text="timeLeft.days"></span> Days
<span x-text="timeLeft.hours"></span> Hours
<span x-text="timeLeft.minutes"></span> Minutes
<span x-text="timeLeft.seconds"></span> Seconds
</div>
</div>
</div>
</body>
</html>Final Thoughts
This code creates a simple countdown timer. The HTML builds the page, Alpine.js powers the timer, and the logic sets a future time, updates it every second, and shows the days, hours, minutes, and seconds left. It’s an easy way to make a live countdown for any event!