Hello friends, today in this blog we will see how to create a working analog clock using HTML, CSS, and Javascript. In our previous blog, we saw how to create responsive animated card designs using HTML and CSS only. I have shared many posts related to Javascript. So don't forget to check here.
In this design [Analog Clock Desing] there is a clock with a little bit of Neumorphic design as you can see in the image above. The clock is basically is a div with a class "clockContainer" in that div there is the hand or sticks smallest one is for an hour, the medium one is for minutes, and last but not least biggest one is for the second. The div "clockContainer" has a background image.
You may like these:
- Filterable Image Gallery with preview
- Responsive Animated Card Design
- Custom Context or Right Click Menu Design
- Responsive Sidebar Menu Design
The javascript concept behind rotating the sticks or hands of the clock is first of all we will set an interval of 1 second which means the code will be written inside of the interval function, will be executed every second, in the set interval function we get the current hour, minutes, and seconds. After getting the current time, we need to find the degree to rotate the sticks or hands of the clock.
If you are filling difficulty understanding what am I trying to say, So you can check the source code and preview as well.
Preview is available here.
HTML Code
<!-- ----------------- Created by InCoder ----------------- -->
<!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">
<title>Analog Clock Design - InCoder</title>
<link rel="stylesheet" href="main.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="clockContainer">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
</body>
</html>
CSS Code
/* ----------------- Created by InCoder ----------------- */
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(47 53 77);
}
.clockContainer {
width: 25rem;
height: 25rem;
position: relative;
border-radius: 50%;
background: url('https://drive.google.com/uc?id=1CMGPzgNoLSAiZI738O2DNEMtxUTBfzLM&export=view') no-repeat center;
box-shadow: inset 0px 0px 8px rgb(204 204 204 / 20%), 0px 0px 20px rgb(204 204 204 / 20%);
}
.clockContainer::before {
content: "";
top: 50%;
left: 50%;
width: 5%;
height: 5%;
border-radius: 50%;
position: absolute;
background-color: #797979;
transform: translate(-50%, -50%);
}
.clockContainer :is(.hour,
.minute,
.second) {
position: absolute;
border-radius: 1rem;
transform-origin: bottom;
}
.hour {
top: 21%;
left: 49%;
width: 2%;
height: 28%;
background-color: #797979;
}
.minute {
top: 18%;
left: 49%;
width: 1.5%;
height: 32%;
background-color: #797979;
}
.second {
top: 12%;
left: 49.5%;
width: 1%;
height: 38%;
z-index: -1;
background-color: rgb(233 54 50);
}
Javascript Code
let hourStick = document.querySelector('.hour')
minuteStick = document.querySelector('.minute')
secondStick = document.querySelector('.second');
window.addEventListener('load', () => {
setInterval(() => {
let date = new Date();
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
let hDeg = 30 * hour + minute / 2;
let mDeg = 6 * minute;
let sDeg = 6 * second;
hourStick.style.transform = `rotate(${hDeg}deg)`;
minuteStick.style.transform = `rotate(${mDeg}deg)`;
secondStick.style.transform = `rotate(${sDeg}deg)`;
}, 1000);
});
Top comments (0)