Create a Countdown Timer with HTML, Tailwind CSS, and JavaScript
How to Build a Countdown Timer with HTML, Tailwind CSS, and JavaScript
Learn how to build a responsive countdown timer using HTML, Tailwind CSS, and JavaScript. This beginner-friendly project is perfect for mastering core web development skills and understanding Tailwind CSS utilities.
How to Build a Countdown Timer with HTML, Tailwind CSS, and JavaScript
This tutorial will guide you through creating a stylish countdown timer using HTML, Tailwind CSS, and a bit of JavaScript. By the end of this project, you’ll have a fully functional timer that can be customized to count down to any date or time.
Step 1: Set Up Your Project Environment
Create the Project Folder
Create a folder called
timer-projectand navigate into it.
Create the HTML File
Inside the folder, create a new file named
index.html.
Add the HTML Boilerplate
Open the file in your code editor and add the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-red-800 text-gray-200 flex items-center justify-center h-screen">
</body>
</html>
Run a Live Server
Use a live server (e.g., Live Server extension in VS Code) to view changes as you work.
Step 2: Build the Timer Structure
Add the Timer HTML
Inside the
<body>tag, create a container for the timer:
<div id="timer" class="px-2 flex gap-2 justify-center uppercase">
<div id="days" class="bg-black px-6 py-1 text-5xl shadow-md rounded-l-lg">0</div>
<div id="hours" class="bg-black px-6 py-1 text-5xl shadow-md">0</div>
<div id="minutes" class="bg-black px-6 py-1 text-5xl shadow-md">0</div>
<div id="seconds" class="bg-black px-6 py-1 text-5xl shadow-md rounded-r-lg animate-pulse">0</div>
</div>
Customize the Design
The
Tailwind CSSclasses ensure the timer is visually appealing, with a dark background and rounded corners for the first and last elements.The
animate-pulseclass adds a subtle animation to the seconds.
Step 3: Add the Countdown Functionality with JavaScript
Create a
<script>TagAdd a
<script>tag at the end of the<body>tag:
<script> window.onload = () => { const countdownTime = 5 * 24 * 60 * 60; // 5 days in seconds const display = { days: document.querySelector("#days"), hours: document.querySelector("#hours"), minutes: document.querySelector("#minutes"), seconds: document.querySelector("#seconds"), }; function startCountdown(duration) { let timer = duration; setInterval(() => { display.days.textContent = Math.floor(timer / (60 * 60 * 24)); display.hours.textContent = Math.floor((timer % (60 * 60 * 24)) / (60 * 60)); display.minutes.textContent = Math.floor((timer % (60 * 60)) / 60); display.seconds.textContent = timer % 60; timer = timer > 0 ? timer - 1 : duration; }, 1000); } startCountdown(countdownTime); }; </script>How It Works
countdownTime: Defines the duration in seconds. In this example, it’s set to 5 days.display: Maps the timer’s elements (days, hours, minutes, and seconds) to JavaScript variables.setInterval: Updates the timer every second, recalculating and displaying the remaining time.
Step 4: Test and Customize
Run Your Timer
Open your project in a browser using a live server to see the countdown timer in action.
Customization Ideas
Change Colors: Modify Tailwind CSS classes for different background and text colors.
Adjust Duration: Update
countdownTimeto match your desired countdown period.Add Events: Trigger actions (e.g., play sound, display a message) when the timer hits zero.
Final Project Code
Here’s the full code for the countdown timer:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Countdown Timer</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-red-800 text-gray-200 flex items-center justify-center h-screen"> <div id="timer" class="px-2 flex gap-2 justify-center uppercase"> <div id="days" class="bg-black px-6 py-1 text-5xl shadow-md rounded-l-lg">0</div> <div id="hours" class="bg-black px-6 py-1 text-5xl shadow-md">0</div> <div id="minutes" class="bg-black px-6 py-1 text-5xl shadow-md">0</div> <div id="seconds" class="bg-black px-6 py-1 text-5xl shadow-md rounded-r-lg animate-pulse">0</div> </div> <script> window.onload = () => { const countdownTime = 5 * 24 * 60 * 60; // 5 days in seconds const display = { days: document.querySelector("#days"), hours: document.querySelector("#hours"), minutes: document.querySelector("#minutes"), seconds: document.querySelector("#seconds"), }; function startCountdown(duration) { let timer = duration; setInterval(() => { display.days.textContent = Math.floor(timer / (60 * 60 * 24)); display.hours.textContent = Math.floor((timer % (60 * 60 * 24)) / (60 * 60)); display.minutes.textContent = Math.floor((timer % (60 * 60)) / 60); display.seconds.textContent = timer % 60; timer = timer > 0 ? timer - 1 : duration; }, 1000); } startCountdown(countdownTime); }; </script> </body> </html>Final Thoughts
This countdown timer is a perfect beginner project for mastering HTML, Tailwind CSS, and JavaScript. You can use it as-is or customize it for your needs, such as event promotions or reminders.
If you enjoyed this tutorial, subscribe to Wealth Dome for more web development tips and projects! Keep coding!