Make an Analog Clock using HTML, CSS and JavaScript

Make an Analog Clock using HTML, CSS and JavaScript

Make an Analog Clock using HTML, CSS and JavaScript

In this article, you are going to learn how to make an analog clock using HTML, CSS, and JavaScript programming code. Earlier I shared with you the method of making an analog clock of Neumorphism design. Now here I will show you how to make a simple analog clock. 

As you can see in the picture above it is a very simple and simple design. Here are three hands of hours, minutes, and seconds to see the time. There are numbers from 1 to 12 in the clock pulse. The time depends on the time of your device, that is, the time will be the same as the time of your device.

Javascript Analog Clock Code



 Originally the HTML programming code was used to construct this watch. The CSS code has been used to design it. The most notable work is that of JavaScript programming code. Of course, to make this watch you need to have a basic idea about HTML, CSS, and JavaScript.

If you want to know how this watch works, you can watch the live demo below. Of course, I have put the necessary source code there, if you want you can copy those and use your own work. 

See the Pen
javascript clock 3 by shantanu jana (@fghty)
on CodePen.

But if you are a beginner and want to know how I made this watch then you must follow the tutorial below.

How to make an analog clock in javascript

First of all, you have to create an HTML and CSS file before extending this watch. Combine HTML files and CSS files. You can also add CSS code to the HTML file using the style tag (<style>css code</style>).

Step 1: Create the basic structure of the clock

 I have created the basic structure using the following HTML codes. The following HTML has been used to make this watch, basically the dial you see in the watch.

 <div id=’clock’>
   <!–Clock No(1,2,….,12)–>
   
<!–clock hands()–>
  </div>
  

Step 2: Design the background using CSS code

The following CSS code has been used to design the above HTML code. added background color and added 1 border to the watch. In this case, I have used white color in the watch so that the hands and numbers can be seen more clearly. 

You can see the image below where I have shown what kind of result can be obtained by adding these two programming codes.

body {
  background: rgb(13, 186, 230);
  color: #333;
  margin-top: 50px;
  font-family: Helvetica, sans-serif;
}
#clock {
  background: #fff;
  border: 15px solid #222;
  border-radius: 50%;
  position: relative;
  width: 320px;
  height: 320px;
  margin: auto;
}
Design the background using CSS code



Step 3: Make numbers 1 to 12 in the analog clock

Above we have basically designed the background of the watch. In the meantime, we will add numbers from 1 to 12. Basically, we depend on these numbers to see the time. 

In this case, I have added the number from 1 to 12 through the HTML programming code. I wrote the numbers using the span tag (<span>1</span> ,…., <span>12</span>).

  <ul class=’hours’>
      <li>
        <span>
          1
        </span>
      </li>
      <li>
        <span>
          2
        </span>
      </li>
      <li>
        <span>
          3
        </span>
      </li>
      <li>
        <span>
          4
        </span>
      </li>
      <li>
        <span>
          5
        </span>
      </li>
      <li>
        <span>
          6
        </span>
      </li>
      <li>
        <span>
          7
        </span>
      </li>
      <li>
        <span>
          8
        </span>
      </li>
      <li>
        <span>
          9
        </span>
      </li>
      <li>
        <span>
          10
        </span>
      </li>
      <li>
        <span>
          11
        </span>
      </li>
      <li>
        <span>
          12
        </span>
      </li>
    </ul>

Step 4: Sort the numbers according to specific distances

As you can see above, the HTML code writes those numbers. Now we will design these numbers and arrange them according to the specified distance. 

In many cases, many people use background images not to write these numbers. Here I have arranged these numbers beautifully using nth-of-type() CSS code.

Now the question that arises in your mind may be how I arranged these numbers according to a completely specific distance. Let me tell you – I used degrees to measure this distance. We all know that if we measure a circular circle in degrees, its magnitude is 360 degrees. If we divide that 360 by 12, the value of each angle will be 30.

 

This means that if you place each number at a distance of 30 degrees, the number twelve will find its place in the circular frame at a completely fixed distance. As you can see below, I used the number one number to rotate 30 degrees. We have used the same number two by rotating it at a 60-degree angle.

ul {
  list-style: none;
  top: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
}
li {
  position: absolute;
  transform-origin: 50% 100%;
  height: 160px;
}
.hours {
  left: 120px;
  font-size: 23.3333333333px;
  letter-spacing: -1.6px;
  line-height: 45px;
}
.hours li {
  width: 80px;
}
.hours span {
  display: block;
}
/* The following code has helped to design the 1 number*/
.hours li:nth-of-type(1) {
  transform: rotate(30deg);
}
.hours li:nth-of-type(1) span {
  transform: rotate(-30deg);
}
.hours li:nth-of-type(2) {
  transform: rotate(60deg);
}
.hours li:nth-of-type(2) span {
  transform: rotate(-60deg);
}
/* The following code has helped to design the 3 number*/
.hours li:nth-of-type(3) {
  transform: rotate(90deg);
}
.hours li:nth-of-type(3) span {
  transform: rotate(-90deg);
}
.hours li:nth-of-type(4) {
  transform: rotate(120deg);
}
.hours li:nth-of-type(4) span {
  transform: rotate(-120deg);
}
/* The following code has helped to design the 5 number*/
.hours li:nth-of-type(5) {
  transform: rotate(150deg);
}
.hours li:nth-of-type(5) span {
  transform: rotate(-150deg);
}
.hours li:nth-of-type(6) {
  transform: rotate(180deg);
}
.hours li:nth-of-type(6) span {
  transform: rotate(-180deg);
}
/* The following code has helped to design the 7 number*/
.hours li:nth-of-type(7) {
  transform: rotate(210deg);
}
.hours li:nth-of-type(7) span {
  transform: rotate(-210deg);
}
.hours li:nth-of-type(8) {
  transform: rotate(240deg);
}
.hours li:nth-of-type(8) span {
  transform: rotate(-240deg);
}
/* The following code has helped to design the 9 number*/
.hours li:nth-of-type(9) {
  transform: rotate(270deg);
}
.hours li:nth-of-type(9) span {
  transform: rotate(-270deg);
}
.hours li:nth-of-type(10) {
  transform: rotate(300deg);
}
.hours li:nth-of-type(10) span {
  transform: rotate(-300deg);
}
/* The following code has helped to design the 11 number*/
.hours li:nth-of-type(11) {
  transform: rotate(330deg);
}
.hours li:nth-of-type(11) span {
  transform: rotate(-330deg);
}
.hours li:nth-of-type(12) {
  transform: rotate(360deg);
}
.hours li:nth-of-type(12) span {
  transform: rotate(-360deg);
}
 
