How to Create a Countdown Timer with JavaScript

JavaScript countdown timers can be built in a variety of ways. However, the design that I have shown in this tutorial is very advanced. This countdown timer is created by HTML CSS and JavaScript.

The countdown timer javascript works in a very simple way, which means there are two types of time required. The current time and a specific time for which you want to run the countdown.

The timer countdown will have to be added manually. Also, JavaScript's new Date () is used to capture the current time. new Date () is a JavaScript method that will take the current time from the device.

Countdown Timer JavaScript

The simple countdown timer is used in many services or eCommerce websites. Basically, there is no alternative to Countdown Timer with JavaScript for any product or offer on the webpage.

This project will take the current time from your device and store that time in different constants. Then subtract them with your input time and store them in another constant.

See the Pen Untitled by Shantanu Jana (@shantanu-jana) on CodePen.

This countdown timer javascript has the option to manually select the date of the countdown. This means that the user will be able to manually input the time here and run the countdown.

In this case, there is an input box where the user can control this countdown by inputting the time of his choice. Here an input box was first created using HTML's date picker. Where you can manually input the countdown time or select the date.

Then according to that date, this simple countdown timer will start its work. Here you can run day, hour, minute, and second counters.

How To Build a Countdown Timer in JavaScript

Earlier I shared designs of various simple countdown timers. But if you want to make an advanced countdown timer then this design is for you.

Below I have shared a step-by-step tutorial on how to create a Countdown Timer using JavaScript.

The first HTML to add all the information. Then I designed this Countdown Timer using CSS. Lastly, I have used JavaScript to make the javascript counter-timer effective.

Step 1:

Create a countdown time input box

Using the HTML and CSS below, I created a place to input the date. That's why I used the input method. Here type = "date" is used to select and input the date.

<div class="clock-input">

  <input type="date" name="time-to" class="time-to" id="time-to" value="" onchange="calcTime(this.value)">

</div>

html {

  font-size: 62.5%;

  font-family: "Montserrat", sans-serif;

  font-weight: 300;

  line-height: 1rem;

  letter-spacing: 0.08rem;

}

body {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-flow: column;

  font-size: 1.4rem;

  font-weight: inherit;

  background-color: #03705e;

  height: 100vh;

  width: 100vw;

}

.clock-input {

  clear: both;

  text-align: center;

  max-width: 250px;

  width: 100%;

  height: 60px;

  line-height: 60px;

  background-color: #fff;

  margin: 0 auto 90px;

}

input#time-to {

  padding: 5px;

  border: 0;

  border-radius: 3px;

  font-size: 23px;

  font-family: sans-serif;

  text-align: center;

  color: #066dcd;

  background-color: #fff;

}

Step 2:

The basic structure of Countdown Timer

I have added all the information of this javascript countdown using the following HTML. Basically, 4 boxes have been made here. The time of day, hour, minute, and second will be seen in those boxes respectively.

<div class="container">

  <div class="clock-column">

     <p class="clock-day clock-timer"></p>

     <p class="clock-label">Days</p>

  </div>

  

  <div class="clock-column">

    <p class="clock-hours clock-timer"></p>

    <p class="clock-label">Hours</p>

  </div>

  

  <div class="clock-column">

    <p class="clock-minutes clock-timer"></p>

    <p class="clock-label">Minutes</p>

  </div>

  

  <div class="clock-column">

    <p class="clock-seconds clock-timer"></p>

    <p class="clock-label">Seconds</p>

  </div>

</div>

Step 3:

Design JavaScript Timer using CSS

1. Design the Time View box

I designed those boxes using the CSS below. The boxes used here are min-height: 160px, min-width: 160px and background-color: #fff.

.container {

  position: relative;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  height: 20rem;

  width: 60rem;

  background-color: transparent;

  border-radius: 3px;

  box-shadow: none;

}

.clock-column {

  margin-right: 7rem;

  text-align: center;

  position: relative;

  background-color: #fff;

  min-height: 160px;

  min-width: 160px;

  border-radius: 5px;

}

2. Add a colon between the two boxes

Now a colon symbol has been added between each of the two boxes. This colon symbol has been added using CSS's ":: after". I also used font-size: 75px to increase the size of the symbol.

.clock-column::after {

  content: ":";

  display: block;

  height: 0.25rem;

  width: 0.25rem;

  font-size: 75px;

  font-weight: 200;

  color: #feffff;

  position: absolute;

  top: 60px;

  right: -25px;

}

.clock-column:last-child::after {

  display: none;

}

3. Design the Countdown Timer information

Now you have to use the following CSS to design the Countdown Timer information in the boxes. Only text can be seen here but we cannot see the information related to time. The reason is to use JavaScript to view the countdown time.

.clock-label {

  padding-top: 20px;

  text-transform: uppercase;

  color: #131313;

  font-size: 16px;

  text-align: center;

  border-top: 2px solid rgba(6, 121, 215, 0.989);

}

.clock-timer {

  color: #131313;

  font-size: 46px;

  line-height: 1;

}

Step 4:

JavaScript of Simple Countdown Timer

I have added all my basic information above to make this javascript countdown. But has not yet been implemented. 

As I said before, the current time will be taken from your device first using the new date () here. Then the value of your input time will be subtracted from the current time.

That time will then be expressed in terms of days, hours, minutes, and seconds. In the end, using innerHTML, they are shown on the web page. Then setInterval is used to update this time every second.

// load event listeners

loadEventListeners();

function loadEventListeners() {

//DOMContentLoaded event fires when the initial HTML document has been completely loaded

document.addEventListener('DOMContentLoaded', function() { calcTime(); });

};

//The value of your input time

var timeTo = document.getElementById('time-to').value,

    date,

//Use new Date() to get a Date for the current time or Date

    now = new Date(),

    newYear = new Date('1.1.2020').getTime(),

    startTimer = '';

// calculate date, hour, minute and second

function calcTime(dates) {

//ui variables

  clearInterval(startTimer);

   if(typeof(dates) == 'undefined'){

     date = new Date(newYear).getTime();

   }

   else {

     date = new Date(dates).getTime();

    }

  function updateTimer(date){

//Current time has been collected from the device

    var now = new Date().getTime();

//The current time has been subtracted from your input time

    var distance = date - now;

   // Time calculations for days, hours, minutes and seconds

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));

    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

   // select element

   //innerHTML allows Javascript code to manipulate a website being displayed

    //I stored the time in different var.

     //Now you have to show them in the box

    document.querySelector('.clock-day').innerHTML = days;

    document.querySelector('.clock-hours').innerHTML = hours;

    document.querySelector('.clock-minutes').innerHTML = minutes;

    document.querySelector('.clock-seconds').innerHTML = seconds;

  //When the current time will be more than your input time

   if(now >= date){

     clearInterval(startTimer);

     document.querySelector('.clock-day').innerHTML = 'D';

     document.querySelector('.clock-hours').innerHTML = 'O';

     document.querySelector('.clock-minutes').innerHTML = 'N';

     document.querySelector('.clock-seconds').innerHTML = 'E';

  }

 }

 startTimer = setInterval(function() { updateTimer(date); }, 1000);

}

Please comment on how I wrote JavaScript Countdown Timer. If anyone asks I can let you know directly on Instagram. 

Hope you know how to create Countdown Timer using JavaScript. Any problem you can use the download button below.

The download will start automatically

 ALL Credit of this post going to https://www.foolishdeveloper.com