Analog Clock using HTML, CSS and JavaScript

Analog Clock using HTML, CSS and JavaScript

Hey programmers, in this article you will learn how to create an Analog Clock using HTML, CSS and Javascript.An Analog Clock is a a clock in which the hours, minutes, and sometimes seconds are indicated by hands on a dial. To check time you have to interpret it by calculating the minute, hour and second hands as per their respective position.

Creating an Analog Clock using HTML, CSS and Javascript

Let us now start creating our Analog Clock using HTML, CSS and Javascript. We will be creating three files (HTML file, a CSS file, and JavaScript File).

Step 1: Adding basic HTML

Creating a basic structure of analog clock using HTML ā€“ Hypertext Markup Language. It is a simple file having the basic structure of the Analog clock webpage and classes for the clockā€™s elements.

Here is the code for you to directly use it. The code will be explained below for you to understand how to create the Analog Clock.

<html>
<head>

    <link rel="stylesheet" href="acStyle.css">

</head>
<body>
    <div class="clock">
        <div>
          <div class="info date"></div>
          <div class="info day"></div>
        </div>
        <div class="dot"></div>
        <div>
          <div class="hour-hand"></div>
          <div class="minute-hand"></div>
          <div class="second-hand"></div>
        </div>
        <div>
          <span class="h3">3</span>
          <span class="h6">6</span>
          <span class="h9">9</span>
          <span class="h12">12</span>
        </div>
        <div class="diallines"></div>
      </div>
      <script src="ac.js"></script>
</body>
</html>

Let us start by understand the <head> section of our HTML code:

  • Inside the head section we have linked our CSS stylesheet. You can name the stylesheet according to you.
Now letā€™s start creating the basic structure of Analog Clock inside the <body>.
  • We will start by creating a division using the div tag and give a class=”clock” to it.
  • Now nesting a div tag in the main div where we will nest 2 more div with classes : class=””info date” and class=”info day”. These tags will allow us to display the date and day inside our analog clock.
  • Create another div with class=”dot” with div tags in it with
    class=”hour-hand”, class=”minute-hand”, class=”second-hand”. These div tags will help us to style the clock hands and also to give logic to them.
  • Now we will create a div again which will display the numbers inside the analog clock. Using span tags we will display numbers for the time interpretation – 3, 6, 9, 12.
  • We will now, at the end of our body, link our javascript file using the script tag.

Restaurant Website Using HTML And CSS With Source Code

Step 2: Add CSS to style the basic structure of Analog Clock

.clock {
  background: #ececec;
  width: 300px;
  height: 300px;
  margin: 8% auto 0;
  border-radius: 50%;
  border: 14px solid #333;
  position: relative;
  box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8);
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ccc;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  z-index: 10;
  box-shadow: 0 2px 4px -1px black;
}

