In this tutorial we going to make animated countdown timer in HTML CSS & JavaScript. Countdown timer are a great way to add excitement and suspense to your website or app. Learn how to create your own countdown in JavaScript with animation effect (fade-out) with this detailed guide.
This tutorial includes step-by-step instructions, code examples, and screenshots. I have already shared tutorial on counters in JavaScript in previous blog posts you can search it out.
A countdown timer in JavaScript is a countdown screen that displays a number or seconds that decreases over time until it reaches zero or its minimum value. It is often used to show how much time is left until an event, such as a sale, a game, or a presentation.
This count down decrement with fade out animation (like 5,4,3,2,1). It's just the simple count down there is nothing after that I have added. You can use it as countdown screen for your website. This countdown I have made using html CSS and JavaScript, and for animation I have used CSS keyframes. You can see demo in below YouTube video.
Video Tutorial of Animated Countdown Timer.
Count Down in HTML CSS & JavaScript.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
I’ve integrated JavaScript within the HTML file inside the script tag. You can create a separate file and link it to an HTML file.
Let's start making count down timer (in seconds) in HTML CSS and JavaScript step by step.
Step 1: Create basic structure.
Create basic setup for files and basic structure of HTML and CSS.
I have added CSS for body tag that make its inner element in centre.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript CountDown</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
<script>
</script>
</html>
CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Step 2: Create a counter to countdown.
Create a counter for count down. We'll create an element with class="counter". This is the element in which the countdown will show, meaning here we made the decrement counting visible with animation.
Also read: Create an simple increment and decrement counter using HTML, CSS and JavaScript.
Also read: Create and character counter using JavaScript.
HTML
<div class="counter">1</div>
CSS
.counter{
font-size: 80px;
font-weight: bold;
color: blue;
}
Output:
This value (1) is just to show it's going to be dynamic later.
Create an animation for the counter.
Now let's create an animation class for counter. So how are we going to animate the counter? We are going to create and add an a separate class with name active class to the counter class.
We are going to add an animation effect (fade out effect) to that active class. And when this class is added to the counter class the counter class will too get animated.
Also read: Create a ballon and flying animation effect on a mouse click using html css and javascript.
CSS
.active{
animation-name: scale;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes scale {
from{
scale: 1;
opacity: 1;
}
to{
scale: 3;
opacity: 0;
}
}
Step 3: JavaScript for count down functionality.
Now let add JavaScript for count down functionality.
First define variable.
JavaScript
let counter = document.querySelector(".counter");
let counts = 6;
Now we are going to make the countdown timer functional, so for that we are going to use a set time interval function and inside we decrement the counts variable value. And that value we are going to add in the counter class (counter inner HTML).
But where do we have to decrement or count the value down? So, for that we are going to add a condition that checks if the counts value is equal to zero then the interval will stop.
If you want the countdown to start again then you can update counts variable value to 6. (Or add another value from where you want to start the countdown) instead of clearing the interval.
JavaScript
let interval = setInterval(() => {
counts--;
if(counts == 1){
clearInterval(interval);
}
counter.innerHTML = counts;
}, 1000);
Till now countdown works perfectly. But we have to add animation in it. We have to animate the count down.
So, let's add that active class that we created in CSS for animation. We also remove that active class (after a few milliseconds) for adding it again for another number, so that it can animate too.
And we also remove the counter class innerHTML at the time of removing the active class. As it gets value again when run.
JavaScript
let interval = setInterval(() => {
counts--;
if(counts == 1){
clearInterval(interval);
}
counter.innerHTML = counts;
counter.classList.add("active");
setTimeout(() => {
counter.classList.remove("active");
counter.innerHTML = "";
}, 800);
}, 1000);
So that’s its simple count down is ready. You can see demo in above YouTube video.
You may like:
- How to add character input limit in textarea using HTML, CSS and JavaScript.
- How to create a simple increment and decrement counter using HTML, CSS and JavaScript.
- How to create counter that increment or decrement until button released or continously pressed using HTML, CSS and JavaScript.
- How to create a tags input box with tags counter using JavaScript.
- Create a word counter using JavaScript.
Final code:
So that’s its countdown in JavaScript is ready using HTML CSS and JavaScript. If you have any question or suggestion you can write in comment section.
Share your thoughts.