Introduction
Time flies they say, every day you are counting down on time, and you really want to know how much time you have left either to complete a project, release a product, or even tell your user when a promo campaign will be terminated. Knowing how to build a javascript countdown timer will allow you to integrate it into your web application.
In this article, I will take you through the step-by-step simple way to build your countdown timer in JavaScript.
Let’s get started.
Create a Boilerplate with HTML
A boilerplate is a pre-written code template and will be manipulated to make a field that will show our countdown time. Since HTML is what can help us put content on the web, we have to write a few lines of code in HTML.
Firstly, we create index.html, style.css, and script.js files in our text editor (I use VS Code). Then, we create an HTML boilerplate in the index.html file by pressing shift + ! + enter.
We have :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Linking the HTML file with CSS and JavaScript files
Let link the style.css and script.js files with the index.html file, and rename the Document in the 'title' tag as CountDown Timer.
We have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CountDown Timer</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Creating Heading and Countdown Value
Let’s create a heading and count down value using an H3 tag, and a paragraph tag. we give the H3 tag a class of “alert” and the p tag an id of “countdown”, also we wrapped the H3 and P tags in a div and give them a class of “container” to target them in our styling and javascript.
You will notice that we left our p tag empty without imputing any element. This is done to make sure the counter field is blank at first and then counting start from 10, which is the set value.
We have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CountDown Timer</title>
</head>
<body>
<div class=“container”>
<h3 class="alert">Your Time Start Now!</h3>
<p id="countdown"></p>
</div>
<script src="script.js"></script>
</body>
</html>
Styling The Counter Field
Let’s import a Roboto font family from google font and then give the body a font family of Roboto San Serif and a margin of 0.
Let’s make the container a flex, and the flex-direction a column, this will make the heading and counter be on top of each other, then give it a width of 50% size of the whole page, and make the margin auto to put it at the center of the web page.
Let’s give the heading a font size of 30px, a color of gold and a height of 35px, then let’s give the countdown time a font size of 50px, a font weight of bold, a color of red, a height of 70px, a width of 200px, background color of white, display of inline flex, align-item of center and justify-content of center.
We have:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
font-family: Roboto sans-serif;
margin: 0;
}
.container{
display: flex;
flex-direction: column;
background-color: aliceblue;
align-items: center;
justify-content: center;
width: 50%;
margin: auto;
}
.alert{
font-size: 30px;
color: rgb(189, 174, 5);
height: 35px;
}
#countdown{
font-size: 50px;
font-weight: bold;
color: red;
height: 80px;
width: 200px;
background-color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
Creating Functionality with JavaScript
Here is where the real magic takes place.
Let's declare a variable with the 'const' keyword, name it “startingMinute” and point to a time value we want to Strat from to it. 'const' keyword means we are not changing the value of the variable. Then we declare another variable using the let keyword called time and point the product of startingTime and 60 seconds to it.
The 'Let' keyword means we can change the value later.
Let's declare another variable with a 'const' keyword and point it to the “countdown” attribute in the p tag, and then get the element by id to dynamically put a time value in the empty paragraph.
Next Is to create a function that will help us update the counting at every interval and tell us Time up when the counting time elapses. Inside the function, we declare a variable named “minutes” and point it to a value gotten by dividing the time by 60 seconds and convert the result into the nearest whole number using Math.floor() method. Also, we declare another variable named seconds and point it to the result of the remaining time modulus 60, and finally, we use the ternary operator to say time up when the time reads 0:0.
We have:
//Declare the start minute
const startingMinute = 10;
//We convert the start minute to seconds to get seconds
let time = startingMinute * 60;
//we dynamically put the time in the empty p tag with the id "countdown"
const countDownTime = document.getElementById("countdown");
//we set the interval that the time is counting down to a 1-second interval
const myInterval = setInterval(updateCountdown, 1000);
//we write a function to help us update the time as the interval is counting down
function updateCountdown(){
let minutes = Math.floor(time / 60);
let seconds = time % 60;
//we use the ternary operator to stop the time when the minutes and the seconds read 0:0 and say time up.
countDownTime.innerHTML = ${minutes} : ${seconds} < ${minutes = minutes < 0 ? "0": minutes}? "Time up" : ${minutes} : ${seconds};
// we decrease the startingMinute by a second at every one-second interval.
time--;
}
Conclusion
In this article, you have learned how to build a countdown timer in javascript. You can find the complete source code of this tutorial on Codepen here
Learn more about
JavaScript setTimeOur() Method here
JavaScript setInterval() Method here
JavaScript clearInterval() Method here
Wow! I am glad you read to the end of this article, if you know another method of building a countdown timer in javascript share your method in the comment box below.
if you’ve learned something new from this article or would love to read more of my article, let’s connect on