How to Create a Countdown Timer with JavaScript

How to Create a Countdown Timer with JavaScript

Countdown Timer 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;
}
Create a countdown time input box
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;
}
The basic structure of Countdown Timer

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;
}
Add a colon between the two boxes

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;
}
Design the Countdown Timer information
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);
}
Simple Countdown Timer JavaScript

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.