How to Create an Analog Clock with JavaScript & CSS
5 Step Guide to Create analog clock Only Using HTML, CSS, and JavaScript
Today, Clocks are a useful element for any UI if appropriately used. For example, clocks can be used in sites where time is the primary concern, like some booking sites, or apps show arriving times of trains, buses, flights, etc. The clock is basically of two types, Analog and Digital.
I wanted to see how easy it is to create an analog one with basic HTML, CSS, and JavaScript.
So, in this article, I will show you how you can create a simple clock UI following 5 steps.
Step 01
Create an index.html file and write the code below.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Javascript Clock UI Dark Mode</title><link rel="stylesheet" href="style.css"></head><body><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></body></html>
Step 02
Create a style.css file and write the code below. This is for creating the background.
*
{margin: 0;padding: 0;box-sizing: border-box;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #091921;}
Step 03
Now you can add the clock.png image.
.clock{width: 350px;height: 350px;display: flex;justify-content: center;align-items: center;background: url(clock.png);background-size: cover;border: 4px solid #091921;border-radius: 50%;box-shadow: 0 -15px 15px rgba(255,255,255,0.05),inset 0 -15px 15px rgba(255,255,255,0.05),0 15px 15px rgba(0,0,0,0.3),inset 0 15px 15px rgba(0,0,0,0.3);}//You can download clock.png below
Step 04
Create hour hand, minute hand, and second hand.
.clock::before{content: '';position: absolute;width: 15px;height: 15px;background: #fff;border-radius: 50%;z-index: 10000;}.clock .hour,.clock .min,.clock .sec{position: absolute;}.clock .hour, .hr{width: 160px;height: 160px;}.clock .min, .mn{width: 190px;height: 190px;}.clock .sec, .sc{width: 230px;height: 230px;}.hr, .mn, .sc{display: flex;justify-content: center;/* align-items: center; */position: absolute;border-radius: 50%;}.hr:before{content: '';position: absolute;width: 8px;height: 80px;background: #ff105e;z-index: 10;border-radius: 6px 6px 0 0;}.mn:before{content: '';position: absolute;width: 4px;height: 90px;background: #fff;z-index: 11;border-radius: 6px 6px 0 0;}.sc:before{content: '';position: absolute;width: 2px;height: 150px;background: #fff;z-index: 12;border-radius: 6px 6px 0 0;}
Step 05
Again move to the index.html and add the time to the clock using javascript.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Javascript Clock UI Dark Mode</title><link rel="stylesheet" href="style.css"></head><body><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>//Start script part<script type="text/Javascript">const deg = 6;const hr = document.querySelector('#hr');const mn = document.querySelector('#mn');const sc = document.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>//End script part</body></html>
If you like to refer to the 8 mins video on how to implementing this, I recommend this video:
Hope you found this helpful. Do reach out to me if you have any trouble implementing this or if you need any help.
