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
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
- 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.
- Create a stack of numbers
- 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
We have added the icon with an emoji. We also have a
countdown which will contain our
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:
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.
We’ve found a custom font from fonts.google.com and added the link to our CodePen settings:
Positioning the Countdown and Numbers
Add the following to our CSS.
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, all of our extra numbers are hidden from view:
This is where the work comes in to start moving our numbers every second.
Let’s start by grabbing everything we need from our DOM and creating our variables.
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
- Use the
heightto figure out how far to offset the list of numbers
- Apply that new
offsetto the numbers section with CSS transforms
- Make sure to stop the interval once we reach 10
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
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
We have to add three lines to our
createTimer function to reset everything:
That’s it! We now have our button!
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
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.