How To Create A Simple Analog Clock
#JAVA #CSS #HTML #coding #tutorial
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>After you have inserted the Html code in your text editor you will have now to edit Css code using embedded style, where by the css codes are inserted in between <style> </style>tags, which are normally placed in between <head></head> tags of a html file. The css codes are used to apply formatting to the whole clock . Therefore the CSS codes will be inserted as follows;
body{
display: flex;
justify-content: center;
align-items: center;
height: 100px;
background-color: gray;
}
.clock{
width: 300px;
height: 300px;
border-radius: 50%;
background-size: cover;
background-image: url("https://i.posting.cc/hjVspvcJ/clock.png");
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 -15px 15px 0px brown;
inset o -15px 15px gray, 0.15px 15px(0,0,0, 0.3),inset 0 15px 15px(0, 0, 0, 0.3);
}
.clock::before{
content: " ";
width: 15px;
height: 15px;
position: absolute;
background-color: #fff;
border-radius: 50%;
z-index: 1000;
}
.hr::before{
content: " ";
width: 8px;
height: 80px;
background-color: #ff1o5e;
border-radius: 5px;
z-index: 100;
}
.mn::before{
content: " ";
width: 6px;
height: 90px;
background-color: red;
border-radius: 5px;
z-index: 11;
}
.sc::before{
content: " ";
width: 2px;
height: 140px;
background-color: #fff;
border-radius: 5px;
z-index: 10;
}
.hour, .min, .sec{
position: absolute;
}
.hr{
width: 160px;
height: 160px;
}
.mn{
width: 230px;
height: 230px;
}
.sc{
width: 180px;
height: 180px;
}
.hr, .mn,.sc{
display: flex;
justify-content: center;
}After you have successfully added the css and html codes, the last step you will now have to add the javascript codes in your html tags, where by they are enclosed in between <script></script>tags, which are normally inserted in between <html></html> tags anywhere in within the html file. Therefore the javascript codes are are inserted as follows;
<script>
const deg=6;
const hr=documnet: queryselector("#hr");
const mn=documnet: queryselector("#mn");
const sc=documnet: 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);
});
</script>
Comments