Full Blog Post With Source Code Here ->
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.
This can be a mini project that you can add to your portfolio.
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:
We will first use a date in the future to which our countdown timer counts from today's date and time.
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.
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.