Hire the author: Brian O
Image Source
What We’ll Build
Here is our CSS/JS Countdown Timer. You can use this for several things. Advancing a user through your UI is the main idea here.
Final CodePen: https://codepen.io/Otoribrian/pen/PoZxExX
Introduction
Basically, a CSS/JS Countdown Timer allows the user to auto-advance to the next episode. I was watching Disney+ the other day (Mandalorian rocks!) and I saw a neat UI for auto-advancing a user to the next episode. It was a button with a countdown.
I thought “Can we make that in CSS?!” Let’s go ahead and make it!
Therefore in this article, I’ll show you how you can build a CSS/JS Countdown Timer. Let’s get started. You can find the code and config files on Github to follow throughout the tutorial
Glossary
- Countdown Timer – A mechanism that measures the remaining time from a preset amount of time and sounds an alarm when this time has elapsed.
- CSS – stands for Cascading Style Sheets. It describes how HTML elements are to be displayed on the screen, paper, or in other media. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files.
- Vanilla JS – is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications
Prerequisites
I developed this Countdown Timer using CSS/JS by using Codepen which is an online community for testing and showcasing user-created HTML, CSS, and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, called “pens,” and test them. It should get you started by creating an account with them and following through this tutorial would be much easier
The Technique
We’ll be letting CSS handle the animations since CSS animations are far more performant in browsers than letting JavaScript handle the animation. The steps for creating our CSS/JS Countdown Timer look like:
- Create a stack of numbers
- Create a JavaScript interval for every second
- Move the stack of numbers using CSS transforms
Step 1: The HTML
Let’s start with all of our HTML. We need two buttons along with all the numbers from 10-0
<div> | |
<button class="next"> | |
<span class="icon">👉</span> | |
Next Episode Starts in | |
<span class="countdown"> | |
10 | |
<span class="numbers"> | |
<span>10</span> | |
<span>9</span> | |
<span>8</span> | |
<span>7</span> | |
<span>6</span> | |
<span>5</span> | |
<span>4</span> | |
<span>3</span> | |
<span>2</span> | |
<span>1</span> | |
<span>0</span> | |
</span> | |
</span> | |
</button> | |
<button class="reset">Reset</button> | |
</div> |
We have added the icon with an emoji. We also have a countdown
which will contain our numbers
The reason we have the countdown div is so that we can place a 10
in there. This 10 will be responsible for providing some space in our UI for our numbers
in our CSS/JS Countdown Timer. It will have space in the document flow.
We are going to have to position our numbers
absolutely, which will take them out of the document flow.
Step 2: CSS
Let’s start our CSS
We have some basic styling for our buttons so that they look good:
/_ button styles are here _/ | |
button { | |
background: white; | |
border-radius: 5px; | |
border: none; | |
padding: 15px 30px; | |
font-size: 24px; | |
font-family: 'Muli'; | |
display: block; | |
text-transform: uppercase; | |
letter-spacing: 2px; | |
cursor: pointer; | |
transition: 0.3s ease all; | |
line-height: 1; | |
display: flex; | |
} | |
button:hover { | |
background: #eee; | |
} | |
.icon { | |
margin-right: 8px; | |
} | |
.reset { | |
font-size: 12px; | |
padding: 8px 16px; | |
margin: 100px auto 0; | |
} |
Now we’ll have some good looking buttons. The next step is to start positioning our numbers so that they show up in a column.
Custom Font
We’ve found a custom font from fonts.google.com and added the link to our CodePen settings:
https://fonts.googleapis.com/css?family=Muli&display=swap
Positioning the Countdown and Numbers
Add the following to our CSS.
.countdown { | |
position: relative; | |
display: block; | |
text-indent: -9999px; | |
overflow: hidden; | |
margin-left: 6px; | |
} | |
.numbers { | |
position: absolute; | |
top: 0; | |
left: 0; | |
text-align: center; | |
transition: 0.3s ease transform; | |
text-indent: 0; | |
} |
We have our countdown
area set to overflow: hidden
so that any numbers outside of its view are not seen. All we see is one number now.
Take a look at what this looks like behind the scenes without overflow: hidden
:

