codemediaweb.com

Code Media

hire me

Countdown Timer using JavaScript (Tutorial+ Code)

by
Countdown Timer using JavaScript

If you want to make JavaScript Countdown Timer, this tutorial will help you. Here I have shown step by step how to build a countdown timer using HTML CSS and JavaScript.

We all know that countdown time is a popular design that is mainly used in various types of e-commerce, business, and personal websites. This type of countdown is used when a product or service will be launched on a business website.

This makes the user much more satisfied. If you just want to build this type of Countdown Timer using JavaScript then this tutorial is perfect for you. For this, you need to have a basic idea about HTML, CSS, and javascript.

 In the case of the ordinary clock, the time goes on but in the case of the countdown timer the time goes on continuously. Here you can set a specific day or time. Here we use new Date () to take time off from the device.

JavaScript Countdown Timer

Below I have shared a step-by-step tutorial on how I created this JavaScript Countdown Timer. Here we have first created a box on the webpage. In this box, I have arranged to show it all the time. Gradient color is used a number of times.

Only one line of HTML code is used and some JavaScript and some CSS are used.

See the Pen Untitled by Code Media (@codemediaweb) on CodePen.

Hopefully, the demo above has helped you find out how this countdown timer works. To create the project you first need to create an HTML and CSS file. Then add all the code to the problem file. 

You can use the download button below the article to download the source code. If you want to learn how to make it step by step, you must follow this tutorial.

1. Basic structure of countdown timer

 I have created an area on the webpage using the HTML and CSS code below. You can see all the times in this area. A border of 2px is used to highlight this area.

<div id=”timer”></div>
body {
    text-align: center;
    padding: 70px 50px;
    background: #0D1A29;
    font-family: sans-serif;
    font-weight: lighter;
}
#timer {
    font-size: 3em;
    font-weight: 100;
    margin: 80px auto;
    color: white;
    border: 2px solid #B1CDF1;
    padding: 20px;
    width: 400px;
    text-shadow: 0 0 20px #0eea9d;
}

2. Activate Countdown Timer with JavaScript

This countdown has been executed using the following JavaScript. Below I have given all the JavaScript together. If you do not understand the code below, you can follow the expressions below.

function updateTimer() {
    future = Date.parse(“sept 12, 2021 11:30:00”);
    now = new Date();
    diff = future – now;
    days = Math.floor(diff / (1000 * 60 * 60 * 24));
    hours = Math.floor(diff / (1000 * 60 * 60));
    mins = Math.floor(diff / (1000 * 60));
    secs = Math.floor(diff / 1000);
    d = days;
    h = hours – days * 24;
    m = mins – hours * 60;
    s = secs – mins * 60;
    document.getElementById(“timer”)
        .innerHTML =
        ‘<div>’ + d + ‘<span>days</span></div>’ +
        ‘<div>’ + h + ‘<span>hours</span></div>’ +
        ‘<div>’ + m + ‘<span>minutes</span></div>’ +
        ‘<div>’ + s + ‘<span>seconds</span></div>’;
}
setInterval(‘updateTimer()’, 1000);

JavaScript Explanation:

First I added the time I want to run the countdown. Here you can add any time you like according to this format.

future = Date.parse(“sept 12, 2021 11:30:00”);

Now the current time has been taken from the device using the new Date () method. As you know the new Date () method helps to accept the current time.

now = new Date();

Now I have found the time to run the countdown. We have subtracted the current time from the time you added and saved the subtraction in ‘diff’. So we have to run the countdown till the time in “diff”.

 diff = future – now;

Now all the time of running that countdown has to be sorted into days, hours, minutes, and seconds. First, you have to arrange it in the form of a full-time day. Then the rest of the time will be arranged in the form of hours. Then the time that is left can be seen in the form of minutes. Then the time that is left can be seen in the form of seconds.

 days = Math.floor(diff / (1000 * 60 * 60 * 24));
 hours = Math.floor(diff / (1000 * 60 * 60));
 mins = Math.floor(diff / (1000 * 60));
 secs = Math.floor(diff / 1000);

Now we have saved days, hours, minutes, and seconds in d, h, m, s, respectively.

 d = days;
 h = hours – days * 24;
 m = mins – hours * 60;
 s = secs – mins * 60;

 Now with the help of innerHTML, I have arranged to display all that information on the web page. As you know innerHTML helps to display any content on web pages. Arrangements have been made to display some text over time.

document.getElementById(“timer”).innerHTML =
 ‘<div>’ + d + ‘<span>days</span></div>’ +
 ‘<div>’ + h + ‘<span>hours</span></div>’ +
 ‘<div>’ + m + ‘<span>minutes</span></div>’ +
 ‘<div>’ + s + ‘<span>seconds</span></div>’;

 Last, of all, I used setInterval which will update the calculations after a certain time. 1000 milliseconds have been used here, which means the time spent here will be updated after 1 second. This will change the time in this countdown timer every second.

setInterval(‘updateTimer()’, 1000);

3. Design timers with CSS

Now I have used the following CSS code to design the text of this time.

#timer div {
    display: inline-block;
    min-width: 90px;
}
#timer div span {
    color: #1fd681;
    display: block;
    font-size: .35em;
    font-weight: 400;
}

Hopefully from the above tutorial, you have learned how I created Countdown Timer using HTML CSS, and JavaScript. If you have difficulty understanding, of course, you can comment. 

You can download the source code required to make this JavaScript countdown timer using the download button below.

Leave a comment