Hire the author: Brian O

Image Source

https://i.pinimg.com/236x/2c/71/32/2c7132b1ae8886a4005c56076fdd3b30–countdown-timer-motion-graphics.jpg

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.

Countdown Timer

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:

  1. Create a stack of numbers
  2. Create a JavaScript interval for every second
  3. 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>
view raw Index.html hosted with ❤ by GitHub

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;
}
view raw style.css hosted with ❤ by GitHub

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&amp;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;
}
view raw countdown.css hosted with ❤ by GitHub

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;
view raw variables.js hosted with ❤ by GitHub

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:

  1. Increment our count
  2. Use the count and the height to figure out how far to offset the list of numbers
  3. Apply that new offset to the numbers section with CSS transforms
  4. 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);
}
view raw timer.js hosted with ❤ by GitHub

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(() => {...
}
view raw reset.js hosted with ❤ by GitHub

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!!!

Hire the author: Brian O