Analog Clock Using HTML, CSS and JavaScript
Creating an analog clock using HTML, CSS, and JavaScript involves building the clock’s structure in HTML, styling it in CSS, and making it functional with JavaScript. Here’s a step-by-step description:
Download first following image and put this image in together with HTML, CSS, and JavaScript files
1. HTML Structure
The HTML part sets up the basic structure of the clock. We use a container for the clock and individual elements for the hour, minute, and second hands.
<!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>Analog Clock - html Css JS</title>
</head>
<body>
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS Styling
CSS is used to style the clock face and the hands. The clock is given a circular shape, and the hands are positioned at the center.
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}
.clock{
width: 300px;
height: 300px;
background-image: url("clock.png");
border-radius: 50%;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
inset 0 15px 15px rgba(0, 0, 0, 0.3);
}
.clock::before{
content: "";
width: 15px;
height: 15px;
position: absolute;
background-color: #fff;
border-radius: 50%;
z-index: 1000;
}
.hour,
.min,
.sec{
position: absolute;
}
.hr{
width: 160px;
height: 160px;
}
.mn{
width: 190px;
height: 190px;
}
.sc{
width: 230px;
height: 230px;
}
.hr,
.mn,
.sc{
display: flex;
justify-content: center;
}
.hr::before{
content: "";
width: 8px;
height: 80px;
background-color: #06fd2f;
z-index: 100;
border-radius: 5px;
}
.mn::before{
content: "";
width: 6px;
height: 90px;
background-color: rgba(15, 105, 207);
z-index: 11;
border-radius: 5px;
}
.sc::before{
content: "";
width: 2px;
height: 140px;
background-color: #fff;
z-index: 10;
border-radius: 5px;
}
3. JavaScript Functionality
JavaScript calculates the current time and rotates the clock hands accordingly. It updates the hands every second to ensure the time is accurate.
const deg = 6; //360deg / 60(min||sec) => 6
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30; //360deg / 12 hour => 30
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
});
For More Tutorials Please Click Here