With overflow: hidden
, all of our extra numbers are hidden from view:

Step 3: JavaScript
This is where the work comes in to start moving our numbers every second.
Creating Variables
Let’s start by grabbing everything we need from our DOM and creating our variables.
// grab parts of our HTML | |
const countdownArea = document.querySelector('.countdown'); | |
const numbersArea = document.querySelector('.numbers'); | |
const resetBtn = document.querySelector('.reset'); | |
// create an interval and counter | |
let interval; | |
let count = 0; | |
// calculate the height of our numbers | |
const height = countdownArea.getBoundingClientRect().height; |
Creating a Timer
Next up, we’ll create a function to create a timer for our CSS/JS Countdown Timer. The things we need to do are:
- Increment our
count
- Use the
count
and theheight
to figure out how far to offset the list of numbers - Apply that new
offset
to the numbers section with CSS transforms - Make sure to stop the interval once we reach 10
// create the interval that creates the timer | |
function createTimer() { | |
interval = setInterval(() => { | |
// 1. increment our count | |
count++; | |
// 2. calculate the offset and apply it | |
const offset = height * count; | |
// 3. apply the offset using css transforms | |
numbersArea.style.transform = `translateY(-${offset}px)` | |
// 4. stop the interval at 10 | |
if (count >= 10) { | |
// go to the next episode | |
clearInterval(interval); | |
} | |
}, 1000); | |
} |
The last part is to actually call our new function. Add the following and our timer should start working for our CSS/JS Countdown Timer
createTimer();
Adding the Reset
The last part is to add the reset to our CSS/JS Countdown Timer. We’ll use the reset button we grabbed earlier to reset CSS/JS Countdown Timer
resetBtn.addEventListener('click', createTimer);
We have to add three lines to our createTimer
function to reset everything:
function createTimer() { | |
clearInterval(interval); | |
count = 0; | |
numbersArea.style.transform = 'translateY(0)' | |
// other code goes here... | |
// interval = setInterval(() => {... | |
} |
That’s it! We now have our button!
Learning Tools
HTML is a markup language, heavily utilized for creating web pages and web applications. HTML, when combined with JavaScript and CSS, has become a milestone for web development. One of the useful aspects of HTML is, it can embed programs written in a scripting language like JavaScript, which is responsible for affecting the behavior and content of web pages. CSS inclusion would affect the layout and appearance of the content like in this case a CSS/JS Countdown Timer. The basic building blocks of any HTML pages are HTML elements. The following below are the tutorials that aided me in this project
Learning Strategy
Implementing the concepts of HTML, CSS, and JS in the development of a Countdown button made it easier for me to understand the basic concepts that I had not known earlier on and also that HTML as a markup language has endless possibilities besides developing a CSS/JS Countdown Timer
Reflective Analysis
In Conclusion, we learned how to implement a CSS/JS Countdown Timer. If you are looking to let Javascript do the animations in this project, I would recommend using CSS since they are far more performant in browsers than letting JavaScript handle the animation
Conclusion
I hope this blog about developing a Countdown Button Timer using CSS/JS was informative and has added value to your knowledge. It took me 10 hours to complete the entire writeup including coding this application.
Future directions: Such concepts can be implemented in Subscription Entertainment sites such as Netflix, Amazon Prime Video and can also let the user cancel to advancing to the next episode and also this type of feature to be available in mobile applications too
Here is the link to the Github repository to get started.
Happy Coding!!!
Awesome blog 👍👏
The blog is nice and I have learned a lot from it. I like how you are explaining it in detail using simple English.I was able to read through the blog fast and test the code since it’s simple to follow and well-described. Future directions of this project can be integrating the countdown timer on a website. For example, a company website may feature a countdown to a product launch. Good Job.