Hello everyone! I hope you all are doing great. Today I'm going to teach you how to build a clock using just HTML, CSS and vanilla JavaScript. So keep patience and keep on reading.
We will first learn HTML and then CSS and then we will see the JavaScript. So let's begin!
HTML :
I'm attaching the HTML first, have a look at it first then I'll explain it. Here you go!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CLOCK</title>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div id="clock">
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</div>
</body>
</html>
As you just saw there is nothing much in the HTML, we just have a main div with id 'clock' and then it's three children which will work as hours, minutes and seconds hand respectively. We will shape them up using CSS. Let's move to CSS then!
CSS :
The CSS is the most important part of this project. So we will go through it step by step, first, let's introduce our clock on the page. I have used this template you can use any other of your choice.
#clock {
position: relative;
background: url('/clock.webp') no-repeat;
background-size: 100%;
width: 40vw;
height: 40vw;
margin: auto;
}
So beginning with the first line. Here we use position relative because we will be positioning our clock hands relative to this div. Using background property we introduce our clock image to the page and set its background-repeat to no-repeat and it's size to 100%. Then it's simple we give it the required width and height and set its margin to 'auto' so that it is centered. Our page will look something like this after writing this much CSS.
Moving on to the next block of code. Here you go!
#hours, #minutes, #seconds {
position: absolute;
background: black;
border-radius: 10px;
transform-origin: bottom;
}
Here we use position absolute so that we can position the divs relative to the 'clock div'. Then we set the background of the divs to black and the border-radius to 10px. The transform-origin is the point around which a transformation is applied, here it's set to bottom means our animation will be applied around the bottom or in simpler words, the bottoms of the div will remain fixed. You will notice that there is no change on the page because we haven't set any width and height to the divs, we will do it in the next step.
First, have a look at the code:
#hours {
width: 2%;
height: 20%;
top: 30%;
left: 48.92%;
background: red;
}
#minutes {
width: 1.5%;
height: 24%;
top: 25.8%;
left: 49.1%;
background-color: slategray;
}
#seconds {
width: 1%;
height: 32.5%;
top: 17.6%;
left: 49.4%;
}
There is nothing much to explain here. We just applied the required height, width and margins to correctly position the clock hands or the divs and provided them some colors. Here is how our page looks now!
Maths:
Now we need to do some maths, in order to calculate how much our respective hands should rotate to accurately depict an actual clock. Let's look at it now!
Hour Hand: We know that the hour hand rotates by 360 degrees in 12 hours, which means it will rotate by 30 degrees in 1 hour. You must have noticed that the hour hand is not always fixed at a particular hour, it moves slowly towards the next hour mark as the minute hand rotates. In order to replicate this our hour hand should rotate by some additional degrees in addition to that calculated above. As calculated above the hour hand rotates by 30 degrees in one hour, we can also say that it rotates by 30 degrees in 60 minutes hence it will rotate by a half degree in one minute. Hence overall rotation of the hour hand at a particular hour = 30*hours + 1/2*mins.
Minute Hand: With similar logic as above. The minute hand rotates by 360 degrees in 60 minutes, which means it will rotate by 6 degrees in one minute. We can neglect the rotation which will be caused by the second's hand because it is negligible. Hence overall rotation of the minute hand at a particular minute = 6*minute.
Second Hand: The second hand rotates by 360 degrees in 60 seconds, which means it will rotate by 6 degrees in 1 second. Hence overall rotation of the second hand at a particular second = 6*second.
Take a look at the calculation once and then lets move on to JavaScript.
JavaScript:
Here is the JavaScript go throught it once.
setInterval(() => {
d = new Date();
hour = d.getHours();
min = d.getMinutes();
sec = d.getSeconds();
rotateHour = 30*hour + min/2;
rotateMin = 6*min;
rotateSec = 6*sec;
hours.style.transform = `rotate(${rotateHour}deg)`;
minutes.style.transform = `rotate(${rotateMin}deg)`;
seconds.style.transform = `rotate(${rotateSec}deg)`;
}, 1000);
Its very simple, we will use setInterval() function and set the interval to 1000ms(1s). We use the Date() function to get the date and the store the hours, minutes and seconds in a variable.
After that we calculate the rotation values and store them in a variable.
Now all we need to do now is manipulate the CSS, we add transform properties to the divs named hours, minutes and seconds respectively. Using backticks we pass the rotation values to the 'transform: rotate(deg)' property. Boom! our clock works.
Congratulations you built a clock using HTML, CSS and JavaScript. Your frontend skills++;
Your clock should look something like this at the end. Here is the link to the clock I built https://jovial-pavlova-6e98ed.netlify.app/
Here is the GitHub repo as well fork it for reference. github.com/Sreejit-Sengupto/Clock-JS
You can follow me on Twitter I keep posting there regarding Frontend, Java and other tech stuff. Do like if you loved the blog and follow if you wish. See you next time!