Hello and welcome to today’s tutorial. Today we will create a countdown to a specific date. The design of this countdown will be responsive. For this tutorial, we use HTML, CSS and Javascript. The countdown shows 4 different boxes displaying days, hours, minutes and seconds left for the date. The countdown keeps updating every second. Let us get started with the tutorial.
Video Tutorial:
I have a video version of this tutorial on my youtube channel, If you would like you can check it out here down below:
Project Folder Structure:
Before moving to the coding part let us check out the project folder structure. The project folder is called – Countdown. Within this folder, we have three files named – index.html, style.css and script.js. They are the HTML document, the stylesheet and the script file respectively. HTML document, the stylesheet and the script file respectively.
HTML:
We start with the HTML code. The HTML code consists of a div with a class name countdown. Inside countdown, we have 4 div called box. Each of this box further consists of 2 span elements. The first span element will display the number count while the second one will display the label for each of the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="countdown">
<div class="box">
<span class="num" id="day-box">00</span>
<span class="text">Days</span>
</div>
<div class="box">
<span class="num" id="hr-box">00</span>
<span class="text">Hours</span>
</div>
<div class="box">
<span class="num" id="min-box">00</span>
<span class="text">Minutes</span>
</div>
<div class="box">
<span class="num" id="sec-box">00</span>
<span class="text">Seconds</span>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Now we move on to code the CSS. We will be using relative units and media queries to make the design responsive. Let us start with the CSS reset followed by applying ‘#111111’ as the background colour for the body.
We set the width for the countdown to 80vw. The contents of countdown are positioned using the flex layout. we use the transform method to center the countdown
The height and width of each box is set to 28vmin to make it a perfect square. The num and text are displayed in a column using the flexbox layout.
The media queries has 3 breakpoints at max-width 1024px, 768px amd 480px. We set different dimensions for countdown and box through this media queries.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins",sans-serif;
color: #ffffff;
}
body{
background-color: #111111;
}
.countdown{
width: 80vw;
display: flex;
justify-content: space-around;
gap: 10px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
.box{
width: 28vmin;
height: 28vmin;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
position: relative;
box-shadow: 15px 15px 30px rgba(0,0,0,0.5);
font-size: 16px;
}
.box:after{
content: "";
position: absolute;
background-color: rgba(255,255,255,0.12);
height: 100%;
width: 50%;
left: 0;
}
span.num{
background-color: #202020;
height: 100%;
width: 100%;
display: grid;
place-items: center;
font-weight: 600;
font-size: 5em;
}
span.text{
font-size: 1.2em;
background-color: #2887e3;
display: block;
width: 100%;
text-align: center;
padding: 0.5em 0;
font-weight: 400;
}
@media screen and (max-width: 1024px){
.countdown{
width: 85vw;
}
.box{
height: 26vmin;
width: 26vmin;
font-size: 12px;
}
}
@media screen and (max-width: 768px){
.countdown{
width: 90vw;
flex-wrap: wrap;
gap: 30px;
}
.box{
width: calc( 50% - 40px );
height: 30vmin;
font-size: 14px;
}
}
@media screen and (max-width: 480px){
.countdown{
gap: 15px;
}
.box{
width: 100%;
height: 25vmin;
font-size: 8px;
}
.span.text{
font-size: 1.5em;
}
}
Javascript:
Now in the javascript file, we get each box and assign it to variables. Next, we set the date to which we want to count down to. The format for setting this date is – Date(year, month, day, hour, minute). Here please note that the month is counted from 0 to 11. We calculate endTime using the getTime(). You can know more about getTime here().
The function countdown consists of the todayDate variable that stores the current date. Using this we calculate the todayTime variable.
Next, we have to find if the endDate has already passed. For this reason, we calculate a remaining time variable that is the difference between endTime and todayTime. If todayTime is greater than the endTime, it means that the countdown has expired. We clear the interval in this case.
If not, we calculate the remaining days, hours, minutes and seconds using the formula as shown in the code below. This function is called every second using the setInterval function.
Now we format the numbers. If it is a single-digit number we add a ‘zero’ in front of it using the addZeroes function.
let dayBox = document.getElementById("day-box");
let hrBox = document.getElementById("hr-box");
let minBox = document.getElementById("min-box");
let secBox = document.getElementById("sec-box");
//Format: Date(year, month, day, hour, minute)
//Year is counter from 0 to 11
let endDate = new Date(2022, 8, 5, 16, 30);
//Output value in milliseconds
let endTime = endDate.getTime();
function countdown() {
let todayDate = new Date();
//Output value in milliseconds
let todayTime = todayDate.getTime();
let remainingTime = endTime - todayTime;
//60sec => 1000 milliseconds
let oneMin = 60 * 1000;
//1hr => 60 minutes
let oneHr = 60 * oneMin;
//1 day => 24 hours
let oneDay = 24 * oneHr;
//Function to format number if it is single digit
let addZeroes = (num) => (num < 10 ? `0${num}` : num);
//If end dat is before today date
if (endTime < todayTime) {
clearInterval(i);
document.querySelector(
".countdown"
).innerHTML = `<h1>Countdown had expired!</h1>`;
}
//If end date is not before today date
else {
//Calculating remaining days, hrs,mins ,secs
let daysLeft = Math.floor(remainingTime / oneDay);
let hrsLeft = Math.floor((remainingTime % oneDay) / oneHr);
let minsLeft = Math.floor((remainingTime % oneHr) / oneMin);
let secsLeft = Math.floor((remainingTime % oneMin) / 1000);
//Displaying Valurs
dayBox.textContent = addZeroes(daysLeft);
hrBox.textContent = addZeroes(hrsLeft);
minBox.textContent = addZeroes(minsLeft);
secBox.textContent = addZeroes(secsLeft);
}
}
let i = setInterval(countdown, 1000);
countdown();
If you have any issues creating this countdown you can download the source code that I have provided below by clicking on the download code button.
