This clock has the opportunity to view hours, minutes, and seconds. There are also AM and PM options.
Hopefully, you have learned from the above video tutorial how I made this digital clock. I made a small box on a web page as you saw in the video above.
If you are a beginner and want to know how I made it then be sure to follow the tutorial below. If you want the required source code, you will find the code in the demo section above.
Also below the article, I have given a download button with the help of which you can download the necessary source codes.
Step 1: Design the web page
First I designed the webpage using the following CSS code. I have used blue as the background color here. Margin-top 150px is used to place the clock in the middle of the webpage.
Step 2: Create the basic structure
The following HTML code created the basic structure of the digital clock and the CSS code designed it. I have used only one line of HTML code in this complete digital clock. Then I made a small box using the CSS code below.
Here I have used the width: 400px and height: 100px of the box. I used the background color black and used text color # 2ed9f7. If you have seen the demo above, you will understand that a white border has been used around this box.
I used border: 5px solid #ededee to make it. I used font-size: 60px to make the text a little bigger.
Similarly, we get hours, minutes, and seconds from the device using getHours (), getMinutes (), and getSeconds (). Then we store the received times in variables called h, m, s respectively.
Now I have created the options of AM and PM here. First I saved am by default in a variable called diem. Then added PM through the condition below. In other words, there are some conditions below. If you meet those conditions, you will use PM instead of Clock AM.
Now I have added zero in the case of a number of times. Many times we see a number of times as an example 02:09:04 in this case one by one 0 has been used. The following codes have been used to add zeros before that time.
Here the condition is given that when the time of the hour, minute, and second will be a number i.e. less than 10 than zero will be added to that time.
Now I have formatted how to view time in a webpage using textContent. Here I first gave the option to see the time in hours, minutes, and seconds and used a colon (:) in between each time. At the end of it all, I added the option of AM and PM.
Now using setTimeout I have been instructed to update this digital clock every 1000 milliseconds.
As you can see in the image above, now the digital clock is ready to show the exact time.
You must comment on how you like this design. If there is any problem then you can definitely let me know by commenting. Below I have given the download button which you can use to download the source code required to enhance this simple digital clock.