How to make Analog Clock using HTML, CSS & JAVASCRIPT
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog Clock</title>
<style>
@font-face {
font-family: clock;
src: url(./digital-7.regular.ttf);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
display: flex;
align-items: center;
min-width: 850px;
justify-content: space-between;
}
.clock {
height: 350px;
width: 350px;
background-color: white;
border-radius: 50%;
border: 20px solid goldenrod;
box-shadow: inset 1px 1px 9px 2px gray,
inset 1px 1px 9px 2px green,
inset 1px 1px 9px 2px gray,
inset 1px 1px 9px 2px gray,
inset 1px 1px 99px 2px gray;
padding: 20px;
}
.clock__inner {
background-image: url('./clock-numbers-clock-face-time-58912.png');
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.center {
background-color: rgb(156, 151, 151);
width: 15px;
height: 15px;
position: absolute;
border-radius: 50%;
}
.hour {
position: relative;
}
.hr::before {
content: '';
position: absolute;
width: 5px;
height: 60px;
background-color: black;
z-index: 6;
right: -2px;
border-radius: 30%;
}
.min {
position: relative;
}
.mn::before {
content: '';
position: absolute;
width: 4px;
height: 100px;
background-color: black;
z-index: 5;
right: -2px;
border-radius: 35%;
}
.sec {
position: relative;
height: 50px;
}
.sc::before {
content: '';
position: absolute;
width: 3px;
height: 130px;
background-color: red;
z-index: 4;
right: -2px;
border-radius: 25%;
}
</style>
</head>
<body>
<div class="container">
<div class="clock">
<div class="clock__inner">
<div class="hour">
<div class="hr"></div>
</div>
<div class="min">
<div class="mn"></div>
</div>
<div class="sec">
<div class="sc"></div>
</div>
<div class="center"></div>
</div>
</div>
</div>
<script>
setInterval(() => {
let date = new Date();
let hour = date.getHours() - 12;
hour = (-180 + (hour * 30)) + 'deg';
document.querySelector('.hour').style.transform = `rotate(${hour})`;
let min = date.getMinutes();
min = (-180 + (min * 6)) + 'deg';
document.querySelector('.min').style.transform = `rotate(${min})`;
let sec = date.getSeconds();
sec = (-180 + (sec * 6)) + 'deg';
document.querySelector('.sec').style.transform = `rotate(${sec})`;
console.log(date.getHours() - 12);
}, 1000);
</script>
</body>
</html>
Comments
Post a Comment