Hello everyone! Welcome to yet another exciting tutorial. Since the new year is around the corner, I have decided to create a new year special tutorial. In today’s tutorial, we will create a countdown to the new year 2022. To create this project we need HTML, CSS and Javascript.
This project is perfect for javascript beginners and intermediates. This tutorial will help you understand the date object in javascript. So let us begin the tutorial.
Video Tutorial:
If you are interested in coding along to a video tutorial, check out the video down below. Also do subscribe to my youtube channel where I post new and exciting tutorials every alternate day. And that’s not it; you even stay updated with the latest tips, tricks and resources.
Project Folder Structure:
Now before we start the coding let us first create the project folder structure. We name the project folder as Countdown To Newyear. Inside this folder, we have four files. These are index.html, style.css,script.js and background-img.jpg. They are the HTML document, the stylesheet the script file and the image respectively.
HTML:
We start by creating the layout using HTML. For this copy, the code provided below and paste it into your HTML document. The layout consists of a div with a class name box. Each box consists of two-span elements. We assign the first span class name as – “num” while we assign the second class name as – “text”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Countdown to new year</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;800&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="heading">
<h3>Countdown Till</h3>
<h1>2022</h1>
</div>
<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>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Now that the layout is ready we style it using CSS. Copy the code below and paste it into your stylesheet.
:root {
--color-white: #ffffff;
--color-black: #202020;
--color-glass: rgba(255, 255, 255, 0.05);
--color-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
color: var(--color-white);
}
body {
background: url(background-img.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
.wrapper {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 16px;
}
.heading {
text-align: center;
margin-bottom: 4em;
}
.heading h1 {
text-shadow: var(--color-shadow);
font-size: 6.2em;
font-weight: 800;
letter-spacing: 0.15em;
}
.heading h3 {
font-size: 1.6em;
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 600;
background-color: var(--color-glass);
backdrop-filter: blur(12px);
box-shadow: var(--color-shadow);
padding: 8px 30px;
display: inline-block;
}
.countdown {
width: 95vw;
display: flex;
justify-content: space-around;
gap: 10px;
}
.box {
width: 28vmin;
height: 29vmin;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
position: relative;
}
span.num {
background-color: var(--color-glass);
backdrop-filter: blur(12px);
height: 100%;
width: 100%;
display: grid;
place-items: center;
font-size: 4em;
box-shadow: var(--color-shadow);
border-radius: 0.1em;
}
span.num:after {
content: "";
position: absolute;
background-color: var(--color-glass);
height: 100%;
width: 50%;
left: 0;
}
span.text {
font-size: 1em;
background-color: var(--color-white);
color: var(--color-black);
display: block;
width: 80%;
position: relative;
text-align: center;
bottom: 20px;
padding: 0.7em 0;
font-weight: 600;
border-radius: 0.3em;
box-shadow: var(--color-shadow);
}
Javascript:
Finally, all we have to do is add functionality to the countdown. To do this we use javascript. For this just copy the code below and paste it into the script file you have just created.
let dayBox = document.getElementById("day-box");
let hrBox = document.getElementById("hr-box");
let minBox = document.getElementById("min-box");
let secBox = document.getElementById("sec-box");
let endDate = new Date(2022, 0, 1, 00, 00);
let endTime = endDate.getTime();
function countdown() {
let todayDate = new Date();
let todayTime = todayDate.getTime();
let remainingTime = endTime - todayTime;
let oneMin = 60 * 1000;
let oneHr = 60 * oneMin;
let oneDay = 24 * oneHr;
let addZeroes = (num) => (num < 10 ? `0${num}` : num);
if (endTime < todayTime) {
clearInterval(i);
document.querySelector(
".countdown"
).innerHTML = `<h1>Countdown Has Expired</h1>`;
} else {
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);
dayBox.textContent = addZeroes(daysLeft);
hrBox.textContent = addZeroes(hrsLeft);
minBox.textContent = addZeroes(minsLeft);
secBox.textContent = addZeroes(secsLeft);
}
}
let i = setInterval(countdown, 1000);
countdown();
Â
If you face any issues while creating this countdown to the new year, you can download the source code by clicking on the download button below. You can alternatively contact me using the contact form or by email.
How to Create a Chatbot using HTML , CSS & JavaScript
I would love to hear from you so if you have any suggestions or feedback, drop them in the comments below. See you in the next tutorial.
Happy Coding!
Â
