Hello Coders, In this tutorial we are going to learn how to create analog clock using html, css and javascript. This is going to be a step by step tutorial with video tutorial as well as with source code tutorial.
Again like our previous article where we created an Monthly Calendar using the JavaScript’s Date object, we will be using the same date object to get the current time in this tutorial.
Learn How to Create Analog Clock Using HTML, CSS and JavaScript | Video Tutorial
Build a Analog Clock Using HTML, CSS and JavaScript | Step By Step Tutorial with Source Code
We will start by creating three files that are required for this project: index.html, styles.css, script.js.
Step 1: Setting Up The HTML
Add the boiler plate of the html and create a container div. Inside this container div we will define everything that our clock needs. Inside the clock-face div we will add the numbers. In this case our clock will only be displaying the numbers 12, 3, 6, 9.
After that we will need hour-hand, min-hand and second-hand, So we will define them in our html.
<!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>3 Analog Clock</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div id="clock">
<h2>Analog Clock</h2>
<div class="clock-face">
<div class="number top">12</div>
<div class="number right">3</div>
<div class="number bottom">6</div>
<div class="number left">9</div>
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Styling our analog clock
Refer the below styles which i have done. Feel free to make your changes and add your own styles if required.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
body {
background-color: #ebebeb;
}
.container {
padding: 3rem;
}
.container #clock h2 {
text-align: center;
margin-bottom: 2rem;
}
.container #clock {
width: 20rem;
height: 20rem;
position: relative;
margin: 5rem auto;
}
.container #clock .clock-face {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #f9f9f9;
position: relative;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border: 3px dotted black;
}
.container #clock .clock-face .number {
position: absolute;
font-size: 1.5rem;
font-weight: bold;
}
.container #clock .clock-face .top {
top: 1rem;
left: 47%;
}
.container #clock .clock-face .right {
top: 47%;
right: 1rem;
}
.container #clock .clock-face .bottom {
bottom: 1rem;
left: 47%;
}
.container #clock .clock-face .left {
top: 47%;
left: 1rem;
}
.container #clock .clock-face .hour-hand {
width: 30%;
height: 0.4rem;
background-color: #000;
position: absolute;
top: 50%;
left: 20%;
transform-origin: 100%;
transform: rotate(90deg);
}
.container #clock .clock-face .min-hand {
width: 40%;
height: 0.3rem;
background-color: #000;
position: absolute;
top: 50%;
left: 10%;
transform-origin: 100%;
transform: rotate(90deg);
}
.container #clock .clock-face .second-hand {
width: 50%;
height: 0.2rem;
background-color: green;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
}
Step 3: Adding JavaScript
Now lets start the fun part. First we need to get all the DOM elements and get a reference to those elements. So those variables will be hourHand, minHand, secondHand.
Create a function called setDate. First thing to in this function is get the current date. Using this date we can get the current hour and store it in the variable hours. Now we need to find the degree to rotate the hour hand. Since we are doing the clock which will have 12 hours in a day. we need to divide the hours by 12 and multiply it by 360 and add 90 to get the degree. i.e (hours / 12) * 360 + 90.
Once we have calculated the degree, we will use the transform attribute of the css to rotate the hour hand by the degree which we just calculated. We will do the same for minutes and seconds also.
Once Done, We will keep on calling this function every second by using the setInterval. This way our clock updates every second.
var hourHand = document.querySelector(".hour-hand")
var minHand = document.querySelector(".min-hand")
var secondHand = document.querySelector(".second-hand")
function setDate() {
var now = new Date()
var hours = now.getHours()
var hoursDegrees = (hours / 12) * 360 + 90
hourHand.style.transform = `rotate(${hoursDegrees}deg)`
var mins = now.getMinutes()
var minsDegrees = (mins / 60) * 360 + 90
minHand.style.transform = `rotate(${minsDegrees}deg)`
var secs = now.getSeconds()
var secsDegrees = (secs / 60) * 360 + 90
secondHand.style.transform = `rotate(${secsDegrees}deg)`
}
setInterval(setDate, 1000)
setDate()
That’s it. Congratulations on completing this simple JavaScript Project. Hope you guys enjoyed it and learnt something from this article. Also make sure to read all other JavaScript article tutorials that we have on this website. You can download the source code of this project by from below.
