clock.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anolog Clock</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
            font-family: 'Courier New', Courier, monospace;
        }

        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #212121;
        }

        .contanier{
            position: relative;
        }

        .clock{
            width: 320px;
            height: 300px;
            border-radius: 50%;
            background-color:rgb(67, 63, 63);
            border: 2px solid gray;
            box-shadow: 0px 0px 30px rgba(0,0,0.9);
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .clock span{
            position: absolute;
            transform: rotate(calc(30deg * var(--i)));
            inset: 12px;
            text-align: center;
        }

        .clock span b{
            transform: rotate(calc(-30deg * var(--i)));
            display: inline-block;
            font-size: 20px;
        }

        .clock::before{
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: grey;
            z-index: 2;
        }

        .handh{
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .handm{
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .hands{
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        .handm i{
            position: absolute;
            background-color: var(--clr);
            width:4.5px;
            height: 60px;
            border-radius: 8px;
        }

        .handh i{
            position: absolute;
            background-color: var(--clr);
            width:4.5px;
            height: 93px;
            border-radius: 8px;
        }

        .hands i{
            position: absolute;
            background-color: var(--clr);
            width: 4px;
            height: 80px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="contanier">
        <div class="clock">
            <div id="hour" style="--clr: red" class="handh"><i></i></div>
            <div id="min" style="--clr: blue" class="handm"><i></i></div>            
            <div id="sec" style="--clr: green" class="hands"><i></i></div>
            <span style="--i:1"><b>1</b></span>
            <span style="--i:2"><b>2</b></span>
            <span style="--i:3"><b>3</b></span>
            <span style="--i:4"><b>4</b></span>
            <span style="--i:5"><b>5</b></span>
            <span style="--i:6"><b>6</b></span>
            <span style="--i:7"><b>7</b></span>
            <span style="--i:8"><b>8</b></span>
            <span style="--i:9"><b>9</b></span>
            <span style="--i:10"><b>10</b></span>
            <span style="--i:11"><b>11</b></span>
            <span style="--i:12"><b>12</b></span>
        </div>
    </div>
</body>
<script>
    
    function displayTime(){
        const date = new Date();
        const h = date.getHours();
        const m = date.getMinutes();
        const s = date.getSeconds();
        
        const hr  = document.getElementById('hour');
        const min = document.getElementById('min');
        const sec = document.getElementById('sec');

        const hRotation = (h + m / 60 ) * 360 / 12;
        const mRotation = (m + s /60 ) * 360 /60;
        const sRotation = s * 360 / 60;

        hr.style.transform =  `rotate(${hRotation}deg)`;
        min.style.transform = `rotate(${mRotation}deg)`;
        sec.style.transform = `rotate(${sRotation}deg)`;
    }

    setInterval(displayTime,1000);
    displayTime();

</script>
</html>
HTMLify

Share this file:

Comments
