Building a Countdown Timer with JavaScript
Introduction
The countdown timer is a simple app you can build to exercise your skills as a developer. To build the countdown timer you will need the basic knowledge of HTML, CSS, and JavaScript.
Building the structure with HTML
We are starting with creating a div with a class container which will have all of the div with box class nested inside, the box class div have h2 element for the static unit text and p element which will hold the values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<link rel="stylesheet" href="style.css">
<script defer src="main.js"></script>
</head>
<body>
<div class="container">
<div style="width: 130px;" class="box">
<h2 id="days-text">Days</h2>
<p id="days">000</p>
</div>
<div class="box">
<h2 id="hours-text">Hours</h2>
<p id="hours">00</p>
</div>
<div class="box">
<h2 id="minutes-text">Minutes</h2>
<p id="minutes">00</p>
</div>
<div class="box">
<h2 id="seconds-text">Secondes</h2>
<p id="seconds">00</p>
</div>
</div>
<div style="background: rgb(204, 24, 24);" class="alert">
<h1 style="padding: 50px 80px;color: white;">Finished!</h1>
</div>
</body>
</html>
Styling the structure with CSS
The next step is to style our elements which we added previously using CSS.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background: rgb(18, 19, 18);
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 600px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 100px;
height: 100px;
margin: 0 15px;
}
h2{
text-align: center;
padding-top: 2px;
color: blanchedalmond;
}
.box p{
font-size: 50px;
text-align: center;
font-family: sans-serif;
font-weight: 800;
margin-bottom: 15px;
color: blanchedalmond;
}
.alert{
display: none;
}
Adding logic with JavaScript
Lastly, we will need to add JavaScript for the logic part so our countdown timer can be functional.
const finaleTime = new Date("January 1, 2022 00:00:00").getTime();
const timer = () =>{
const currentTime = new Date().getTime();
let difference = finaleTime - currentTime;
// Displaying the alert when the timer finishes.
if(difference < 0){
document.querySelector('.alert').style.display = 'block';
document.querySelector('.container').style.display = 'none';
}
let days = Math.floor(difference / (1000*60*60*24));
let hours = Math.floor(difference % (1000*60*60*24) / (1000*60*60));
let minutes = Math.floor(difference % (1000*60*60)/ (1000*60));
let seconds = Math.floor(difference % (1000*60) / 1000);
// Adding the zeros.
days <= 99 ? days = `0${days}` : days;
days <= 9 ? days = `00${days}` : days;
hours <= 9 ? hours = `0${hours}` : hours;
minutes <= 9 ? minutes = `0${minutes}` : minutes;
seconds <= 9 ? seconds = `0${seconds}` : seconds;
document.querySelector('#days').textContent = days;
document.querySelector('#hours').textContent = hours;
document.querySelector('#minutes').textContent = minutes;
document.querySelector('#seconds').textContent = seconds;
}
timer();
// Calling the function every 1000 milliseconds.
setInterval(timer, 1000);
With this step, we have finished creating our Countdown Timer with JavaScript.
Further Reading
For more information on learning JavaScript, I highly recommend the following books:
Tweet