.hour-hand {
  position: absolute;
  z-index: 5;
  width: 4px;
  height: 65px;
  background: #333;
  top: 79px;
  transform-origin: 50% 72px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.minute-hand {
  position: absolute;
  z-index: 6;
  width: 4px;
  height: 100px;
  background: #666;
  top: 46px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 105px;
}

.second-hand {
  position: absolute;
  z-index: 7;
  width: 2px;
  height: 120px;
  background: gold;
  top: 26px;
  lefT: 50%;
  margin-left: -1px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 125px;
}

span {
  display: inline-block;
  position: absolute;
  color: #333;
  font-size: 22px;
  font-family: 'Poiret One';
  font-weight: 700;
  z-index: 4;
}

.h12 {
  top: 30px;
  left: 50%;
  margin-left: -9px;
}
.h3 {
  top: 140px;
  right: 30px;
}
.h6 {
  bottom: 30px;
  left: 50%;
  margin-left: -5px;
}
.h9 {
  left: 32px;
  top: 140px;
}

.diallines {
  position: absolute;
  z-index: 2;
  width: 2px;
  height: 15px;
  background: #666;
  left: 50%;
  margin-left: -1px;
  transform-origin: 50% 150px;
}
.diallines:nth-of-type(5n) {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 25px;
  background: #666;
  left: 50%;
  margin-left: -1px;
  transform-origin: 50% 150px;
}

.info {
  position: absolute;
  width: 120px;
  height: 20px;
  border-radius: 7px;
  background: #ccc;
  text-align: center;
  line-height: 20px;
  color: #000;
  font-size: 11px;
  top: 200px;
  left: 50%;
  margin-left: -60px;
  font-family: "Poiret One";
  font-weight: 700;
  z-index: 3;
  letter-spacing: 3px;
  margin-left: -60px;
  left: 50%;
}
.date {
    top: 80px;
  }
.day {
    top: 200px;
}

Let us now understand how we will style Analog Clock:

  • We will start by styling the basic clock structure by using the dot selectorĀ  We well set the following properties : background: #ececec; width: 300px; height: 300px; margin: 8% auto 0; border-radius: 50%;Ā  Ā  Ā border: 14px solid #333; position: relative; box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8);
  • Now we will style the html elements with the class=”dot”, targeting them by the dot selector. We set the following properties – width: 14px; height: 14px; border-radius: 50%; background: #ccc; top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; z-index: 10; box-shadow: 0 2px 4px -1px black;
  • After the clock structure, we will now style the hands of analog clock. Starting with the hour hand, we already created a div with the class=”hour-hand” in html file, we will set the following properties – position: absolute; z-index: 5; width: 4px; height: 65px; background: #333; top: 79px; transform-origin: 50% 72px; left: 50%; margin-left: -2px; border-top-left-radius: 50%; border-top-right-radius: 50%;
  • Similarly we will style the minute hand and second hand by changing values of few properties used to style the hour hand to get the desired output.

Responsive Gym Website Using HTML ,CSS & JavaScript

OUTPUT till now:-

Analog Clock using HTML, CSS and JavaScript

Now we will style the numbers to represent the time :

code:-

span {
    display: inline-block;
    position: absolute;
    color: #333;
    font-size: 22px;
    font-family: 'Poiret One';
    font-weight: 700;
    z-index: 4;
  }
  
  .h12 {
    top: 30px;
    left: 50%;
    margin-left: -9px;
  }
  .h3 {
    top: 140px;
    right: 30px;
  }
  .h6 {
    bottom: 30px;
    left: 50%;
    margin-left: -5px;
  }
  .h9 {
    left: 32px;
    top: 140px;
  }
  • Starting with the span tag, targeting it as it contains the heading tags containing numbers to represent the time – 3, 6, 9, 12. We will set the display: inline-block, setting position as absolute, and rest of the styling – color: #333; font-size: 22px; font-family: ‘Poiret One’; font-weight: 700; z-index: 4;
  • We will style the numbers using their classes, targeting them by the dot selector and give set the styles as mentioned in the code to get the desired output.

Analog Clock using HTML, CSS and JavaScript

Now we will set styles for the display of date and day inside the analog clock:

code:-

.diallines {
   position: absolute;
   z-index: 2;
   width: 2px;
   height: 15px;
   background: #666;
   left: 50%;
   margin-left: -1px;
   transform-origin: 50% 150px;
 }
 .diallines:nth-of-type(5n) {
   position: absolute;
   z-index: 2;
   width: 4px;
   height: 25px;
   background: #666;
   left: 50%;
   margin-left: -1px;
   transform-origin: 50% 150px;
 }
 
 .info {
   position: absolute;
   width: 120px;
   height: 20px;
   border-radius: 7px;
   background: #ccc;
   text-align: center;
   line-height: 20px;
   color: #000;
   font-size: 11px;
   top: 200px;
   left: 50%;
   margin-left: -60px;
   font-family: "Poiret One";
   font-weight: 700;
   z-index: 3;
   letter-spacing: 3px;
   margin-left: -60px;
   left: 50%;
 }
 .date {
     top: 80px;
   }
 .day {
     top: 200px;
 }
  • The HTML element with the class=”diallines” will have the following styling- position: absolute; z-index: 2; width: 2px; height: 15px; background: #666; left: 50%; margin-left: -1px; transform-origin: 50% 150px;
  • Again targeting the html element with class=”diallines” and associating :nth-of-type(n) selector which matches every element that is the nth child, of the same type (tag name), of its parent. For this the CSS declarations are as follows – position: absolute; z-index: 2; width: 4px; height: 25px; background: #666; left: 50%; margin-left: -1px; transform-origin: 50% 150px;
  • Using dot selector and targeting the class info used to display the date and day inside the analog clock, we will style it using the properties mentioned in the code. For the class date and day we will use the CSS top property which participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.

Create A Travel Website Using HTML & CSS

OUTPUT of HTML and CSS combined :

Analog Clock using HTML, CSS and JavaScript

Step 3:- Adding JavaScript to provide the logic behind the rotation of the hands in Analog Clock.

Here is the code, you can copy it to directly use it in your IDE for this project.

var dialLines = document.getElementsByClassName('diallines');
var clockEl = document.getElementsByClassName('clock')[0];

for (var i = 1; i < 60; i++) {
  clockEl.innerHTML += "<div class='diallines'></div>";
  dialLines[i].style.transform = "rotate(" + 6 * i + "deg)";
}

function clock() {
  var weekday = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
      ],
      d = new Date(),
      h = d.getHours(),
      m = d.getMinutes(),
      s = d.getSeconds(),
      date = d.getDate(),
      month = d.getMonth() + 1,
      year = d.getFullYear(),
           
      hDeg = h * 30 + m * (360/720),
      mDeg = m * 6 + s * (360/3600),
      sDeg = s * 6,
      
      hEl = document.querySelector('.hour-hand'),
      mEl = document.querySelector('.minute-hand'),
      sEl = document.querySelector('.second-hand'),
      dateEl = document.querySelector('.date'),
      dayEl = document.querySelector('.day');
  
      var day = weekday[d.getDay()];
  
  if(month < 9) {
    month = "0" + month;
  }
  
  hEl.style.transform = "rotate("+hDeg+"deg)";
  mEl.style.transform = "rotate("+mDeg+"deg)";
  sEl.style.transform = "rotate("+sDeg+"deg)";
  dateEl.innerHTML = date+"/"+month+"/"+year;
  dayEl.innerHTML = day;
}

