Using Javascript + Html + Css
In our todays tutorial we will explain on how to create a simple digital watch using html, javascript and CSS, You may watch the full clip here; YouTube Link. Let’s create a simple digital watch watch step by step;First you will need to include javascript, Html and CSS codes in your text editor as follows;
Lets first add HTML CODES as below;
<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>