Create Digital Clock using JavaScript

This tutorial blog to learn how to create Digital Clock using HTML CSS and JavaScript.

Video tutorial of Create Digital Clock using JavaScript

This tutorial video to learn how to create Digital Clock using HTML CSS and JavaScript.

Create Digital Clock using JavaScript [Source Codes]

This source code can help you to create Create Digital Clock using JavaScript.

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Wallpoet&display=swap" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div id="digiClock">

</div>


<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #000;
	color: red;
	display: flex;align-items: center;
	justify-content: space-around;
	height: 100vh;
}

@font-face {
    font-family: 'DS_DIGIB';
    src: url('../fonts/DS-DIGIB.ttf') format('truetype');
}

.digi_clock{
	font-family: 'Orbitron', sans-serif;


    font-size: 150px;
    
}
.digi_clock span{
	display: inline-block;
}
#second{
	width: 250px;
}
#ampm{
	font-family: 'Orbitron', sans-serif;
	font-size: 60%;
	font-weight: 700;

}

JavaScript Code

Copy

digiClock = document.getElementById('digiClock');

function digitalClock(){
	date = new Date()
	//date.setHours(date.getHours() + 3);
	getHours = date.getHours();
	var ampm = (getHours >= 12) ? "PM" : "AM";
	getHours = date.getHours() % 12 || 12;
	getMinutes = date.getMinutes();
	getSeconds = date.getSeconds();

	if(getHours < 10){
		getHours = "0"+getHours
	}
	if(getMinutes < 10){
		getMinutes = "0"+getMinutes
	}
	if(getSeconds < 10){
		getSeconds = "0"+getSeconds
	}

	ClockView = "<span>"+getHours + "</span>:<span>"+getMinutes+"</span>:<span id='second'>"+getSeconds+"</span>"+"<span id='ampm'>  "+ampm+"</span>";
	digiClock.innerHTML= ClockView
	setTimeout(digitalClock,1000)

}

digitalClock()

Create Digital Clock using JavaScript

Video tutorial of Create Digital Clock using JavaScript

Create Digital Clock using JavaScript [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery