Analog clock usng html ,css and javascript
here is the code of the the analog clock .....
here in this site codervinay
you see all the things present on the website ........
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog Clock</title>
</head>
<style>
body{
margin: 0px;
}
#mainheader{
margin-top: 0;
margin: auto;
background-color:black;
color:white;
overflow: hidden;
padding-left: 20px;
}
#mainheader h1{
font-family: Georgia, 'Times New Roman', Times, serif;
}
h1 p{
font-size: 12px;
margin-top: 3px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.mainnav{
background-color: rgb(37, 36, 36);
color: blanchedalmond;
overflow: hidden;
}
.mainnav li{
display: inline;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 20px;
padding-right: 10px;
}
.mainnav li:hover{
background-color: thistle;
background-color: rgb(19, 14, 14);
}
a{
text-decoration: none;
color: white;
}
#clockcontainer{
position: relative;
height: 40vw;
width: 40vw;
background-image: url(clock.png) ;
background-size: 100%;
margin: auto;
}
#hour,#minute ,#second {
position: absolute;
background: black;
border-radius: 10px;
transform-origin: bottom;
}
#hour{
width: 1.6%;
height: 30%;
top: 21%;
left: 49.3%;
}
#minute{
width: 1.2%;
height: 30%;
top: 20%;
left: 49.45%;
}
#second{
width: 1%;
height: 35%;
top: 16%;
left: 49.5%;
}
#mainfooter{
background: black;
color: blanchedalmond;
text-align: center;
padding:20px;
margin-top: 40%;
}
@media(max-width: 600px){
#mainfooter{
margin-top: 50%;
}
}
</style>
<body>
<header id="mainheader"><div class="container">
<h1>
The Analog Clock <p id="des">in pure JS by Vinay Prajapati</p>
</h1>
</div></header>
<div class="mainnav">
<ul>
<a href="https://terminatelearnings.blogspot.com"><li>Home</li></a>
<a href="https://codervinay.blogspot.com/2020/08/analog-clock-usng-html-css-and.html"><li>Clock Source Code</li></a>
<a href="https://www.youtube.com/channel/UCO3n_mr_e-BewMEAkrRYsiA"><li>Subscribe </li></a>
</ul>
</div>
<div id="clockcontainer">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<footer id="mainfooter">
<p>Copyright © 2020 all right is reserved </p>
</footer>
</body>
<script>
setInterval(() =>{
d =new Date();
htime = d.getHours();
mtime = d.getMinutes();
stime = d.getSeconds();
hrotation = 30*htime + mtime/2 ;
mrotation = 6*mtime;
srotation = 6*stime;
hour.style.transform = `rotate(${hrotation}deg)`;
minute.style.transform = `rotate(${mrotation}deg)`;
second.style.transform = `rotate(${srotation}deg)`;
},1000);
</script>
</html>
Comments
Post a Comment