See the Pen
Hopefully, the demo above has helped you. Below the article, I have given the complete source code which you can download and use in your own work.
Step 1: Design the web page
I designed the webpage using a small amount of CSS code below. Here I have given the background color of the webpage purple.
Now I have created a box on the webpage in which I have added all the information. This box has no specific width and height. This will determine the size depending on the amount of element. I have used a border and box-shadow to enhance its beauty.
Step 3: Add a title or heading
Using these codes below I have added a heading in this countdown timer.
Step 4: Add all the information of Countdown Timer
Now using these codes I have made it Responsive. In other words, I have used the following CSS codes to make it look nice on different small devices.
➤ I have set a value for the second, minute, hour, day, etc.
We know that one second is equal to 1000 milliseconds, one minute is equal to 60 seconds (60 * 1000 ms). One hour is equal to 60 minutes (60 * 60 * 1000ms) and one day is equal to 24 hours (24 * 60 * 60 * 1000ms).
➤ Then using let I set the time for which I want to set the countdown timer.
➤ I have calculated the distance of the input time in the next line. And then I saved it in a constant called countDown.
➤ The time we set above is converted to real-time using the new Date() method.
➤ Then I implemented the countdown with the help of setInterval.
➤ Then I took the current time from the device using new Date () and saved it in the constant called now.
➤ Then I subtract the current time from the time you set and store it in a constant called distance.
Now we have got a certain value for the countdown.
➤ Then using the next four lines I have converted the time of total countdown to hours, day, minutes, seconds.