Simple JavaScript Digital Clock

byCodingFlicks -October 14, 2021

0

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.

You May Like This:

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 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.

Javascript Digital Clock [ Source Code ]:

For creating this project, make two files. One is HTML and, the other one is CSS. You can create a separate js file for putting js code. For this project, I have inserted the js code before the ending HTML tag. In the end, Please copy the code below and paste them into your files.

HTML

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
	<meta charset="UTF-8">
	<title>Simple Digital Clock using Javascript</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<p id="clock"></p>
	<script>
	   setInterval(customClock, 500);
	   function customClock() {
	       var time = new Date();
	       var hrs = time.getHours();
	       var min = time.getMinutes();
	       var sec = time.getSeconds();
	       
	       document.getElementById('clock').innerHTML = hrs + ":" + min + ":" + sec;
	       
	   }
	   
	</script>
</body>
</html>

CSS:

* {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
}
body {
	background: #000;
	display: grid;
	place-items: center;
	height: 100vh;
}
#clock {
	font-size: 250px;
	background: -webkit-linear-gradient(#2b32b2, #1488cc);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 500;
}

I hope you have implemented the code successfully and got the result. If you like the snippet, then please share the articles on this blog. Please follow us on our social media profiles. More exciting snippets on different topics are on the way. Thanks for visiting the blog.

Please do not enter any spam link in the comment box.