Dev Lawrence
How to Create a Countdown Timer using HTML, CSS, JavaScript

How to Create a Countdown Timer using HTML, CSS, JavaScript

Dev lawrence's photo
Dev lawrence
·

5 min read

Hey, there my friends, In this article, we'll be building a countdown timer using HTML, CSS & JavaScript.

What is a countdown timer? A countdown timer is a virtual clock running on a landing page. And it counts down from a certain date to indicate the beginning or the end of an event.

A countdown timer could be used in different contexts such as a countdown to the launch of a product, a countdown to the end/beginning of sales promotion, birthdays, etc.

HTML CODE

The HTML markup is quite simple because you’ll generate most of the HTML code dynamically from JavaScript.

The following shows the complete HTML page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Countdown Timer</title>
  </head>
  <body>
    <div class="container">
      <div class="countdown-container">
        <h2>We're launching soon</h2>

        <div class="countdown">
          <!-- day -->
          <div class="count">
            <div class="title">
              <h1 class="day"></h1>
            </div>
            <p>days</p>
          </div>

          <!-- hour -->
          <div class="count">
            <div class="title">
              <h1 class="hour"></h1>
            </div>
            <p>hours</p>
          </div>

          <!-- minutes -->
          <div class="count">
            <div class="title">
              <h1 class="minute"></h1>
            </div>
            <p>minutes</p>
          </div>

          <!-- seconds -->
          <div class="count">
            <div class="title">
              <h1 class="second"></h1>
            </div>
            <p>seconds</p>
          </div>
        </div>
      </div>
    </div>

    <script src="./script.js"></script>
  </body>
</html>

CSS CODE

For the CSS part, we are just making the HTML markup look good by adding some styles to it

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  font-family: "Poppins", sans-serif;
  color: #fff;
  background: hsl(234deg, 17%, 12%);
  display: flex;
  justify-content: center;
  line-height: 1.6;
}

img {
  width: 100%;
}

a {
  display: inline-block;
  text-decoration: none;
}

.container {
  text-align: center;
  padding: 0 1rem;
  max-width: 1440px;
  margin: auto 0;
  height: 55%;
}

.countdown-container h2 {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 3rem;
}

.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown .title {
  background-color: #2c2c44;
  border-radius: 5px;
  margin-bottom: 1.3rem;
  width: 100px;
  height: 100px;
}
.countdown .title h1 {
  color: hsl(345deg, 95%, 68%);
  line-height: 100px;
  font-size: 3rem;
}
.countdown .count p {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.7rem;
  color: hsl(237deg, 18%, 59%);
  font-weight: 500;
}
.countdown .count:not(:last-child) {
  margin-right: 2rem;
}

JavaScript Code

This is where the fun stuff is, and we’ll be dividing it into different segments;

First Segment

  • First, we’ll create an arrow function called “countDown” and inside the function, we will be adding some variables as we go along 👇🏾
const countDown = () => {
  const launchDate = new Date('31 July, 2022 00:00:00').getTime();
  const presentDate = new Date().getTime();
  const gap = launchDate - presentDate;
};

From the code above we have created three variables inside the function so far. Let's see what each variable does 👇🏾 The first variable called “launchDate” is just simply getting whatever day a product is going to be launched and is done by using the Date object new DATE() then add .getTime() here the new Date will hold the end date like this new Date("31 July, 2022 00:00:00")while the .getTime() converts everything to milliseconds.

Without .getTime() JavaScript gives you this 👇🏾

Sun Jul 31, 2022, 00:00:00 GMT+0100 (West Africa Standard Time)

This value can not be manipulated which is why we add .getTime() this is then bound to a variable which we will call “lauchDate”.

The second variable called “presentDate” is just simply getting the current date

The last variable called “gap” is just getting the difference between the “launchDate” and the “presentDate”

Second Segment

  • Next, we’ll do a little math calculation on how times work 👇🏾
  const second = 1000;
  const minute = 60 * second;
  const hour = 60 * minute;
  const day = 24 * hour;

From the code above, we’ll some variables to calculate the second, minute, hour, and day

From the first variable, 1000ms makes a second. From the second variable, 60 seconds make a minute. From the third variable, 60 minutes make an hour. And finally, from the last variable, 24 hours makes a day.

Third Segment

  • Next, we will be doing the main calculation 👇🏾
  const dayText = Math.floor(gap / day);
  const hourText = Math.floor((gap % day) / hour);
  const minuteText = Math.floor((gap % hour) / minute);
  const secondText = Math.floor((gap % minute) / second);

For the “dayText” variable, we are just simply getting the difference between the “launchDate” and the “presentDate”( which we gave a variable name of “gap” ) and dividing it by the day.

The “Math.floor()” just simply converts decimal numbers to integers.

For the “hourText” variable, we are checking the reminder after we’ve divided the gap from the day then we will use the reminder to divide the hour.

And the “%” is an operator that spits out the remainder of the division of two numbers.

For the “minuteText” variable, we are checking the reminder after we’ve divided the gap from the hour then we will use the reminder to divide the minute.

For the “secondText” variable, we are checking the reminder after we’ve divided the gap from the minute then we will use the reminder to divide the second.

Fourth Segment

  • Next, we will change the text dynamically to whatever text content that is in the variable we created in the previous segment 👇🏾
  document.querySelector('.day').textContent = dayText;
  document.querySelector('.hour').textContent = hourText;
  document.querySelector('.minute').textContent = minuteText;
  document.querySelector('.second').textContent = secondText;

From the code above we are just simply changing the text content to the variables above( dayText, hourText, minuteText, secondText).

Fifth Segment

  • For the final segment we are just calling the function and giving it an interval to change every one second 👇🏾
setInterval(countDown, 1000);

Here is the JavaScript code in full 👇🏾

  const countDown = () => {
  const launchDate = new Date('31 July, 2022 00:00:00').getTime();
  const presentDate = new Date().getTime();
  const gap = launchDate - presentDate;

  const second = 1000;
  const minute = 60 * second;
  const hour = 60 * minute;
  const day = 24 * hour;

  const dayText = Math.floor(gap / day);
  const hourText = Math.floor((gap % day) / hour);
  const minuteText = Math.floor((gap % hour) / minute);
  const secondText = Math.floor((gap % minute) / second);

  document.querySelector('.day').textContent = dayText;
  document.querySelector('.hour').textContent = hourText;
  document.querySelector('.minute').textContent = minuteText;
  document.querySelector('.second').textContent = secondText;
};

setInterval(countDown, 1000);

Here is also a link to the code on codepen if you want to play around with it Click Here

SUMMARY

Congrats on getting to the end of this article.🎉 I hope this article helped you.

CSSHTML5JavaScriptWeb Development