Simple Analog Clock Using Html, CSS & Javascript
Tags: html, css, javascript, webdev
Published: 2021-07-15 15:30:09

In this article I am going to show you how to [make an analog clock using HTML CSS and JavaScript](https://www.foolishdeveloper.com/2021/06/make-analog-clock-using-html-css-and.html) code. I have already designed many types of analog clocks. This watch is made in the shape of a dark neumorphism design. Like a typical analog kite there are three hands to indicate hours minutes and seconds. Here I have used symbols instead of numbers from 1 to 12.

You can watch the live demo to see how this analog clock works. Since I made it with the help of neumorphism design, I have used the same color in the background of the clock and in the background of the page. First of all I made a box with `30 rem width and 30 rem height` on a web page. `Border-radius 50%` has been used to round this box. I have used box-shadow here to implement neumorphism design.

✅ **Watch Live Preview** 👉👉  [JavaScript Analog Clock](https://www.foolishdeveloper.com/2021/07/simple-analog-clock-html-css-javascript.html) 

 It's very simple and in general I made. Below I show the complete step-by-step how I made this [**Javascript analog clock**](https://www.foolishdeveloper.com/2021/06/make-analog-clock-using-html-css-and.html). First of all you create an HTML and CSS file. Be sure to attach your CSS file to the html file.

### Step 1: Create the basic design of the clock

I have made the background of this analog clock using the following HTML and CSS code. I created the structure of this clock using the code `<div class = "clock"></div>`. First of all I gave the background color of the page (`background: # 282828;`) in the CSS code.

```html
<div class="clock">
    
</div>

```

```css

 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;

}
 
```
![Create the basic design of the clock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqqxk7q0gyzvja421ap4.jpg)

### Step 2: Draw two colorful lines in the clock

I used the following HTML and CSS codes to make the symbol that I used to indicate the time in this watch. First of all I made two lines using the following codes. I put those two lines at a `90 degree angle` to each other. I used `background: # 282828` to make the lines brighter.

```html
<div class="outer-clock-face">
          
</div>
```

```css
.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%;
}
```
 
![Draw two colorful lines in the clock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4es1mm19z01zdm84s6q.jpg)

### Step 3: Make four more lines

I have made four more lines in this clock using the following HTML and CSS code. Using CSS code, I have angled those lines as needed. I have used white color, you can use any other color.


```html
<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>
```



```css
.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)
}
```

![Make four more lines](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnrofck204zr0mi4qh1e.jpg)

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

I made a circle in the middle of this clock. This circle is at the junction of pre-drawn lines. The resulting lines have become symbols.

```html
          <div class="inner-clock-face">
            
          </div>
```

```css
.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;
}
```
![Draw a circle in the middle of the analog clock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lwlujn4dpd7h7s40jju.jpg)

### Step 5: Make three hands in the clock

Like a normal analog clock, I have used three hands to indicate hours, minutes and seconds. I created and designed those hands using the HTML and CSS code below.

```html
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
```

```css
.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;
}
```
![Make three hands in the clock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8fgzjxewpdmb3f3t8dg.jpg)

### Step 6: Activate the analog clock with JavaScript code

We have done the work of designing this analog watch. Now we will implement this watch with the help of JavaScript. In this case I did not use any plugin or JavaScript library. I have only executed the hands in this watch using JavaScript. Even if you are a beginner, you can understand this design. Below each code I have given a complete explanation of why I used that code.

We are going to grab the reference for the following using `querySelector()`:
     ➤ .second-hand
     ➤.min-hand
     ➤.hour-hand

```javascript
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
```
```javascript
 function setDate() {
  const now = new Date();
```
 ➤ `new Date()` creates an instance of the Date class from which we can get all kinds of things like current date, hours, minutes, seconds, etc.

```javascript
  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
```
 ➤ I have stored in `'secondsDegrees'` how the second hand will rotate.
 ➤ Then I use `rotate(${secondsDegrees}deg)` to rotate the hand.
 ➤ I divided by 60 because 1 minute is equal to 60 seconds.
 ➤ I multiplied by 360 because a circle is formed by 360 degrees.


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

 ➤ I have stored in `'minsDegrees'` how to turn the hand of the minute.
 ➤ Then use`rotate(${minsDegrees}deg)` to rotate the hand.
 ➤ I divided by 60 because 1 hour is equal to 60 minutes.
 ➤ Added second hand position with minutes. Because the minute's hand is in the right place depending on the second.

```javascript
  const hour = now.getHours();
  const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

```
```javascript
setInterval(setDate, 1000);

setDate();
```
 ➤ We need to call this `rotate()` function every 1 second (`1000 milliseconds`). 

![Activate the analog clock with JavaScript code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anwr9ff5iakor16a3zis.jpg)

### Final Javascript code

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

 function setDate() {
  const now = new Date();

  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();
```

Hopefully from this tutorial you have learned [how to make this analog clock](https://www.foolishdeveloper.com/2021/07/simple-analog-clock-html-css-javascript.html). If you have any questions you can ask me by commenting. Of course you can let me know if I did something wrong.

**Related Post:**
1. [CSS Particle Backgrounds](https://groundtutorial.com/css-particle-backgrounds/) 
2. [CSS Snow Effects](https://groundtutorial.com/css-snow-effects/)
3. [CSS Fire Animation](https://groundtutorial.com/css-fire-animation/)
4. [CSS Floating Action Button](https://groundtutorial.com/floating-action-button-css/)



You can visit my blog for more tutorials like this.
https://groundtutorial.com/