Design the background using CSS code



Step 5: Add three hands(hr, min, sec) to the clock

So far we have done the basic design of the watch. Now we will add three hands to the watch. When we set some time we set it on hours, minutes, and seconds. So in this case too I will use three hands which I have used to create the following HTML programming code.

 <div class=’hr-wrapper’>
      <div class=’hand hr’></div>
    </div>
    <div class=’min-wrapper’>
      <div class=’hand min’></div>
    </div>
    <div class=’sec-wrapper’>
      <div class=’hand sec’></div>
    </div>

Step 6: Arrange each hand beautifully

I have used the following CSS, I have only designed the hour hand. Now the question may be how these hands rotate at regular intervals.

 Let me tell you – If you look at your CSS, you will understand that the position of one side of these hands has been absolute. As a result, that direction remains completely stable and the other side continues to rotate.

.hr-wrapper, .min-wrapper, .sec-wrapper {
  position: absolute;
  width: 320px;
  height: 320px;
}
.hand {
  position: absolute;
  bottom: 50%;
  transform-origin: 50% 100%;
}
.hr {
  background: #222;
  left: 152px;
  width: 13px;
  height: 105px;
  border-radius: 10px;
  animation: rotateHand 43200s linear infinite;
}
.hr:after {
  background: #222;
  border-radius: 50%;
  content: “”;
  display: block;
  position: absolute;
  bottom: -8px;
  width: 13px;
  height: 16px;
}
Add hr hands to the clock

I have used the following codes to design the minute hand. Let me tell you one thing, if you want to increase the length and height of these cuts, you can do it very easily.



.min {
  background: #222;
  left: 155px;
  width: 9px;
  height: 125px;
  border-radius: 8px;
  animation: rotateHand 3600s linear infinite;
}
.min:after {
  background: #222;
  border-radius: 50%;
  content: “”;
  display: block;
  position: absolute;
  bottom: -8px;
  width: 9px;
  height: 16px;
}
Add min hands to the clock

I have used the following codes to design secondhand. You will notice that I have instructed here to rotate this second hand using @keyframes rotateHand.

.sec {
  background: #d00;
  left: 156.5px;
  width: 5px;
  height: 132px;
  border-radius: 8px;
  animation: rotateHand 60s linear infinite;
}
.sec:after {
  background: #d00;
  border-radius: 50%;
  content: “”;
  display: block;
  position: absolute;
  bottom: -3.5px;
  width: 5px;
  height: 7px;
}
@keyframes rotateHand {
  to {
    transform: rotate(1turn);
  }
}
Add sec hands to the clock

Step 7: Add JavaScript code to activate the clock

So far we have only designed it. Now we will activate this watch.

 // get current time
var dateInfo = new Date();
var hr = dateInfo.getHours() > 12 ? dateInfo.getHours() – 12 : dateInfo.getHours(),
  min = dateInfo.getMinutes(),
  sec = dateInfo.getSeconds(),
  milsec = dateInfo.getMilliseconds();

Step 8: Determine the rotation of the hands on the clock

I told you first that one part of the hands of the watch is fixed and the other part rotates. That rotation will be controlled by JavaScript programming code. 

As I said before, one hour is equal to 30 degrees (1 hr = 30°), one minute is equal to 6 degrees (1 min = 6°) and one second is equal to 6 degrees (1 sec = 6°).

 I will multiply the current clock by 30 by hand to rotate the cut of the clock according to the specified time. Let’s say we add minutes to it to keep the clock hand in a more neat and precise position.

For example, if I tell you that if the clock is currently at 03:30, then according to the rules, the hour hand will be at 90 degrees. In this case, the exact time will never be indicated. Because we know that in the case of 03:30 the hand of the clock will be somewhere between 3 and 4. That means the hand will be slightly higher than 90 degrees.

 To determine this thing, we have added the distance of the hour hand to the minute hand. So that the hands of the clock will be in the right place. I have instructed the same minute and second-hand rotation method.
If you know the basic JavaScript programming code then hopefully you can understand this design.



var hrAngle = hr * 30 + (min * 6 / 12),
    minAngle = min * 6 + (sec * 6 / 60),
    secAngle = sec * 6 + (milsec * 0.36 / 1000);
// set initial angles of the hand wrappers
function setAngle(wrapper, angle) {
  document.querySelector(“.” + wrapper).style.transform = “rotate(” + angle + “deg)”;
}
setAngle(“hr-wrapper”, hrAngle);
setAngle(“min-wrapper”, minAngle);
setAngle(“sec-wrapper”, secAngle);
Determine the rotation of the hands-on the clock

Hopefully from this article, you have learned how to make this clock using HTML, CSS, and JavaScript programming code. 

If you can understand how to make this watch from this article, please comment with your opinion. I have already made many more types of JavaScript clocks so you can see those designs if you want.

Download Code