Lexington has been awarded a grant from Astro, to celebrate. Get a 30% discount. Apply code LEXINGTON30 ( uppercase ) at checkout.
Let’s recreate the countdown timer from the tutorial with Alpine.js but with vainilla JavaScript.
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:
id="countdown"
: This is the id of the container element that will hold the countdown timer. JavaScript will use this id to target the element and inject the countdown timer.Classes are omited for brevity and clarity.
<div
id="countdown"
class="...">
</div>
document.addEventListener("DOMContentLoaded", () => {
: This is the event listener that will be triggered when the DOM is fully loaded.const countdownContainer = document.getElementById("countdown");
: This is the variable that will be used to target the countdown container element.const endDate = new Date("2024-12-31T23:59:59").getTime();
: This is the variable that will be used to store the end date of the countdown timer.function formatTime(time) {
: This is the function that will be used to format the remaining time.const days = Math.floor(time / (1000 * 60 * 60 * 24));
: This is the calculation that will be used to determine the number of days remaining.const hours = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
: This is the calculation that will be used to determine the number of hours remaining.const minutes = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
: This is the calculation that will be used to determine the number of minutes remaining.const seconds = Math.floor((time % (1000 * 60)) / 1000);
: This is the calculation that will be used to determine the number of seconds remaining.return { days, hours, minutes, seconds };
: This is the return statement that will be used to return the formatted time.function createCountdownElement(value, label) {
: This is the function that will be used to create the countdown elements.return
: This is the return statement that will be used to return the countdown element.<div class="countdown-item ...">
<div class="countdown-value ...">${value}</div>
<div class="countdown-label ...">${label}</div>
</div>
function updateCountdown() {
: This is the function that will be used to update the countdown.const now = new Date().getTime();
: This is the variable that will be used to store the current time.const remainingTime = Math.max(0, endDate - now);
: This is the variable that will be used to store the remaining time until the end date.const {days, hours, minutes, seconds} = formatTime(remainingTime);
: This is the variable that will be used to store the formatted time remaining.countdownContainer.innerHTML = remainingTime > 0 ?
: This is the conditional statement that will be used to determine whether to display the countdown elements or not.createCountdownElement(days, "Days")
: This is the function call that will be used to create the days countdown element.createCountdownElement(hours, "Hours")
: This is the function call that will be used to create the hours countdown element.createCountdownElement(minutes, "Minutes")
: This is the function call that will be used to create the minutes countdown element.createCountdownElement(seconds, "Seconds")
: This is the function call that will be used to create the seconds countdown element.<div class="..."><div class="...">Countdown has ended!</div></div>
: This is the string that will be used to display the countdown has ended message: createCountdownElement(0, "Seconds")
: This is the function call that will be used to create the seconds countdown element.The final code:
document.addEventListener("DOMContentLoaded", () => {
const countdownContainer = document.getElementById("countdown");
const endDate = new Date("2024-12-31T23:59:59").getTime();
function 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
};
}
function createCountdownElement(value, label) {
return `
<div class="countdown-item ...">
<div class="countdown-value ...">${value}</div>
<div class="countdown-label ...">${label}</div>
</div>
`;
}
function updateCountdown() {
const now = new Date().getTime();
const remainingTime = Math.max(0, endDate - now);
const {
days,
hours,
minutes,
seconds
} = formatTime(remainingTime);
countdownContainer.innerHTML =
remainingTime > 0 ?
createCountdownElement(days, "Days") +
createCountdownElement(hours, "Hours") +
createCountdownElement(minutes, "Minutes") +
createCountdownElement(seconds, "Seconds") :
`<div class="..."><div class="...">Countdown has ended!</div></div>`;
}
setInterval(updateCountdown, 1000);
});
In this tutorial, we learned how to create a countdown timer using Tailwind CSS and JavaScript. We covered the basic structure of the project, the JavaScript code, and the countdown elements. We also discussed the formatting of the remaining time and the updating of the countdown. By following these steps, you can create a visually appealing and functional countdown timer that can be used in various applications.
Remember to make your countdown timer responsive and user-friendly, and to test it thoroughly to ensure it works as expected.
Hope you enjoyed this tutorial and have a nice day!
/Michael Andreuzza
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!