Analog Clock using HTML CSS and Javascript

byCodingFlicks -September 16, 2020

0

Hello My Friends, Welcome to the blog. Today we learn how to create a realtime analog clock using HTML, CSS, and javascript. Previously I shared a snippet based on a responsive navigation menu using only HTML and CSS. Check that out whether you haven't already.

For the HTML markup, I took a div element named box, which will act as the clock elements' container. First, I have taken twelve div elements for making the time number that sees around the analog clock. I gave an individual class name to each of these divs as well. Underneath these twelve divs, I have taken three other div named 'handle' and give each of the div a unique name like sec, min, and hour. These names are self-explanatory means they indicate the second, minute, and hour hand of the clock.

You may also like:

In the CSS part, I gave the body tag a height and width of 100vh and 100vw, so that the body element fit the viewport screen. After that, I gave an 'overflow: hidden' value. In this way, the scrollbar will appear for the document. after that box div element a height and width 500px and 600px. Then I gradually styled the clock hands and the numbers shown around the clock hands. Then I used the CSS property called transform: rotate() to rotate clock hands.

For the clock to function, we have to use some javascript code for the snippet. You can get the code from below. You also need to create two other files, HTML and the other one is CSS. Now copy the code below and paste to the separate file and save them.

HTML

<div class="box">
    <div class="line line1">
<div>
1</div>
</div>
<div class="line line2">
<div>
2</div>
</div>
<div class="line line3">
<div>
3</div>
</div>
<div class="line line4">
<div>
4</div>
</div>
<div class="line line5">
<div>
5</div>
</div>
<div class="line line6">
<div>
6</div>
</div>
<div class="line line7">
<div>
7</div>
</div>
<div class="line line8">
<div>
8</div>
</div>
<div class="line line9">
<div>
9</div>
</div>
<div class="line line10">
<div>
10</div>
</div>
<div class="line line11">
<div>
11</div>
</div>
<div class="line line12">
<div>
12</div>
</div>
<div class="handle" id="sec">
<div class="sec">
</div>
</div>
<div class="handle" id="min">
<div class="min">
</div>
</div>
<div class="handle" id="hour">
<div class="hour">
</div>
</div>
</div>

CSS

*{
padding: 0;
margin: 0;
box-sizing: border-box;
    font-family: poppins;
}

body{
width: 100vw;
height: 100vh;
overflow: hidden;
background: #ddd;
}

.box {
position: relative;
width: 600px;
height: 500px;
overflow: hidden;
background: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 5px 33px 20px rgba(0,0,0,0.3);
}

.box:before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
}
.handle{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.handle div{
position: absolute;
bottom: 50%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
}

.sec{
width: 2px;
height: 30%;
}

.min{
height: 27%;
width: 5px;
}

.hour{
height: 22%;
width: 10px;
}
.line{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
font-size: 24px;
padding: 18px;
color: #fff;
}

.line1{
transform: rotate(30deg);
}
.line1 div{
transform: rotate(-30deg);
}

.line2{
transform: rotate(60deg);
}
.line2 div{
transform: rotate(-60deg);
}

.line3{
transform: rotate(90deg);
}
.line3 div{
transform: rotate(-90deg);
}

.line4{
transform: rotate(120deg);
}
.line4 div{
transform: rotate(-120deg);
}

.line5{
transform: rotate(150deg);
}
.line5 div{
transform: rotate(-150deg);
}

.line6{
transform: rotate(180deg);
}
.line6 div{
transform: rotate(-180deg);
}

.line7{
transform: rotate(210deg);
}
.line7 div{
transform: rotate(-210deg);
}

.line8{
transform: rotate(240deg);
}
.line8 div{
transform: rotate(-240deg);
}

.line9{
transform: rotate(270deg);
}
.line9 div{
transform: rotate(-270deg);
}

.line10{
transform: rotate(300deg);
}
.line10 div{
transform: rotate(-300deg);
}

.line11{
transform: rotate(330deg);
}
.line11 div{
transform: rotate(-330deg);
}

JS

setInterval(animate, 1000);

function animate(){

let date = new Date();

const secDiv = document.getElementById('sec');    
let sec = date.getSeconds() / 60;
secDiv.style.transform = "rotate(" + (sec * 360) + "deg)";

const minDiv = document.getElementById('min');    
let min = (date.getMinutes() + sec) / 60;
minDiv.style.transform = "rotate(" + (min * 360) + "deg)";

const hourDiv = document.getElementById('hour');    
let hour = (date.getHours() + min) / 12;
hourDiv.style.transform = "rotate(" + (hour * 360) + "deg)";

}

animate();

I hope you liked it. Please follow the social media profiles to keep yourself updated for a future post.

Please do not enter any spam link in the comment box.