codemediaweb.com

Code Media

hire me

How to Make Analog Clock using JavaScript & CSS

by
How to Make Analog Clock using JavaScript & CSS

Analog clock in javascript, how to make analog clock in javascript, analog clock html code, analog clock using html css and javascript All questions are answered here.

In this article, you will learn how to create an analog clock using JavaScript. You must have seen many tutorials on how to create an analog clock. But here I am going to show you a very simple and simple design.

In this tutorial, I have given a complete explanation of which code has been used for which purpose. If you are also a beginner then you can easily learn how to make this analog clock. Of course, you need to have a basic idea about HTML CSS JavaScript to create it.

Javascript Analog Clock Example

We use analog clocks in many places. Here I have shared an explanation and source code on how to create a simple analog clock. Below I have shared a live demo that will help you see a live preview of this project.

See the Pen Untitled by Code Media (@codemediaweb) on CodePen.

How to Create Analog Clock in JavaScript

I designed its basics using the first HTML CSS. Then using JavaScript’s newDate method, I took the time from the device and converted it to a degree. Then I arranged to rotate the hand according to that degree. Lastly, I have used setInterval which will update this system every second. As a result, we can see the time in seconds.

The basic structure of an analog clock

Using the following HTML and CSS codes I have created the basic structure of this analog clock. First I designed the webpage, that is, I added background color here. 

Then I made the basic structure of this watch. I have made a box here to say the basic structure and I have used black as the background color of that box. I used a border-radius to round that box.

<div class=”clock”>
</div>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: #0490d2;
}
.clock{
    background: #16191e;
    height: 320px;
    width: 320px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    box-sizing: content-box;
    border-radius: 50%;
    border: 7px solid #242931;
    box-shadow: 15px 15px 35px rgba(0,0,0,0.2),
    inset 0 0 30px rgba(0,0,0,0.4);
}

Now with CSS ‘: before’ we have created a point in the middle of the clock. This is basically the center point around which all the hands of the clock will continue to rotate. To make it, I made a sphere-shaped box, the background color of which I used white.

.clock::before {
  content: ”;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 18px;
  margin-left: -9px;
  margin-top: -6px;
  background: white;
  z-index: 11;
}
The basic structure of an analog clock

Add images to add numbers from 1 to 12

Analog clocks have numbers from 1 to 12 which helps in understanding time. But here I did not manually create any number. I have used an image here. You can do this manually if you want.

<img src=”https://dl.dropbox.com/s/f3b3lyanili7zl2/clock%20template-01.svg?raw=1″ alt=”clock”>
img{
    position: relative;
}
Add images to add numbers from 1 to 12

Make the hand of the analog clock

Now I have made three hands in this watch which will indicate the time of hours, minutes, and seconds respectively. Here I have used a different code for each hand. 

But first I designed it using some basic CSS code. The background color of each hand is white and one side is slightly rounded.

<div class=”hour hand” id=”hour”></div>
<div class=”minute hand” id=”minute”></div>
<div class=”seconds hand” id=”seconds”></div>
.hand{
    position: absolute;
    background-color: #ffffff;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 5px;
    transform-origin: bottom;
}

Now I have assigned different positions for each hand using CSS code.

.hour{
    height: 60px;
    width: 10px;
    top: 100px;
}
.minute{
    height: 80px;
    width: 5px;
    top: 80px;
}
.seconds{
    height: 90px;
    width: 3px;
    top: 70px;
    background-color: #0d96f1;
}
Make the hand of the analog clock

Enable analog clock with JavaScript

Now I have implemented its analog clock using JavaScript. First I set the three-hand ID functions to a constant.

let hour = document.getElementById(“hour”);
let minute = document.getElementById(“minute”);
let seconds = document.getElementById(“seconds”);

I took the time from the device using the line below. ‘new Date’ is a javascript method that helps to take some time.

let date_now = new Date();

Using the following three lines I have taken the time of hours minutes and seconds respectively.

let hr = date_now.getHours();
let min = date_now.getMinutes();
let sec = date_now.getSeconds();

 Now is the time to convert these to degrees. You must have heard that the analog clock rotates depending on the degree. The following calculations will determine how the hands will rotate.

let calc_hr = (hr * 30) + (min / 2);
let calc_min = (min * 6) + (sec / 10);
let calc_sec = sec * 6;

Now I have arranged to rotate the hands with the help of ‘rotate()’.

hour.style.transform = `rotate(${calc_hr}deg)`;
minute.style.transform = `rotate(${calc_min}deg)`;
seconds.style.transform = `rotate(${calc_sec}deg)`;

setInterval helps to update certain calculations or systems from time to time. Here 1000 milliseconds is used which is equal to one second. As a result, the system will be updated every second.

let set_clock = setInterval(() => {
}, 1000);
analog clock with JavaScript
Hope you find out from this article how I made this analog clock using HTML CSS JavaScript. If there is any problem then you can definitely let me know by commenting. Below is the source code for making this design.

Leave a comment