COUNTDOWN TIMER USING HTML, CSS AND JAVASCRIPT

Full Blog Post With Source Code Here ->
COUNTDOWN TIMER USING HTML, CSS AND JAVASCRIPT

If you are just starting our learning HTML, CSS and Javascript, mini projects can be a great way to learn the language and put it to use.

There are so many mini-projects that you can make using these languages one of which is a countdown timer.

Why Create A Countdown Timer? 

A countdown timer as we have seen in many places including one in our mobile phones is a timer that ticks backward from a given time to zero.

A countdown timer has several benefits in real life too. This can be used as an alarm to see if food is properly cooked or not, to track activity, and numerous other things.

Although we have a countdown timer in our mobile phone, creating a countdown timer from scratch using HTML, CSS and Javascript can be so much fun. 

This can be a mini project that you can add to your portfolio.

So let's jump on to the blog post and create a fancy countdown timer using HTML, CSS, and Javascript step by step, and at the end, I will also provide the source code for it.

Coding A Countdown Timer - Explained [Step By Step]

To begin with, we will create an HTML barebone structure and will link our CSS and Script file to it.

Our barebone HTML looks like this:

See how we have linked our CSS in the head section and the script right at the end of the body tag.

Any elements that we add to this HTML will go above the script file reference.

Now, we will add the HTML structure for the countdown timer.

Now we will style this countdown timer and add some CSS code for these HTML elements.

The result of this HTML and CSS is this:

Now, we will write some javascript to make this countdown timer functional.

We will first use a date in the future to which our countdown timer counts from today's date and time.

Let's break down the Javascript code for this countdown timer.

On the top, we have a const value of the date and time we are counting down from.

In our example, we are counting down the date and time from next year.

Then we have a few query selectors for the various values of days, hours, minutes, and seconds.

Then comes the main bit, we are using the "setInterval" function that Javascript provides and we will run a function every 1000 milliseconds or 1 second.

In this function, we will calculate the difference of time between now and the date provided in the constant we are counting down from.

Then, we will assign these values to the selectors.

This will result in the following output and our countdown timer is ready.