How To Create New Year Countdown using HTML & Javascript

Hello everyone! Welcome to yet another tutorial. Since the new year is around the corner, I have decided to create a new year special tutorial. In this tutorial, we will create a countdown to the new year 2022. To create this project we need HTML, CSS and Javascript.

Also Read : How to Create a Digital Clock Using 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.

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 file and background-img.jpg. They are the HTML document, the stylesheet the script file and the image respectively.

Access Free Tools : Free tools by Codegyan

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 by Codegyan-->
    <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 style.css file.


: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();

Final Words

In this way we can create a countdown for new year 2022 using html, css & JavaScript.

Enroll Free PHP Tutorials Library:  PHP FREE COURSE BY CODEGYAN

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.

If you wann to check the demo of this code, then you can check using below demo button.

 

Click on the following download button to download all source code files of Santa Animation directly on your computer.

How To Create New Year Countdown using HTML & Javascript

Published on 26-Dec-2021 23:31:40

You may also like this!