Hello everyone, you can learn how to create a Digital Clock using HTML, CSS and JavaScript in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Digital Clock With JavaScript
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Digital Clock Using JavaScript - Coding Power</title>
</head>
<body>
<div class="container">
<h2 id="hour">00</h2>
<span>:</span>
<h2 id="minutes">00</h2>
<span>:</span>
<h2 id="seconds">00</h2>
<p id="ampm">AM</p>
</div>
<script>
function clock(){
let hour = document.getElementById("hour");
let minutes = document.getElementById("minutes");
let seconds = document.getElementById("seconds");
let ampm = document.getElementById("ampm");
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
var am = 'AM';
if(h > 12){
h = h - 12;
am = 'PM';
}
if(h < 10){
h = '0'+h;
}
if(m < 10){
m = '0'+m;
}
if(s < 10){
s = '0'+s;
}
hour.innerHTML = h;
minutes.innerHTML = m;
seconds.innerHTML = s;
ampm.innerHTML = am;
}
var interval =setInterval(clock, 1000)
</script>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
.container{
display: flex;
align-items: center;
justify-content: center;
}
.container h2,
.container span{
font-size: 6rem;
font-weight: 500;
}
.container h2{
padding: 15px;
background: white;
border-radius: 10px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.container p{
position: relative;
top: -50px;
left: 10px;
font-size: 2rem;
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
