We all know that countdown time is a popular design that is mainly used in various types of e-commerce, business, and personal websites. This type of countdown is used when a product or service will be launched on a business website.
In the case of the ordinary clock, the time goes on but in the case of the countdown timer the time goes on continuously. Here you can set a specific day or time. Here we use new Date () to take time off from the device.
See the Pen Untitled by Code Media (@codemediaweb) on CodePen.
Hopefully, the demo above has helped you find out how this countdown timer works. To create the project you first need to create an HTML and CSS file. Then add all the code to the problem file.
You can use the download button below the article to download the source code. If you want to learn how to make it step by step, you must follow this tutorial.
1. Basic structure of countdown timer
I have created an area on the webpage using the HTML and CSS code below. You can see all the times in this area. A border of 2px is used to highlight this area.
First I added the time I want to run the countdown. Here you can add any time you like according to this format.
Now the current time has been taken from the device using the new Date () method. As you know the new Date () method helps to accept the current time.
Now I have found the time to run the countdown. We have subtracted the current time from the time you added and saved the subtraction in ‘diff’. So we have to run the countdown till the time in “diff”.
Now all the time of running that countdown has to be sorted into days, hours, minutes, and seconds. First, you have to arrange it in the form of a full-time day. Then the rest of the time will be arranged in the form of hours. Then the time that is left can be seen in the form of minutes. Then the time that is left can be seen in the form of seconds.
Now we have saved days, hours, minutes, and seconds in d, h, m, s, respectively.
Now with the help of innerHTML, I have arranged to display all that information on the web page. As you know innerHTML helps to display any content on web pages. Arrangements have been made to display some text over time.
Last, of all, I used setInterval which will update the calculations after a certain time. 1000 milliseconds have been used here, which means the time spent here will be updated after 1 second. This will change the time in this countdown timer every second.
3. Design timers with CSS
Now I have used the following CSS code to design the text of this time.