Below I have given a live demo so that you can understand how this project works.
Step 1: Design a web page to create a digital clock
Now we have created the basic structure of this digital clock using HTML and CSS code. I have added all the time in this structure. This structure is not visible as no background color is given here.
Step 3: Information of digital clock
The length of each box is 150 and the background color is white. Here align-items: center is used so that the text used in it is located in the middle of the box. Box-shadows have also been used to make the boxes brighter and more attractive.
The colon symbols have been designed using this small amount of CSS code below. Color White has been used and font-size: 60px has been used to increase the size.
Then I similarly used the following three code lines to take the time of hours minutes and seconds. We have store hours, minutes, and seconds in hr, min, sec constants, respectively.
Using the following three-line code I have added a zero to the single number time case. Originally made by a single number when it was below 10. It doesn’t look good to see a number. So the following three codes have been used to add a zero to it. Here I have given the condition that when the time of this hour, minute, and second is less than 10 then one zero will be added to it.
Now I’ve used textContent to display these times in a pre-made box.
If you want to add am and pm format with a digital clock then the following design will help you. The AM / PM option in the digital clock helps to understand the time perfectly and beautifully.
If you are a beginner and want this design tutorial then you can search my blog site. Because I have already shared with you the complete step-by-step tutorial on this design. There you have shared the method of making each element step by step.