Many of beginners are confused of how to build a working analog clock?. I believe that it's very simple if you are familiar with HTML CSS and JavaScript.
You can make the shape of clock with the help of HTML and CSS but for making it functional, you may need to write the required script in JavaScript. If you want to know the required logic, you can watch this YouTube clip. In the end, you just need some practice over what you learnt.
The logic required for this is:
<div class="clock">
//defines a container element for the clock.
<div id="clock-elements">
//defines a container element for the clock hands and other clock elements.
<div class="stick-primary"></div>
//defines a clock hand.
<div class="sticks stick-1"></div>
//defines another clock hand.
<div class="sticks stick-2"></div>
//defines another clock hand.
<div class="sticks stick-3"></div>
//defines another clock hand.
<div class="sticks stick-4"></div>
//defines another clock hand.
<div id="inner-circle"></div>
//defines a circle element that is positioned at the center of the clock.
<div class="CC"></div>
//defines a container element for the clock date.
<div class="sec-hand"></div>
//defines an element for the second hand of the clock.
<div class="min-hand"></div>
//defines an element for the minute hand of the clock.
<div class="hour-hand"></div>
//defines an element for the hour hand of the clock.
<div class="date"></div>
//defines an element to display the current date of the clock.
Now, inside script
const secHand = document.querySelector('.sec-hand');
//selects the HTML element with the class "sec-hand" and assigns it to a JavaScript variable called secHand.
const minHand = document.querySelector('.min-hand');
//selects the HTML element with the class "min-hand" and assigns it to a JavaScript variable called minHand.
const hourHand = document.querySelector('.hour-hand');
//selects the HTML element with the class "hour-hand" and assigns it to a JavaScript variable called hourHand.
const clockDate = document.querySelector(".date");
//selects the HTML element with the class "date" and assigns it to a JavaScript variable called clockDate.
function setDate() {...}
//defines a function that sets the positions of the clock hands and updates the date.
let instance = new Date();
//creates a new instance of the Date() object.
let sec = instance.getSeconds();
//gets the current second of the minute.
let min = instance.getMinutes();
//gets the current minute of the hour.
let hrs = instance.getHours();
//gets the current hour of the day.
let day = instance.getDay();
//gets the current day of the week.
let secAngle = (sec / 60) * 360;
//calculates the angle of the second hand.
secHand.style.transform = rotate(${secAngle}deg)`;
//will rotate function of clock
Close script.
I hope you may understand the concept of how to build a clock. If still you need extra help, then kindly watch this tutorial.