Then I made another small box where the date will be shown. Arrangements have been made here to show the month, day, and year between the dates.
Hopefully, the demo above has helped you to know how it works. Above you will find the required source code. However, you can download the source code with the help of the button below the article.
Step 1: Create two colorful circles
We have created two colorful circles on the webpage using the following HTML and CSS codes. I have created an area to see these. Those two circles can be seen in that area.
The width of that area: 430px and height: 520px. Here the height of the circles, the width 140px, and the border-radius helped to convert it into a circle.
The following codes have been used to locate that circle. Different positions and background colors have been added for the two circles.
Step 2: HTML code to create a digital clock
Now I have added the HTML code needed to create the digital clock. One colon was used between each time to see the time. That is, two colonies have been used between the three periods of the hour, minute, and second.
Now some basic CSS code has been added to design it. Here a background color is used and a backdrop-filter is used to make the background a bit opaque.
I have stored all the information in a function called set date. Then, using setInterval, the set date function is updated every 1 second. As you can see here used 1000 milliseconds, which means these calculations will be updated every one second. As these calculations are updated every second, we can see the change in time every second.
Step 4: Design the time viewing space with CSS
Now we have to design the places to show the time. The following CSS codes have helped to design the text that has been used to show the time here.
Step 5: Add animation to colon
Now animation has been added to the colon that was used. These colonies will be on and off every 0.5 seconds.
Step 6: Design the date box in Digital Clock
Now I have designed the place to see the date. A small box has been created to view the date as you saw in the demo above. I used the following CSS code to make that box.