How to Build a CountDown Component Using TailwindCSS and JavaScript
Tags: webdev, tailwindcss, html
Published: 2023-03-20 20:30:00

![CountDown Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gb9sx5gibsg0pspj7jau.png)


A countdown timer is a virtual clock on a landing page that counts down from a certain number or date to indicate the beginning or end of an event or offer. This page element helps create urgency in generating more conversions because **“time is running out.”** Countdown timers can also be used to count down to when an offer becomes available at a specific date and time.

During this tutorial, we are going to build a countdown that counts down to Next year.


![Demo of CountDown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpszp74b1dwp494t0746.gif)



## Understanding the task

We will be building a countdown timer, that counts down to New Year. We will build the UI using TailwindCSs, then make it functional using JavaScript.

## Structure of Code

Our code will be divided into two parts, the UI section, where we will be using HTML and TailwindCSS, and The Logic section, where it is essentially JavaScript.

## UI (HTML & TailwindCSS)

This section is responsible for what the users see.

Our code structure for this section is as follows.

```xml
<body class="bg-slate-700 flex items-center justify-center min-h-screen">
<!-- First Layer -->
 <div class="w-full sm:max-w-2xl bg-slate-900 text-white h-[25rem] px-4 rounded py-4">
<!-- Second Layer -->
   <div id="new" class="bg-[url('https://static01.nyt.com/images/2022/01/21/us/00xp-Lava-vid-cove-mike-ives-is-has-answers/00xp-Lava-vid-cove-mike-ives-is-has-answers-superJumbo.jpg')] rounded h-full bg-cover">

    <h2 class="text-2xl text-center font-semibold mb-10 pt-7">Until New Beginning</h2>
    <div class="flex justify-around text-center [&>*>h2]:text-xl [&>*>h2]:sm:text-4xl [&>*>h2]:font-bold [&>*>p]:text-sm [&>*>p]:font-semibold">
     <div>
         <h2 id="month">10</h2>
         <p>Month</p>
     </div>

      <div>
          <h2 id="day">30</h2>
          <p>days</p>
      </div>

      <div>
          <h2 id="hour">20</h2>
          <p>Hours</p>
      </div>

      <div>
          <h2 id="minute">59</h2>
          <p>Minutes</p>
      </div>

      <div>
          <h2 id="second">40</h2>
          <p>Seconds</p>
      </div>
   </div>
</div>
    </div>

    <script src="index.js"></script>
</body>
```

Our countdown component consists of a Header, Saying "Until New Begining". I just believe a new year is a New Beginning, a new start. Of course, you can always customize it to your liking.

We gave the container holding our text a background-image `bg-[url('https://static01.nyt.com/images/2022/01/21/us/00xp-Lava-vid-cove-mike-ives-is-has-answers/00xp-Lava-vid-cove-mike-ives-is-has-answers-superJumbo.jpg')]` a border-radius of `rounded`

Within this container, we have a container holding different time lengths, that's Months, days, Hours, Minutes and Seconds.

This container holds the stylings of each of the above-mentioned time lengths. We were able to achieve this using the TailwindCSS property **\[&&gt;\*\]**, I invite you to read more about it.

To give you a little idea about it, The property **\[&&gt;\*\]** simply means *“select each child individually”*, this allows us to apply the same styling properties to all the immediate children.

For each child, we selected the paragraph tag inside(p), and we gave it a `font-size` of `text-sm` and `font-weight` of `font-semibold`. Similarly, we selected the h2 tags and gave them a `font-weight` and `font-size`.

You can also see that we gave some stylings to the first and second layers of our design. This is just to it fix the width and height. And a for the body, the styling properties given there are to center our component.

It is also worth mentioning that we gave each of our time lengths an id, and each of the ids given is self-explanatory.


![xyz](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gb9sx5gibsg0pspj7jau.png)

## JavaScript

Our Javascript file looks like this

```javascript
var countDownDate = new Date("Jan 01, 2024 00:00:00").getTime();
const monthsElement = document.getElementById('month');
const daysElement = document.getElementById('day');
const hoursElement = document.getElementById('hour');
const minutesElement = document.getElementById('minute');
const secondsElement = document.getElementById('second');


// Update the count down every 1 second
var x = setInterval(function () {

    // Get today's date and time
    let today = new Date().getTime();

    // Find the distance between now and the count down date
    let interval = countDownDate - today;

    // Time calculations for days, hours, minutes and seconds
    let months = Math.floor(interval / (1000 * 60 * 60 * 24 * 30))
    let days = 30 % Math.floor(interval / (1000 * 60 * 60 * 24));
    let hours = Math.floor((interval % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((interval % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((interval % (1000 * 60)) / 1000);
    
    monthsElement.innerHTML = months;
    daysElement.innerHTML = days;
    hoursElement.innerHTML = hours;
    minutesElement.innerHTML = minutes;
    secondsElement.innerHTML = seconds;


    // If the count down is finished, write some text
    if (interval < 0) {
        clearInterval(x);
        document.getElementById("new").innerHTML = "HAPPY NEW YEAR ! TIME FOR A NEW BEGINNING";
    }
}, 1000);
```

We started by setting a New Date, this date is the date we want to set the count down to, and for this exercise, we set it to

```javascript
var countDownDate = new Date("Jan 01, 2024 00:00:00").getTime();
```

Now, we accessed each of the length dates through the defined ids and attributed them to some elements we can easily use

```javascript
const monthsElement = document.getElementById('month');
const daysElement = document.getElementById('day');
const hoursElement = document.getElementById('hour');
const minutesElement = document.getElementById('minute');
const secondsElement = document.getElementById('second');
```

Next, we went forward to use **the setInterval function** to run our function every 1000ms, and decrement our timer by 1s.

```javascript
var x = setInterval(function () {
    // Get today's date and time
    let today = new Date().getTime();

    // Find the distance between now and the count down date
    let interval = countDownDate - today;

    // Time calculations for days, hours, minutes and seconds
    let months = Math.floor(interval / (1000 * 60 * 60 * 24 * 30))
    let days = 30 % Math.floor(interval / (1000 * 60 * 60 * 24));
    let hours = Math.floor((interval % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((interval % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((interval % (1000 * 60)) / 1000);
    
    monthsElement.innerHTML = months;
    daysElement.innerHTML = days;
    hoursElement.innerHTML = hours;
    minutesElement.innerHTML = minutes;
    secondsElement.innerHTML = seconds;


    // If the count down is finished, write some text
    if (interval < 0) {
        clearInterval(x);
        document.getElementById("new").innerHTML = "HAPPY NEW YEAR ! TIME FOR A NEW BEGINNING";
    }
}, 1000);
```

Not that we converted each date length (Months, Days, Hours, Minutes) into a common base, that's Seconds. then we use the starting day too, using

```javascript
 let today = new Date().getTime();
```

And once the interval reaches **0s,** The message displaced is **"HAPPY NEW YEAR! TIME FOR A NEW BEGINNING"**

And that's principally it.

We just built a responsive fully functional CountDown Component

![End](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apx6pyeyftcwyr56zqnc.png)



## Conclusion

We just built a very simple, yet functional and effective countdown component.

You can definitely add it to your portfolio, website or the next Project your will be building.

You can have a live preview on [Codepen](https://codepen.io/mbianou-bradon/pen/vYzXPRQ) and have the source code on [GitHub](https://github.com/mbianou-bradon/icodethis-daily-ui-challenge/tree/main/public/February%202023/CountDown)

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additional components and styling you added to your Countdown.

If you have any worries or suggestions, don’t hesitate to bring them up! 😊

See ya! 👋