Creating a New Year's Countdown Timer with JavaScript

As we approach the end of the year, many of us are looking forward to ringing in the new year with family and friends. But what if you want to add an interactive element to your celebration? In this blog post, we'll show you how to create a countdown timer to the next New Year using JavaScript.

First, we'll start by selecting four HTML elements with the id's "days", "hours", "minutes", and "seconds" and assigning them to the variables "days", "hours", "minutes", and "seconds". This will allow us to update the inner HTML of these elements with the calculated time difference.

Source Code

<!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>Project-1 : Countdown Timer</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <img src="images/icon.png">
  <h2>Comming Soon</h2>
  <p>Our website is under construction, follow us for update now ! </p>
  <div class="counter">

    <div class="box">
      <h2 id="days">00</h2>
      <small>Days</small>
    </div>

    <div class="box">
      <h2 id="hours">00</h2>
      <small>Hours</small>
    </div>

    <div class="box">
      <h2 id="minutes">00</h2>
      <small>Minutes</small>
    </div>

    <div class="box">
      <h2 id="seconds">00</h2>
      <small>Seconds</small>
    </div>

  </div>
  <div class="form">
    <input type="text" placeholder="Email Address">
    <button>Notify Me</button>
  </div>
  <script src="js/script.js"></script>
</body>
</html>

Next, we'll determine the current year using the "getFullYear()" method of the Date object, and create the date for the next New Year using the "new Date()" constructor, with the date set to January 1st of the next year at 00:00:00.

We'll then define the "UpdateTime()" function, which calculates the time difference between the current date and the next New Year in days, hours, minutes, and seconds using mathematical operations and the "floor()" method. The inner HTML of the previously selected HTML elements are then updated with the calculated time difference, and padded with a leading zero if less than 10.

Finally, we'll call the "UpdateTime()" function every 1000 milliseconds using the "setInterval()" method to ensure that the countdown is accurate and up-to-date.

js/script.js

const days=document.querySelector("#days");
const hours=document.querySelector("#hours");
const minutes=document.querySelector("#minutes");
const seconds=document.querySelector("#seconds");
// const mseconds=document.querySelector("#mseconds");

const currentYear=new Date().getFullYear();
const newYear=new Date(`January 1 ${currentYear+1} 00:00:00`);

function UpdateTime(){
  const currentDate=new Date();
  const diff=newYear-currentDate;
  const d=Math.floor(diff/1000/60/60/24);
  const h=Math.floor((diff/1000/60/60)%24);
  const m=Math.floor((diff/1000/60)%60);
  const s=Math.floor((diff/1000)%60);
  const ms=Math.floor(diff%1000);

  days.innerHTML=d<10?"0"+d:d;
  hours.innerHTML=h<10?"0"+h:h;
  minutes.innerHTML=m<10?"0"+m:m;
  seconds.innerHTML=s<10?"0"+s:s;
  // mseconds.innerHTML=ms<10?"0"+ms:ms;
}
setInterval(UpdateTime,1000);

Finally, you can add some CSS styles to enhance the look and feel of the button and container. you can adjust the CSS styles as desired to match the design of your website.

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Inspiration&family=Poppins:wght@300;400;500;700&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
html{
  font-size: 12px;
}
body{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('../images/img.jpg');
  color:#fff;
  background-size: cover;
  background-position: center;
}

.counter{
  display: flex;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 10px;
}
body>h2{
  font-size: 1.5rem;
  font-weight: 500;
  margin: 15px  0px;
}

body>p{
  margin-bottom: 20px;
  font-size: 1rem;
}
.counter .box{
  width: 80px;
  height: 70px;
  text-align: center;
  margin-right: 10px;
  position: relative;
}

.counter .box::after{
  content: ":";
  height: 70px;
  width: 10px;
  position: absolute;
  top:0;
  right: 0;
  font-size: 2.5rem;
}
.counter .box:last-of-type::after{
  display: none;
}

.counter .box h2{
  font-size: 2.5rem;
  font-weight: 500;
}

.form{
  margin-top: 20px;
}
.form input[type="text"]{
  width: 230px;
  padding: 10px;
  outline: none;
  border: 1px solid rgba(255,255,255,0.5);
  background-color: transparent;
  border-radius: 5px;
  color:white;
}
.form input[type="text"]::placeholder{
  color:rgba(255,255,255,0.7);
}
.form button{
  width: 120px;
  padding: 10px;
  border: none;
  border-radius: 30px;
  margin-left: 10px;
  background-color: cornflowerblue;
  color:white;
}

@media (min-width:576px) {
  html{
    font-size:18px ;
  }
  .counter .box{
    width: 100px;
    height: 100px;
  }
  .form input[type="text"]{
    width: 300px;
  }
}

@media (min-width:768px) {
  html{
    font-size:20px ;
  }
  .counter .box{
    width: 110px;
    height: 110px;
  }
  .form input[type="text"]{
    width: 340px;
  }
}

Output

Live Preview

With this simple script, you can add an interactive countdown timer to your New Year's celebrations, and make the transition to the new year even more exciting. Happy coding!