Create Analog Clock Using HTML, CSS & JavaScript

HTML <div class="clock"> <!--Hours --> <div class="hour"> <div class="hr" id="hr"></div> </div> <!--Minutes--> <div class="min"> <div class="mn" id="mn"></div> </div> <!--seconds--> <div class="sec"> <div class="sc" id="sc"></div> </div> </div> CSS /* now add css Code*/ *{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #282828; } .clock{ display: flex; width: 350px; height: 350px; justify-content: center; align-items: center; background: url(http://samuel-garcia.site/img/clock-sam.png); background-size: cover; border-radius: 50%; border: 4px solid #191919; box-shadow: -4px -4px 10px rgba(67,67,67,0.5), inset 4px 4px 10px rgba(0,0,0,0.5), inset -4px -4px 10px rgba(67,67,67,0.5), 4px 4px 10px rgba(0,0,0,0.3); } /*before*/ .clock::before{ content: ""; width: 15px; position: absolute; height: 15px; background: #747474; border-radius: 50%; z-index: 999; } .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::before{ content: ""; position: absolute; width: 8px; height: 80px; background: #ffb510; z-index: 9; border-radius: 6px 6px 0 0; } .mn::before{ content: ""; position: absolute; width: 4px; height: 90px; background: #8b8b8b; z-index: 10; border-radius: 6px 6px 0 0; } .sc::before{ content: ""; position: absolute; width: 2px; height: 150px; background: #e5e5e5; z-index: 11; border-radius: 6px 6px 0 0; } .hr, .mn, .sc{ display: flex; justify-content: center; position: absolute; border-radius: 50px; } JavaScript const deg = 6; const hr = document.querySelector('#hr'); const mm = 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)`; } )

Watch Video Tutorial

In this video, I have shown how to make an analog clock using only HTML, CSS, and javascript code. One of the great designs of analog clocks is the Neumorphism analog clock. In this video, you will learn step by step how to create a JavaScript clock. You can download the required source code by clicking on the download button below.

	The download will start automatically