Analog Clock Made in HTML, CSS & JavaScript

HTML CSS JS Tidy

<div class="wrapper">
    <div class="content">
        <div class="title"> Analog Clock Made in HTML, CSS & JavaScript</div>
        <div class="clock">
            <div class="clock-body">
                <div class="twelve">12</div>
                <div class="three">3</div>
                <div class="six">6</div>
                <div class="nine">9</div>
                <div class="hand">
                    <div class="second-hand" id="second-hand">
                        <div class="start"></div>
                        <div class="end"></div>
                    </div>
                    <div class="minute-hand" id="minute-hand">
                        <div class="start"></div>
                        <div class="end"></div>
                    </div>
                    <div class="hour-hand" id="hour-hand">
                        <div class="start"></div>
                        <div class="end"></div>
                    </div>
                    <div class="center-point"></div>
                </div>
            </div>
        </div>
    </div>
</div>

HTML CSS JS Tidy

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  background-color: #ccc;
  margin: 0;
  background-size: 20px 20px;
}

a {
  text-decoration: none;
}

.title {
  text-align: center;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 25px;
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clock {
  position: relative;
  width: 280px;
  height: 280px;
  border: 6px solid rgb(240, 236, 236);
  border-radius: 50%;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5215686275);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.clock-body {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  box-shadow: inset 0px 1px 5px rgba(44, 44, 44, 0.3215686275);
  background-image: radial-gradient(circle, rgb(246 194 194 / 46%), rgb(226 196 196 / 37%))
;
}
 .hand {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hand .end {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.557);
}
.hand .second-hand {
  width: 180px;
  height: 180px;
  background-color: rgba(255, 0, 0, 0);
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  transform: rotate(-90deg);
}
.hand .second-hand .end,
.hand .second-hand .start {
  height: 1px;
  width: 60%;
}
.hand .second-hand .start {
  background-color: transparent;
}
.hand .second-hand .end {
  background-color: red;
}
.hand .minute-hand {
  width: 150px;
  height: 3px;
  background-color: rgba(255, 0, 0, 0);
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transform: rotate(-90deg);
}
.hand .minute-hand .end,
.hand .minute-hand .start {
  height: 1px;
  width: 50%;
}
.hand .minute-hand .start {
  background-color: transparent;
}
.hand .minute-hand .end {
  background-color: #000;
  border: 1px solid #000;
  border-radius: 0 50% 50% 0;
}
.hand .hour-hand {
  width: 100px;
  height: 5px;
  background-color: rgba(255, 0, 0, 0);
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-90deg);
}
.hand .hour-hand .end,
.hand .hour-hand .start {
  height: 1px;
  width: 60%;
}
.hand .hour-hand .start {
  background-color: transparent;
}
.hand .hour-hand .end {
  background-color: #000;
  border: 2px solid #000;
  border-radius: 20% 50% 50% 20%;
}

.twelve,
.three,
.six,
.nine {
  position: absolute;
  color: #464545;
  font-size: 16px;
  font-weight: bolder;
  font-family: cursive;
}

.twelve {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.twelve::before {
  width: 1px;
  background-color: #343333;
  height: 5px;
  content: " ";
  position: absolute;
  left: 50%;
  right: 50%;
  margin-top: -6px;
}

.three {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.three::before {
  right: 0;
  width: 5px;
  background-color: #343333;
  height: 1px;
  content: " ";
  position: absolute;
  top: 50%;
  bottom: 50%;
  margin-right: -6px;
}

.six {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.six::after {
  width: 1px;
  background-color: #343333;
  height: 5px;
  content: " ";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  margin-bottom: -6px;
}

.nine {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.nine::before {
  width: 5px;
  background-color: #343333;
  height: 1px;
  content: " ";
  position: absolute;
  top: 50%;
  bottom: 50%;
  margin-left: -6px;
}

.center-point {
  width: 4px;
  height: 4px;
  background-color: #5e2900;
  border-radius: 50%;
  position: relative;
  z-index: 4;
  border: 1px solid #c10000;
}
.center-point .second::after {
  position: absolute;
  display: block;
  width: 80px;
  height: 1px;
  content: " ";
  background-color: #e5e5e5;
}

HTML CSS JS Tidy

"use strict";
class Holorgue {
    constructor() {
        this.start_degre = -90;
        this.seconde_hand_id = "second-hand";
        this.minute_hand_id = "minute-hand";
        this.hour_hand_id = "hour-hand";
    }
    run() {
        this.initClockHand(this.seconde_hand_id, 6);
        this.initClockHand(this.minute_hand_id, 6);
        this.initClockHand(this.hour_hand_id, 30);
        setInterval(() => {
            this.updateBySecond();
        }, 1000);
    }
    initClockHand(handId, degreeIncrement) {
        const hand = document.getElementById(handId);
        if (hand) {
            let currentDegree = this.start_degre;
            if (handId === this.seconde_hand_id) {
                currentDegree += new Date().getSeconds() * degreeIncrement;
            } else if (handId === this.minute_hand_id) {
                currentDegree += new Date().getMinutes() * degreeIncrement;
            } else if (handId === this.hour_hand_id) {
                const currentDate = new Date();
                currentDegree += (currentDate.getHours() % 12) * degreeIncrement + currentDate.getMinutes() / 2;
            }
            hand.style.transform = `rotate(${currentDegree}deg)`;
        }
    }
    updateBySecond() {
        const secondHand = document.getElementById(this.seconde_hand_id);
        const minuteHand = document.getElementById(this.minute_hand_id);
        const hourHand = document.getElementById(this.hour_hand_id);
        if (secondHand && minuteHand && hourHand) {
            const now = new Date();
            let seconds = now.getSeconds();
            let minutes = now.getMinutes();
            let hours = now.getHours() % 12;
            let secondHandDegree = this.start_degre + seconds * 6;
            let minuteHandDegree = this.start_degre + minutes * 6;
            let hourHandDegree = this.start_degre + hours * 30 + minutes / 2;
            secondHand.style.transform = `rotate(${secondHandDegree}deg)`;
            minuteHand.style.transform = `rotate(${minuteHandDegree}deg)`;
            hourHand.style.transform = `rotate(${hourHandDegree}deg)`;
        }
    }
}
new Holorgue().run();

Analog Clock Made in HTML, CSS & JavaScript

>_Console

Leave a Comment Cancel reply

>_Console

File Setting

Code Playground Setting

Add External Stylesheets and Script

Leave a Comment Cancel reply