codemediaweb.com

Code Media

hire me

How to Make an Analog Clock in JavaScript (2021 Update)

by
How to Make an Analog Clock in JavaScript

If you want to make Analog Clock using JavaScript then this tutorial will help you completely. Here I have shared a step-by-step tutorial on how to make JavaScript analog clock.

Analog clocks we all use at home. But if you want you can make it digitally and only with the help of HTML CSS and JavaScript. This type of project will help you a lot if you are a beginner. The time shown here is not the time on any server. It will take time for your device then update that time every second.

JavaScript’s New Date () method is used to capture time from the device. Then setInterval is used to update it every second. In addition, depending on some basic calculations, the hands of hours, minutes, and seconds keep rotating.

See the Pen analog clock 7 by Foolish Developer (@fghty) on CodePen.

Here time has to be converted into degrees and these hands will continue to rotate according to that degree. Earlier I shared with you the design of making many types of analog clocks. However, it is built in a completely modern and simple way. 

Here I have not used the number 1 to 12. Instead, we have created a few symbols that will work for this number. But these signs I have created in a completely new strategy that will surely surprise you.

Analog Clock using HTML CSS and Javascript

Here first I created its basic design using HTML and CSS. Then I implemented it using JavaScript. If you only want to get the source code then you can use the download button at the bottom of the article. However, I urge you to follow the tutorials below. 

This tutorial will help you to know the complete step-by-step how I made it (analog clock using HTML CSS and javascript). With each step, I have shown the possible results with pictures. Every beginner can easily understand.

1. Basic structure of an analog clock

The basic structure of the analog clock has been created using the following HTML and CSS code.

<div class=”clock”>
</div>

The following CSS helped to design the webpage. Here I have used light white as the background color of the web page.

 html {
  background: #dde1e7;
  text-align: center;
  font-size: 10px;
}
body {
  margin: 0;
  font-size: 2rem;
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
}

Now I have designed this simple analog clock. Here the width of the clock: 30rem, height: 30rem, and border-radius helped to make it round. 

A white border of 8 px has been used to enhance the beauty. Since the background color of the clock and the background color of the webpage are used the same, the box-shadow has helped to understand the size of the clock.

.clock {
  width: 30rem;
  height: 30rem;
  border: 7px solid #dde1e7;
  box-shadow: -4px -4px 10px rgba(67,67,67,0.4),
                inset 4px 4px 10px rgba(0,0,0,0.23),
                inset -4px -4px 10px rgba(67,67,67,0.23),
                4px 4px 10px rgba(0,0,0,0.3);
  border-radius: 50%;
  margin: 50px auto;
  position: relative;
  padding: 2rem;
}
Basic structure of an analog clock

2. Create two colorful lines

Using the following codes, we have created two lines in this analog clock vertically. These two lines will basically help to better understand the time. The CSS code ‘:: before’ and ‘:: after’ first helped to create these two lines.

<div class=”outer-clock-face”>
</div>
.outer-clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: #dde1e7;
  overflow: hidden;
}
.outer-clock-face::after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg)
}
.outer-clock-face::before,
.outer-clock-face::after,
.outer-clock-face .marking{
  content: ”;
  position: absolute;
  width: 5px;
  height: 100%;
  background: #103cee;
  z-index: 0;
  left: 49%;
}
Create two colorful lines

3. Create four more colorful lines

Now we have created four more lines in the JavaScript analog clock. As a result, there are currently a total of 6 lines in the clock, and each of these lines is at a 30-degree angle to each other.

<div class=”marking marking-one”></div>
<div class=”marking marking-two”></div>
<div class=”marking marking-three”></div>
<div class=”marking marking-four”></div>
.outer-clock-face .marking {
  background: #929497;
  width: 3px;
}
.outer-clock-face .marking.marking-one {
  transform: rotate(30deg)
}
.outer-clock-face .marking.marking-two {
  transform: rotate(60deg)
}
.outer-clock-face .marking.marking-three {
  transform: rotate(120deg)
}
.outer-clock-face .marking.marking-four {
  transform: rotate(150deg)
}
Create four more colorful lines

4. Draw a circle in the center of the clock

Now I have created a circle in this analog clock. This circle will be in the middle of the clock. As a result, some of the lines are covered and some parts of the last can be seen. Now some parts in this last will help to work as numbers from 1 to 12.

<div class=”inner-clock-face”>
</div>
.inner-clock-face {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background: #dde1e7;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  z-index: 1;
}
Draw a circle in the center of the clock

Now, using the CSS below, I have made a small point in the very middle of this clock. The hands will continue to rotate around this point. Border-radius has been used to make this point width: 16px, height: 16px and make it completely round.

.inner-clock-face::before {
  content: ”;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 18px;
  margin-left: -9px;
  margin-top: -6px;
  background: #4d4b63;
  z-index: 11;
}
small point in the very middle of this clock

5. Make 3 hands in analog clock

Now is the time to create three hands that will help to point out the times. These hands will indicate the hours, minutes, and seconds, respectively. I have designed each hand differently. Here you can change the colors according to your needs.

<div class=”hand hour-hand”></div>
<div class=”hand min-hand”></div>
<div class=”hand second-hand”></div>
.hand {
  width: 50%;
  right: 50%;
  height: 6px;
  background: #61afff;
  position: absolute;
  top: 50%;
  border-radius: 6px;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hand.hour-hand {
  width: 30%;
  z-index: 3;
}
.hand.min-hand {
  height: 3px;
  z-index: 10;
  width: 40%;
}
.hand.second-hand {
  background: #e9910c;
  width: 45%;
  height: 2px;
}
Make 3 hands in analog clock

6. Activate the analog clock using JavaScript

Above we have completely designed this analog clock. Now is the time to implement it using some JavaScript. As I said before, the hands in this clock keep rotating by converting time into degrees.

Below I have given all the JavaScript code together. I have given the necessary explanation for each line. Hopefully, those explanations will help you understand the JavaScript code.

//Determine the constant of the three hands of the clock. Because no html function is used directly in JavaScript.
const secondHand = document.querySelector(‘.second-hand’);
const minsHand = document.querySelector(‘.min-hand’);
const hourHand = document.querySelector(‘.hour-hand’);
//All of the following calculations are stored in the “setDate ()” function
function setDate() {
//The newdate method helps to take the current time from the device
  const now = new Date();
//With the help of ‘now.getSeconds’ to capture the time of ‘seconds’.
  const seconds = now.getSeconds();
//Time has been converted to degrees
  const secondsDegrees = ((seconds / 60) * 360) + 90;
//According to the above calculation, the hand must be rotated
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;
  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
//The entire system is now instructed to be updated every 1000 milliseconds or 1 second using setInterval
setInterval(setDate, 1000);
setDate();
analog clock using JavaScript

Hopefully from the tutorial above you have learned how to create this JavaScript analog clock. If you have any problems while creating this project (Create an Analog Clock using HTML, CSS, and JavaScript), please let me know in the comments.

Leave a comment