Building a Countdown Timer with JavaScript

app-logo

Introduction

The countdown timer is a simple app you can build to exercise your skills as a developer. To build the countdown timer you will need the basic knowledge of HTML, CSS, and JavaScript.

Building the structure with HTML

We are starting with creating a div with a class container which will have all of the div with box class nested inside, the box class div have h2 element for the static unit text and p element which will hold the values.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
</head>
<body>
    <div class="container">
        <div style="width: 130px;" class="box">
            <h2 id="days-text">Days</h2>
            <p id="days">000</p>
        </div>
        <div class="box">
            <h2 id="hours-text">Hours</h2>
            <p id="hours">00</p>
        </div>
        <div class="box">
            <h2 id="minutes-text">Minutes</h2>
            <p id="minutes">00</p>
        </div>
        <div class="box">
            <h2 id="seconds-text">Secondes</h2>
            <p id="seconds">00</p>
        </div>
    </div>

    <div style="background: rgb(204, 24, 24);" class="alert">
        <h1 style="padding: 50px 80px;color: white;">Finished!</h1>
    </div>
</body>
</html>

Styling the structure with CSS

The next step is to style our elements which we added previously using CSS.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: rgb(18, 19, 18);
}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container{
    width: 600px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box{
    width: 100px;
    height: 100px;
    margin: 0 15px;
}
h2{
    text-align: center;
    padding-top: 2px;
    color: blanchedalmond;
    
}
.box p{
    font-size: 50px;
    text-align: center;
    font-family: sans-serif;
    font-weight: 800;
    margin-bottom: 15px;
    color: blanchedalmond;
}
.alert{
    display: none;
}

Adding logic with JavaScript

Lastly, we will need to add JavaScript for the logic part so our countdown timer can be functional.

const finaleTime = new Date("January 1, 2022 00:00:00").getTime();

const timer = () =>{
    const currentTime = new Date().getTime();
    let difference = finaleTime - currentTime;
    // Displaying the alert when the timer finishes.
    if(difference < 0){
        document.querySelector('.alert').style.display = 'block';
        document.querySelector('.container').style.display = 'none';
    }
    
    let days = Math.floor(difference / (1000*60*60*24));
    let hours = Math.floor(difference % (1000*60*60*24) / (1000*60*60));
    let minutes = Math.floor(difference % (1000*60*60)/ (1000*60));
    let seconds = Math.floor(difference % (1000*60) / 1000);
  // Adding the zeros.
    days <= 99 ? days = `0${days}` : days;
    days <= 9 ? days = `00${days}` : days;
    hours <= 9 ? hours = `0${hours}` : hours;
    minutes <= 9 ? minutes = `0${minutes}` : minutes;
    seconds <= 9 ? seconds = `0${seconds}` : seconds;   

    document.querySelector('#days').textContent = days;
    document.querySelector('#hours').textContent = hours;
    document.querySelector('#minutes').textContent = minutes;
    document.querySelector('#seconds').textContent = seconds;

}
timer();
// Calling the function every 1000 milliseconds.
setInterval(timer, 1000);

With this step, we have finished creating our Countdown Timer with JavaScript.

Further Reading

For more information on learning JavaScript, I highly recommend the following books:



#js #javascript #project

Author: Aleksandar Vasilevski |