Analog Clock using HTML CSS and JavaScript
Step1- Copy and paste the HTML code mentioned below and save the file as "clock.html".
<html>
<head>
<link rel="stylesheet" href="itinhindi.css">
<title>Attractive Live Analog Clock</title>
</head>
<body>
<div class="analog-clock">
<div class="hours">
<div class="hr" id="hr"></div>
</div>
<div class="minutes">
<div class="mn" id="mn"></div>
</div>
<div class="seconds">
<div class="sc" id="sc"></div>
</div>
</div>
<script src="source.js"></script>
<footer>
<p>Created by
<a target="_blank" https://www.youtube.com/channel/UCTt7PLZfw50f-fbZBsrQCuA/">
IT in Hindi</a>
</p>
</footer>
</body>
</html>
CSS CODE :
Step2- Copy and paste the CSS code below and save the file as "itinhindi.css".
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:#000033;
}
.analog-clock {
display: flex;
width: 350px;
height: 350px;
justify-content: center;
align-items: center;
background: url(http://samuel-garcia.site/img/clock-sam.png);
background-size: cover;
border: 4px solid #000033;
border-radius: 50%;
box-shadow: 19px 19px 38px #0000b3;
-19px -19px 38px #ccccff;
}
.analog-clock:before {
content: "";
position: absolute;
width: 15px;
height: 15px;
background: #8c0b0b;
border-radius: 50%;
z-index: 999;
}
.analog-clock .hours,
.analog-clock .minutes,
.analog-clock .seconds
{
position: absolute;
}
.analog-clock .hours, .hr
{
width: 160px;
height: 160px;
}
.analog-clock .minutes, .mn
{
width: 190px;
height: 190px;
}
.analog-clock .seconds, .sc
{
width: 230px;
height: 230px;
}
.hr, .mn, .sc
{
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
}
.hr:before {
content: "";
position: absolute;
width: 8px;
height: 80px;
background: #ffb510;
z-index: 9;
border-radius: 8px 8px 0 0;
}
.mn:before {
content: "";
position: absolute;
width: 8px;
height: 90px;
background: #2a3d5e;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.sc:before {
content: "";
position: absolute;
width: 2px;
height: 150px;
background: #f00;
z-index: 11;
border-radius: 6px 6px 0 0;
}
footer {
background-color: #555;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
font-family: sans-serif;
}
footer a {
color: Red;
text-decoration: none;
margin-right:5px;
}
---------------------------------------------------End-----------------------------------------------------
Step3- Copy and paste the JavaScript code below and save the file as "source.js".
const deg = 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;
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)`;
})
How to run the source code :-
Step1- Copy and paste the HTML code mentioned below and save the file as "clock.html".
Step2- Copy and paste the CSS code below and save the file as "itinhindi.css".
Step3- Copy and paste the JavaScript code below and save the file as "source.js".
Step4- Run "clock.html" file.
0 Comments