setInterval("clock()", 100);

Let us understand the Javascript code:-

  • Create a variable called dialLines giving it value document.getElementsByClassName(‘diallines’); Ā returns a collection of elements with a specified class name(s).
  • Another variable to called clockEl to return element by classname clock-document.getElementsByClassName(‘clock’)[0];
  • Now we will create a for loop and give it functionality for the rotation of the seconds hand.
  • We will create a function called clock() and create a variable in it called weekday which represents an array for the days of the week.
  • We will now declare a variable d to create a new Date() function.
  • Declaring variables h, m, s, date, month, year and associating predefined functions to them-
  • h = d.getHours(), m = d.getMinutes(), s = d.getSeconds(), date = d.getDate(), month = d.getMonth() + 1, year = d.getFullYear().
  • Now we will set degrees for the rotation of hour, minutes and seconds hand.
  • Using query selectors we will return classes for the clock hands, date and day displayed in the analog clock.
  • Now we will give the functionality for the month for the date to be displayed.
  • At last we will use the transform styling property for the rotation for the hands of the clock which will showcase the time in the clock.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

OUTPUT: With HTML, CSS and Javascript combined-

Analog Clock using HTML, CSS and JavaScript

I hope that this article was helpful and you understood the whole project. Now letā€™s take a look at theĀ Live Preview of the Analog Clock;-

Now we have successfully created our Analog Clock usingĀ HTML, CSS & JavaScript.Ā You can use this project directly by copying it into yourĀ  IDE. We hope you understood the project, If you have any doubts feel free to comment!!

Happy exploring and learning !!

Follow:Ā codeWithRandom

Code by: Vasko Petrov

Written by:Ā Cheshta Vohra

ADVERTISEMENT



Leave a Reply