How to create an Analog Clock using HTML CSS & JS
 |
Hello friends! Welcome back to our Blog ProgrammingHill My name is Aniruddh, Today we are going to create a Dynamic Analog Clock using HTML CSS and JavaScript. Friends! this clock will be fully responsive and it will show you time like analog clock as well as dynamically like an watch. So friends without wasting any time let's start
Step 1- Create a folder named Dynamic Analog Clock
Friends! firstly create a folder with name that you want. now all the 3 project files will be here.
Step 2- Create an index.html file
Now create an index.html file in the same folder and open this file in your text editor and paste all the code given below in your file and save.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Analog Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="analog">
<img src="clock.png" alt="" class="image">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
<div class="dynamic">
<span class="clock"></span>
<span class="date"></span>
</div>
</div>
</body>
<script src="script.js"></script>
</html>Step 3- Create a style.css file
Now create and style.css file in the same folder. this file will beautify your analog clock because without this file your clock will look very ugly, so again open this file in your text editor and paste all the code given below in your file and save.
body {
background-color: wheat;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
}
.container {
width: 70vw;
height: 85vh;
margin-top: 5vh;
background-color: rgb(255, 255, 0);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 3px 3px 8px black,
-1px -1px 4px black;
}
.analog{
margin-top: 1vh;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 3vh;
}
.hour,.minute, .second{
display:flex;
position: absolute;
width: 0.8vw;
border-radius: 25px;
transform-origin: bottom;
background-color: black;
left: 49.5vw;
}
.hour{
width: 0.7vw;
top: 24.5vh;
height: 20vh;
}
.minute{
width: 0.6vw;
top: 20.4vh;
height: 24vh;
}
.second{
width: 0.3vw;
top: 17.4vh;
height: 27vh;
}
span {
padding: 2vh;
font-size: 5vh;
color: whitesmoke;
font-weight: bold;
background-color: palevioletred;
box-shadow: 2px 2px 4px black;
}
span:hover {
background-color: springgreen;
}
.date {
margin-left: 1vw;
}
@media only screen and (max-width:1024px){
.container{
width: 100vw;
height: 100vh;
}
.analog{
margin-top: 0vh;
}
.image{
width: 264px;
height: 264px;
}
.dynamic{
display: flex;
flex-direction: column;
}
.date{
margin-left: 0vw;
margin-top: 3vh;
}
.hour, .minute, .second{
width: 2vw;
left: 49.5vw;
}
.hour{
top: 28.5vh;
height: 14vh;
}
.minute{
width: 1.5vw;
top: 26.4vh;
height: 16vh;
}
.second{
width: 0.8vw;
top: 24.9vh;
height: 18vh;
}
}Step 4- Create a script.js file
Friends! now we are at our final step, create a script.js file in the same folder, this file is the brain of your Dynamic Analog Clock because without it your clock is not going to work so open this file in your text editor and paste all the code given below and save this file.
let hour=document.querySelector('.hour');
let minute=document.querySelector('.minute');
let second=document.querySelector('.second');
let clock = document.querySelector('.clock');
const time = setInterval(() => {
let d = new Date().toLocaleTimeString();
clock.innerHTML = d;
let h= new Date().getHours();
let m= new Date().getMinutes();
let s= new Date().getSeconds();
hour.style.transform=`rotate(${h*30+m/2}deg)`;
minute.style.transform=`rotate(${m*6}deg)`;
second.style.transform=`rotate(${s*6}deg)`;
}, 1000);
let date = document.querySelector('.date');
const dat = setInterval(() => {
let D = new Date().toLocaleDateString();
date.innerHTML = D;
}, 1000);
Step 5- Background Clock Image
Friends! now our Dynamic Analog Clock is ready and it is fully functional and responsive, now I want you to improve this Clock Project and add some extra features in it so that you can get complete understanding of this project and your knowledge would improve. If you have any doubt regarding this Dynamic Analog Clock Project please comment below and let me know if you liked this or not. Thanks for reading! Bye Bye.
Post a Comment