Hello Viewers, today in this tutorial, you’ll learn How To Make Digital Clock using HTML CSS & JavaScript.
This Post is about making a Digital Clock using HTML CSS & JavaScript.
To create this project (Digital Clock using HTML CSS & JavaScript). First, you need to create three Files one HTML File and one is CSS File and another one is JavaScript File.
First, create an HTML file with the name of index.html and paste the given code in your HTML file.
<html lang="en">
<!-- Created by Amit Tutorial - www.amittutorial.com -->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digital Clock</title>
<!-- External CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="clock"></div>
<!-- Script -->
<script src="app.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given code in your CSS file.
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap");
body{
background-color: black;
font-family: "Orbitron" , sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.clock{
color: #20c20e;
font-size: 60px;
letter-spacing: 7px;
}
Third, create a JavaScript file with the name of app.js and paste the given code in your JavaScript file.
const clock = document.querySelector(".clock");
clock.addEventListener("load" ,tick);
function tick(){
const now = new Date();
const h = now.getHours();
const m = now.getMinutes();
const s = now.getSeconds();
const html = `
${h} :
${m} :
${s}`;
clock.innerHTML = html;
}
setInterval(tick, 1000);
That’s all in this post, you’ve successfully created Digital Clock using HTML CSS & JavaScript.
If your code does not work or you’ve faced any problem then comment down your problem. If you’re feeling difficult to understand what I am saying in this post.
You can watch a full video tutorial on this project(Digital Clock using HTML CSS & JavaScript).
Download Source Code: