Digital Clock using Javascript
Hello Visitors, Today in this Blog, We will create a javascript digital clock using HTML, CSS, and Javascript. In this blog, I have shared projects on CSS animation Examples, Javascript, Webdesign, etc. Please Make sure to check those if you want. Below is a video of what a JavaScript clock or JS clock will look like at the end of coding.
I hope you have watched the demo and get some idea about the project. Now in this snippet, we will create a digital clock in 24-hour format and, it will be displayed in HH:MM: SS way. Let’s start with the HTML part of the project. First, we will take a p tag with an id of ‘clock’. We will use the p tag to insert the time using custom javascript code.
Get Nandini Biswas’s stories in your inbox
Join Medium for free to get updates from this writer.
You May Like This:
- Simple Responsive Website from Scratch
- Comment Box using HTML CSS & JS
- Display date in dd-mm-yyyy format
Let start with the CSS part of the project. The text is given font size and gradient color. Its font family is chosen as Montserrat. To make the text thicker, I gave it a font-weight of 500. I used black color as the background of the snippet. You can use any color of your choice. I have eliminated the default width and height of the project by setting a margin and padding to zero. For making the ‘clock’ align perfectly in the middle, I used the display grid property. After that, I have set the ‘place-items: center’ and the height to 100vh. In this way, the clock will automatically align to the center of the viewport.
In the javascript part, first, we have taken a customClock() function. In this project, we tried to achieve the current hours, minutes, and seconds which are stored in different variables. The digit of the clock will be displayed in a single digit if the number is less than 10. For an instant, if the minute number 6, it will be displayed as 6 instead of 06. After the ‘customClock’ function is ready, we will display the time inside the p tag we created before. We can do it by obtaining the ‘clock’ id using the document.getElementById method and give our time as the content of the div using the innerHTML property.
