You are currently viewing Simple Analog Clock Using HTML , CSS And Javascript

Simple Analog Clock Using HTML , CSS And Javascript

Hello, coders👨‍💻!! In this article, I’ll show you how to create an analog clock with HTML, CSS, and JavaScript code. There are three hands to indicate the hours, minutes, and seconds, just like on a traditional analogue clock. I used a combination of symbols and numbers in this case (3,6,9,12). We have also added the date and day to our clock.

Simple Analog Clock Using HTML , CSS And Javascript

This clock was created entirely with CSS. There were no images used. We created it using the most fundamental concept, which is easily understood by beginners.

Analog Clock Using HTML , CSS And Javascript
Analog Clock Using HTML , CSS And Javascript

 

The page’s structure was created with HTML and CSS, and the automatic time is retrieved with JavaScript.

To watch the live preview look at the live demo below👇.

[Live Demo]

I’ve included a step-by-step breakdown of how I created this Javascript analogue clock. First, you must create an HTML and CSS file. Make sure to include your CSS file with the HTML file.

Step1: Creating The Basic Structure of Clock 

<div class="clock">


</div>

We added a block level element for our clock using the Basic tag. We will now style and add the basic structure to our clock using the (.clock) class.

.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);
}

We’ve added a background colour of “white” and set the width and height of our clock to “300px” of our clock. We also increased the border radius to 50% and added a solid 14px border in dark charcoal. The position is set to relative. In addition, we added some box shadow to our clock.

Analog Clock Using HTML , CSS And Javascript
Clock Structure

 

Step2: Adding the date and dialine to our 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>

The first two div tags are added here to display the date and day in our analog clock. We will add a dot at the centre of our clock using the (.dot) class div, which will hold the hands of our clock. We will now add the hour, minute, and second hands to our clock using the div tag to show the display in the clock. We will add the most important time using the span tag, such as (3,6,9,12). Finally, we’ll use the div tag to add the remaining dialog boxes.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Now we’ll use CSS to style our clock hands and dials.

  • We will add the width and height as “14px” using the dot class. We also changed the border-radius to “50%” and the background colour to “silvergrey.” The dot has been added to the centre, and position is defined as “absolute.” We’ve added the Z-index to make the dot stand out more, and we’ve also given it a box-shadow.
.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;
}
  • Using CSS, we will add the hour, minute, and second hands to our clock. We’ll add the hour hand with (.hour). The position has been added as “absolute” with a z index of “5”. We’ve added the width “4px” and height “65px” dimensions. We’ve given our hour hand a “black” background. Using the top property, we added and moved the hour hand “79px” from the top. Using the “transform origin” property, we will centre the hour hand, and we have set the top-left and top-right-radius to “50%” to give our clock hand a sharp pointer look.
  • We followed the same method to create our minute and second hand to our clock.
Simple Analog Clock Using HTML , CSS And Javascript
Analog Clock CSS
  • Now we’ll add the dialline and number to our clock. Using the span tag, we will add the common style to our clock number. The display is set to “inline-block” and the position is set to “absolute.” We will add black to our colour scheme. The font size of the clock number dials is “22px.” We also added the z-index to our numbers.
  • Now we will position our dial number using the defined classes (.h12,.h6,.h3,.h9).
  • The diallines will be added to our remaining dial. We defined the position as absolute. The width is “2px,” the height is “15px,” and the background colour is “charcol 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;
}

 

Simple Analog Clock Using HTML , CSS And Javascript
Simple Analog Clock

 

  • Now we will style our display to show the date and day of our clock.
.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;
}

Step3: Activating the time in analog clock using Javascript

We have completed the design of this analogue clock. This watch will now be implemented using JavaScript. we have  only used JavaScript to execute the hands on this watch. This design is simple enough for a beginner to grasp. I’ve provided a detailed explanation of why I used each code below.

Now using the variable diallines,ClockEl which will containt the value of dialline and clock which we have selected using the document.getElementByClassName() .

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

We will run a loop with the for loop, and if the value of I is less than or equal to 60, the dials will rotate 6 degrees every second.

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

Now we’ll create a function called clock ().

We’ll add an array of weekdays inside the function.

new Date() creates an instance of the Date class from which we can obtain information such as the current date, hours, minutes, seconds, and so on.

Now we will be creating different variable  which will store the value of hour, minutes, second . which we will fetch using methods like .getHours() , .getMinutes() etc.

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(),

Now we’ll add rotation to our clock hands, as well as some variables that hold the value of our date, day, and other html elements using their classes, and we’ll get the value of day from the getday() method.

Finally, we will call our function with a specified interval using the setInterval method; in this case, we have specified an interval of 100 milliseconds.

We now have the functionality to our analog clock. Let’s watch a quick video to see how it works.

Final Output Of Analog Clock: 

 

Live Preview Analog Clock using javascript poject


Now We have Successfully created our Analog Clock using javascript poject.  We hope you understood the project , If you any doub’t feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Code By : @Vasko Petrov

Leave a Reply