In this article, I’ll show you how to make an analog clock using HTML, CSS, and JavaScript. I have designed many types of analog clocks. The watch is shaped in a dark neo-simulacra style. Like a typical simulated kite, three hands are used to indicate hours, minutes and seconds. Here, I’m using symbols instead of numbers 1 through 12. You can see the demo to see how the analog clock works. I designed it with the help of the Neumorphism (new pseudo-object style), and I used the same color in the background of the clock and the background of the page. First, I made a box with 30 REM Width and 30 REM height on the web page. Surround the box with border-radius 50%. I used box-shadow here to implement Neumorphism’s design.

Overall it’s pretty simple. Below I will show you the full steps of how I made an analog clock. First, you need to create an HTML and CSS file. Please link your CSS file to an HTML file.

Step 1: Create the basic structure of the clock

I used the following HTML and CSS code to create the background for this analog clock. I use code to create the clock structure

. Background: # 282828; Gives the background color of the page in the CSS code. 

<div class="clock">

</div>
Copy the code
html {
  background: # 282828;
  text-align: center;
  font-size: 10px;
}

body {
  margin: 0;
  font-size: 2rem;
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
}

.clock {
  width: 30rem;
  height: 30rem;
  position: relative;
  padding: 2rem;
  border: 7px solid # 282828;
  box-shadow: -4px -4px 10px rgba(67.67.67.0.5),
                inset 4px 4px 10px rgba(0.0.0.0.5),
                inset -4px -4px 10px rgba(67.67.67.0.5),
                4px 4px 10px rgba(0.0.0.0.3);
  border-radius: 50%;
  margin: 50px auto;
}
Copy the code

Step 2: Draw two colored lines on the clock

I used the following HTML and CSS code to create the symbol I used to indicate the time of the watch. First, I made two lines using the following code. I put these two rows at 90 degree Angle a to each other. Then set background: # 282828 to make the lines lighter.

<div class="outer-clock-face">

</div>
Copy the code
.outer-clock-face {
  position: relative;
  background: # 282828;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.outer-clock-face::after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg)}.outer-clock-face::after..outer-clock-face::before..outer-clock-face .marking{
  content: ' ';
  position: absolute;
  width: 5px;
  height: 100%;
  background: #1df52f;
  z-index: 0;
  left: 49%;
}
Copy the code

Step 3: Draw four more lines

I made four more lines in this clock using the following HTML and CSS code. Using CSS code, I adjusted the Angle of the lines as needed. I chose to use white, you can use any other color.

<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>
Copy the code
.outer-clock-face .marking {
  background: #bdbdcb;
  width: 3px;
}

.outer-clock-face .marking.marking-one {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  transform: rotate(30deg)}.outer-clock-face .marking.marking-two {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg)}.outer-clock-face .marking.marking-three {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  transform: rotate(120deg)}.outer-clock-face .marking.marking-four {
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  transform: rotate(150deg)}Copy the code

​

Step 4: Draw a circle in the middle of the analog clock

I made a circle in the middle of the clock. The circle is located at the intersection of the pre-drawn lines. The resulting line becomes a symbol.

<div class="inner-clock-face">

</div>
Copy the code
.inner-clock-face {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background: # 282828;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  z-index: 1;
}

.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;
}
Copy the code

Step 5: Draw three hands on the clock

Just like a normal analog clock, I used three hands to indicate hours, minutes, and seconds. These Pointers are created and designed using the FOLLOWING HTML and CSS code.

<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
Copy the code
.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: #ee791a;
  width: 45%;
  height: 2px;
}
Copy the code

Step 6: Activate the analog clock using JavaScript code

We’ve finished designing the analog watch. Now we will implement the watch with the help of JavaScript. I don’t use any plug-ins or JavaScript libraries. I used only native JavaScript to get the hands moving on this watch. Even if you are a beginner, you can understand this design. Below each code, I fully explain why I used it. We’ll use querySelector() to get the following elements:.second-hand ➤.min-hand ➤.hour-hand

const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
Copy the code
function setDate() {
  const now = new Date(a);Copy the code

➤ New Date() Creates an instance of the Date class from which we can retrieve various information, such as the current Date, hour, minute, second, and so on.

  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
Copy the code

➤ You have stored ‘secondsDegrees’, which determines how the second hand will rotate. ➤ Then use the rotate(${secondsDegrees}deg) to rotate the pointer. ➤ Divided by 60, because one minute equals 60 seconds. ➤ Times 360, because the circle is 360 degrees.

  const mins = now.getMinutes();
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60) *6) + 90;
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;
Copy the code

➤ You’ve stored ‘minsDegrees’, which determines how to rotate the minute hand. ➤ Then rotate the pointer with the rotate(${minsDegrees}deg). ➤ Divided by 60, because one hour equals 60 minutes. ➤ Added a second hand position with minutes. Because the minute hand is in the right position depending on the second.

  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + ((mins/60) *30) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
Copy the code
setInterval(setDate, 1000);

setDate();
Copy the code

We need rotate(), so we call this function every 1 second (1000 milliseconds).

The final Javascript code

const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

 function setDate() {
  const now = new Date(a);const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  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)`;
}

setInterval(setDate, 1000);

setDate();
Copy the code

Hopefully, you’ve learned how to make this analog clock from this tutorial. If you have any questions, let me know in the comments. Of course, if I’m doing something wrong, you can tell me.

Simple Analog Clock Using Html, CSS & Javascript

Reproduced with the permission of the original author.