KamCode: Analog Clock

KamCode

How to create Analog Clock using Html Css and Javascript

How to create Analog Clock using Html Css and Javascrip

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analog Clock</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="clock">
        <div class="aouther">Created by<br><span>KamCode</span></div>
        <div class="number" style="--n:1"><b>1</b></div>
        <div class="number" style="--n:2"><b>2</b></div>
        <div class="number" style="--n:3"><b>3</b></div>
        <div class="number" style="--n:4"><b>4</b></div>
        <div class="number" style="--n:5"><b>5</b></div>
        <div class="number" style="--n:6"><b>6</b></div>
        <div class="number" style="--n:7"><b>7</b></div>
        <div class="number" style="--n:8"><b>8</b></div>
        <div class="number" style="--n:9"><b>9</b></div>
        <div class="number" style="--n:10"><b>10</b></div>
        <div class="number" style="--n:11"><b>11</b></div>
        <div class="number" style="--n:12"><b>12</b></div>
        <div class="hour-hand" id="hour-hand"></div>
        <div class="minute-hand" id="minute-hand"></div>
        <div class="second-hand" id="second-hand"></div>
        <div class="center-dot"></div>
    </div>
    <!--digital clock -->
    <div class="digital-clock">
    
    </div>
<script src="script.js"></script>   
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: radial-gradient(circle, #05263c, #000);
}

.aouther{
    color: #000000;
    margin-bottom: 150px;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1.3;
    text-align: center;
}

.aouther span{
    font-size: 40px;
}

.clock{
    width: 500px;
    height: 500px;
    position: relative;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, #f029cf, #33ee42);
}

.clock::before {
    content: "";
    width: 525px;
    height: 525px;
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(to right, #05263c, #f841ef);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    z-index: -1;
}

.number{
    transform: rotate(calc(30deg * var(--n)));
    position: absolute;
    text-align: center;
    inset: 20px;
    font-size: 40px;
    color: #070707;
    text-shadow: 0 0 8px #bba90a;
}

.number b {
    transform: rotate(calc(-30deg * var(--n)));
    display: inline-block;
}

.center-dot{
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: gray;
    border-radius: 50%;
}

.hour-hand, .minute-hand, .second-hand{
    --rotate: 0;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%) rotate(calc(var(--rotate) * 1deg));
    transform-origin: bottom;
}

.hour-hand{
    width: 12px;
    height: 130px;
    background-color: #000; 
}

.minute-hand{
    width: 12px;
    height: 190px;
    background-color: #000; 
}

.second-hand{
    width: 6px;
    height: 210px;
    background-color: #000; 
}

.center-dot{
    background: linear-gradient(to top, #000000, #020202);
    z-index: 1;
}

/* digital clock */
.digital-clock{
    display: flex;
    gap: 20px;
    font-size: 40px;
    color: #ffea2e;
    align-items: center;
    justify-content: flex-start;
    padding-left: 40px;
    width: 330px;
    height: 80px;
    background-color: #0000006c;
    margin-top: 40px;
    border-radius: 20px;
}
.digital-clock span{
    font-size: 25px;
}

JAVASCRIPT

const secondHand = document.getElementById('second-hand');
const minuteHand = document.getElementById('minute-hand');
const hourHand = document.getElementById('hour-hand');

function clockTick(){
    const date = new Date();
    const seconds = date.getSeconds() / 60;
    const minutes = (seconds + date.getMinutes()) / 60;
    const hours = (minutes + date.getHours()) / 12; 

    rotateClockHand(secondHand, seconds);
    rotateClockHand(minuteHand, minutes);
    rotateClockHand(hourHand, hours);
}

function rotateClockHand(element, rotation){
    element.style.setProperty('--rotate', rotation * 360);

}

setInterval(clockTick, 1000);

function changeWatchColor(){
    let myClock = document.querySelector('.clock').style.backgroundColor = '#F138DB';
}
setInterval(changeWatchColor, 5000);

// digital clock

let digitalClock = document.querySelector('.digital-clock');

function digiClock(){
const date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let session = 'AM';
if(hours > 12 ){
    session = 'PM';
    hours = hours - 12
}

hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;

digitalClock.innerHTML = hours + ' : ' + minutes + ' : ' + seconds + ' ' + ' ' + session;
}
setInterval(digiClock, 1000);

let colors = ['#8C0606', '#213702', '#04562D', '#10DEDB', '#083E66', '#3254F4', '#040F43', '##7B45EB', '#000000', '#29096D', '#BD0FB7', '#FC0920'];
let index = 0;

function changeBgColor(){
    digitalClock.style.backgroundColor = colors[index];
    index = (index +1) % colors.length;
}
setInterval(changeBgColor, 5000);

Analog Clock

How to create Analog Clock using Html Css and Javascript

How to create Analog Clock using Html Css and Javascrip

KamCode | All right reserved.