<body id="bg-color">
            <!-- <h1 class="title">Tick Tock</h1>  -->

            <div class="clock">
                <div class="hand hour" data-hour></div>
                <div class="hand minute" data-minute></div>
                <div class="hand second" data-second></div>
                <div class="number number1">1</div>
                <div class="number number2">2</div>
                <div class="number number3">3</div>
                <div class="number number4">4</div>
                <div class="number number5">5</div>
                <div class="number number6">6</div>
                <div class="number number7">7</div>
                <div class="number number8">8</div>
                <div class="number number9">9</div>
                <div class="number number10">10</div>
                <div class="number number11">11</div>
                <div class="number number12">12</div>
            </div>

            <script src="clock.js"></script>     
        </body>

*, *::after, *::before {
    box-sizing: border-box;
    font-family: helvetica neue;
    font-size: 12px;
    font-style: bold;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.clock {
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 50%;
    border: 3px solid purple;
    position: relative;
}

.clock .number {
    --rotation: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transform: rotate(var(--rotation));
    font-size: 1.5rem;
    padding: 5px 5px;
}

.clock .number1 { --rotation: 30deg; }
.clock .number2 { --rotation: 60deg; }
.clock .number3 { --rotation: 90deg; }
.clock .number4 { --rotation: 120deg; }
.clock .number5 { --rotation: 150deg; }
.clock .number6 { --rotation: 180deg; }
.clock .number7 { --rotation: 210deg; }
.clock .number8 { --rotation: 240deg; }
.clock .number9 { --rotation: 270deg; }
.clock .number10 { --rotation: 300deg; }
.clock .number11 { --rotation: 330deg; }

.clock .hand {
    --rotation: 0;
    position: absolute;
    bottom: 50%;
    left: 50%;
    background-color: black;
    border: 1px solid white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform-origin: bottom;
    z-index: 10;
    transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}
.clock::after {
    content: '';
    position: absolute;
    background-color:rgb(245, 236, 107);
    z-index: 11;
    width: 15px;
    height: 15px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.clock .second {
    width: 3px;
    height: 45%;
    background-color:hotpink;
}

.clock .minute {
    width: 7px;
    height: 40%;
    background-color:rgb(107, 218, 216);
}

.clock .hour {
    width: 10px;
    height: 35%;
    background-color: rgb(175, 48, 201);
}

const dataSecond = document.querySelector('[data-second]');
const dataMinute = document.querySelector('[data-minute]');
const dataHour = document.querySelector('[data-hour]');
let colorArray = ["#71b8bd", "#6ebcbe", "#6cc1be", "#6bc5be", "#6ac9bd", "#6bcdbb", "#6dd1b9", "#71d5b6", "#75d8b2", "#7bdcae", "#82dfa9", "#8ae2a4", "#93e59f", "#9de899", "#a7ea93", "#b2ed8d", "#beef87", "#caf082", "#d6f27c", "#e3f377"]

function setClock() {
    let currentDate = new Date()
    let secondsRatio = currentDate.getSeconds() / 60;
    let minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
    let hoursRatio = (minutesRatio + currentDate.getHours()) / 12;
    setRotation(dataSecond, secondsRatio)
    setRotation(dataMinute, minutesRatio)
    setRotation(dataHour, hoursRatio)
}

function setRotation(element, rotationRatio) {
    element.style.setProperty('--rotation', rotationRatio * 360)
}

function changeColor() {
  let randomColor = colorArray[Math.floor(Math.random() * colorArray.length)];
    document.getElementById('bg-color').style.backgroundColor = randomColor;
}

setInterval(function(){
    setClock(), changeColor()
}, 1000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.