How to Build a Countdown Timer using JavaScript

#javascript #webdev #beginners #html

If you want to create a Countdown Timer using JavaScript then this tutorial will help you. In this article I have shown you how to create a simple countdown timer using JavaScript and HTML.

Earlier I used many more types of countdown timers, digital clock. I have shared the tutorial of Stop Watch with you. Countdown of days, hours, minutes and seconds will continue here. Using this timer you can run the countdown for a specific day.

Watch its live demo to learn how it works. This type of timer is currently used for a variety of eCommerce or service websites. This type of timer is seen before the release of any product or service. Which makes the customer much more satisfied and attractive.

Countdown Timer using JavaScript

Here I have used HTML, CSS and JavaScript. HTML and CSS are used to design this simple timer. I used JavaScript to make it work. I did not use any jQuery here.

To build this JavaScript countdown timer you must have a basic idea about HTML CSS and JavaScript. Here I have given the necessary explanation in case of JavaScript.

Related Post:

First, the background color of the webpage is blue. Then four boxes were made. The time, day, minute and second time can be seen in these four boxes respectively. One text is used for each box. Which will indicate which time is seen in which box.

I have already shared many more countdown timer tutorials like this with you. If you want step-by-step tutorials then you can see those designs. If you want, you can download all the source code directly using this link.

1. HTML code of Countdown Timer

The code below is the HTML code that was originally used to add the information needed by this counter timer. You can copy these HTML codes and use them directly in your HTML file.

<div class="wrapper">

 <div class="countdown">
<!-- 1st box -->
    <div class="box">
      <span class="text">Days</span>
      <span class="num" id="day-box">00</span>
   </div>
<!-- 2nd box -->
   <div class="box">
      <span class="text">Hours</span>
      <span class="num" id="hr-box">00</span>
   </div>
<!-- 3rd box -->
   <div class="box">
      <span class="text">Minutes</span>
      <span class="num" id="min-box">00</span>
   </div>
<!-- 4th box -->
   <div class="box">
      <span class="text">Seconds</span>
      <span class="num" id="sec-box">00</span>
   </div>

 </div>

</div>

2. Design the Countdown Timer using CSS

The following CSS code has been used to design this countdown timer. First the webpage is designed and a background color is used on the webpage. Then the area of the counter timer is determined.

Then those boxes have been designed. The numbers are then designed and the background color of the numbers is white. After all, the text in each box is designed.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
color: white;
}

/* Design a webpage */
body {
background: rgb(20, 129, 208);
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;
}
/* Basic design of countdown timer */
.countdown {
width: 95vw;
max-width: 900px;
display: flex;
justify-content: space-around;
gap: 10px;
}
/* Design the time view boxes */
.box {
width: 28vmin;
height: 29vmin;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
position: relative;
}
/* Design time viewing numbers */
span.num {
background-color: white;
color: rgb(8, 78, 142);
height: 100%;
width: 100%;
display: grid;
place-items: center;
font-size: 4.2em;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
border-radius: 0.1em;
}
/* Design the text to indicate the time */
span.text {
font-size: 1.1em;
background-color: rgb(211, 241, 22);
color: #202020;
display: block;
width: 80%;
position: relative;
text-align: center;
bottom: -10px;
padding: 0.6em 0;
font-weight: 600;
border-radius: 0.3em;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}

3. Activate the Countdown Timer using JavaScript

On the other hand, we have done design work. Now is the time to make it fully operational with the help of JavaScript.

If you know basic JavaScript you can easily understand the code below. Because for each line I have provided with the necessary information. Which will guide you completely to understand the following HTML codes.

//The global constant of the id functions of the four boxes has to be determined.
   //Because no html element can be used directly in JavaScript
    let dayBox = document.getElementById("day-box");
    let hrBox = document.getElementById("hr-box");
    let minBox = document.getElementById("min-box");
    let secBox = document.getElementById("sec-box");

    //I have added the time for which I want to run the countdown
   //Then that time is stored in a constant called "endDate"
    let endDate = new Date(2022, 03, 1, 00, 00);

//The above date has been converted to milliseconds
//getTime() method is used to return the number of milliseconds since 1 January 1970.
    let endTime = endDate.getTime();


//All the calculations are stored in the function called countdown
    function countdown() {
//The current time has been taken from the device using the "new Date" method
      let todayDate = new Date();
//The time received from the device has been converted to milliseconds
      let todayTime = todayDate.getTime();
//How long the countdown will last has been calculated.
//Countdown time = Countdown end time - Current time
      let remainingTime = endTime - todayTime;
//Minutes, hours, days have been converted to milliseconds
//1 minute = 1 * 60 seconds = 1000 * 60 milliseconds
      let oneMin = 60 * 1000;
      let oneHr = 60 * oneMin;
      let oneDay = 24 * oneHr;

//If the number of times is less than 10 then a 0 will be added before it
      let addZeroes = (num) => (num < 10 ? `0${num}` : num);

//What will happen when the countdown ends is now decided
//That is, if the current time is more than the time when the countdown is over
      if (endTime < todayTime) {
        clearInterval(i);
        document.querySelector(
          ".countdown"
        ).innerHTML = `<h1>Countdown Has Expired</h1>`;
      } 

 else {
//Now the total countdown time has been converted to days, hours, minutes, and seconds
//The Math. floor() function returns the largest integer less than or equal to a given number.
        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);

//Arrangements have now been made to display the time values in the webpage
//"textContent" helps to display any content within a webpage
        dayBox.textContent = addZeroes(daysLeft);
        hrBox.textContent = addZeroes(hrsLeft);
        minBox.textContent = addZeroes(minsLeft);
        secBox.textContent = addZeroes(secsLeft);
      }
    }
//Now with the help of "setInterval" the above calculations are arranged to be updated every second.
//As you can see, all of the above calculations are stored in a function called 'countdown'.
//Now that function has been updated every 1000 milliseconds or 1 second.
    let i = setInterval(countdown, 1000);
    countdown();