How To Create A Countdown Timer In JavaScript (complete source code)

by

Countdown timers are a crucial element in various web applications and add an extra level of interactivity and engagement to the user experience. In this blog post, we will walk you through the process of creating a dynamic countdown timer in JavaScript.

From understanding the concept of timing events to implementing the source code, we’ll provide you with a complete guide to help you build your own countdown timer. By the end of this tutorial, you will have a working timer that can be easily customized to fit your specific needs.

Recently I shared a complete guide on How to make a Random Color Generator using JavaScript please check this.

What is the Countdown timer on the website?

Countdown-Timer-Feature

A countdown timer on a website is a feature that displays the time remaining until a specific event or date. It is typically implemented as a graphical or numerical representation that counts down in real-time to zero.

The timer can be customized to display the time in various units, such as seconds, minutes, hours, or even days. It is often used for creating a sense of urgency for promotions, product launches, events, and more.

A countdown timer in a website can be created using various technologies such as HTML, CSS, and JavaScript. By using JavaScript, it is possible to make the timer dynamic and interactive, allowing users to interact with it in real time.

How to Create a Count down timer

Here is a basic outline for creating a countdown timer in JavaScript:

  1. Determine the target date and time for the countdown timer.
  2. Using JavaScript’s Date object, create a variable to store the current date and time.
  3. Calculate the difference between the target date and the current date, which will give you the remaining time.
  4. Update the timer display on the web page using JavaScript.
  5. Use the setInterval method to update the timer display regularly, for example, every second.
  6. Add any additional features you would like, such as the ability to pause or reset the timer, display the time in a specific format, or trigger an action when the timer reaches zero.

Video Tutorial CountDown Timer

If you don’t understand these steps and you want to learn more about this project and how logic work in this project so please watch this video and subscribe to this YouTube Channel for more videos like this.

Video Created by WS-Cube Tech YouTube Channel

Complete Source Code CountDown Timer Using JavaScript

In this project, I am using three languages first one is HTML for basic structure second language is CSS for design and last is JavaScript for logic.

Steps to use this Source Code

  1. First, you need to create one folder with the name of the countdown timer using javascript or as you want
  2. In this folder create one file for HTML with the name index.html make sure the files extension is (.html)
  3. Then create a CSS file with the name style.css make sure the file extension must be (.css)
  4. Then Create a last file for JavaScript with the name script.js make sure the file extension must be (.js)
  5. After that connect CSS and JS files with the HTML file.
  6. The last step is to Copy the given code that I provided and paste it into your files so your countdown timer is ready to use.

HTML FILE CODE

Copy the HTML file code and paste it into your file make sure your file extension is (.html)

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div class="overlay">
            <div class="title">We are coming soon</div>
            <div class="title" id="end-date">20 March 2022 10:00 PM</div>
            <div class="col">
                <div>
                    <input type="text" readonly value="0">
                    <br/>
                    <label for="">Days</label>
                </div>
                <div>
                    <input type="text" readonly value="0">
                    <br/>
                    <label for="">Hours</label>
                </div>
                <div>
                    <input type="text" readonly value="0">
                    <br/>
                    <label for="">Minutes</label>
                </div>
                <div>
                    <input type="text" readonly value="0">
                    <br/>
                    <label for="">Seconds</label>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS FILE CODE

Copy the CSS file code and paste it into your file make sure your file extension is (.css)

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
@import url
('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
.main {
    width: 100%;
    height: 100vh;
    background: url('../image/1802071.webp') center center;
    background-size: cover;
}
.overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.7);
}
.title {
    margin-top: 10px;
    color: white;
    text-align: center;
    font-size: 2.5rem;
}
.col {
    margin-top: 20px;
    width: 90%;
    display: flex;
    justify-content: center;
    color: white;
}
.col div {
    width: 250px;
    text-align: center;
}
input {
    width: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    border-color: transparent;
    border-radius: 5px;
    height: 50px;
    text-align: center;
    font-size: 30px;
}

 

JavaScript FILE CODE

Copy the JavaScript file code and paste it into your file make sure your file extension is (.js)

const endDate = "27 July 2023 08:20:00 PM"
document.getElementById("end-date").innerText = endDate;
const inputs = document.querySelectorAll("input")
    // const clock = () => {
// }
function clock() {
    const end = new Date(endDate)
    const now = new Date()
    const diff = (end - now) / 1000;
    if (diff < 0) return;
    // convert into days;
    inputs[0].value = Math.floor(diff / 3600 / 24);
    inputs[1].value = Math.floor(diff / 3600) % 24;
    inputs[2].value = Math.floor(diff / 60) % 60;
    inputs[3].value = Math.floor(diff) % 60;
}
// initial call
clock()
/**
 *  1 day = 24 hrs
 *  1 hr = 60 mins
 *  60 min = 3600 sec
 */
setInterval(
    () => {
        clock()
    },
    1000
)

You Might like this

Conclusion

In conclusion, creating a countdown timer in JavaScript is a relatively simple process. By utilizing the built-in Date object, it is possible to calculate the time remaining and display it on a webpage.

The complete source code provided in the blog demonstrates how to implement a functional countdown timer with a user-defined end date. With a little customization, this timer can be tailored to suit a wide range of applications and serve as a valuable tool for keeping track of time-sensitive events.

Leave a Comment