Bootstrap Snippet A Digital Analog Clock using HTML CSS & JAVASCRIPT - codewithtanveer

Tanveer Ahmad

 Bootstrap Snippet A Digital Analog Clock using HTML CSS & JAVASCRIPT |

 Analog Clock With jQuery And Bootstrap Example - codewithtanveer





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 - CodeWithTanveer</title>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <div class="container">
                <div class="clock">
                    <div style="--clr:#b40a21;--ht:120px;--wt:9px;" class="hand" id="hour"><i></i></div>
                    <div style="--clr:#088ed6;--ht:150px;--wt:7px;" class="hand" id="minute"><i></i></div>
                    <div style="--clr:#ffffff;--ht:170px;--wt:4px;" class="hand" id="second"><i></i></div>


                    <span style="--j:1"><b>1</b></span>
                    <span style="--j:2"><b>2</b></span>
                    <span style="--j:3"><b>3</b></span>
                    <span style="--j:4"><b>4</b></span>
                    <span style="--j:5"><b>5</b></span>
                    <span style="--j:6"><b>6</b></span>
                    <span style="--j:7"><b>7</b></span>
                    <span style="--j:8"><b>8</b></span>
                    <span style="--j:9"><b>9</b></span>
                    <span style="--j:10"><b>10</b></span>
                    <span style="--j:11"><b>11</b></span>
                    <span style="--j:12"><b>12</b></span>
                </div>
            </div>
            <script src="script.js"></script>
        </body>
        </html>


CSS

       
*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: sans-serif;
            color: #fff;
        }

        body{
            background: rgb(33, 34, 33);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container{
            background: rgba(255,255,255,0.05);
            border-radius: 50%;
            padding: 10px;
            outline: 10px solid #4111f0;
            outline-offset: 5px;
            box-shadow: 0 0 100px #4111f0;
        }

        .clock{
            position: relative;
            border-radius: 50%;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 20px solid #b79b06;
            outline: 10px solid rgb(206, 10, 10);
            outline-offset: -20px;
        }

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

        .clock span b{
            transform: rotate(calc(-30deg * var(--j)));
            display: inline-block;
            font-size: 24px;
            font-weight: 700;
            height: 50px;
            width: 50px;
        }

        .clock::before{
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #fff;
            z-index: 1;
        }

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

        .hand i{
            position: absolute;
            background: var(--clr);
            height: var(--ht);
            width: var(--wt);
            z-index: 0;
        }

JAVASCRIPT

       
let hour = document.getElementById('hour')
        let minute = document.getElementById('minute')
        let second = document.getElementById('second')

        function displayTime(){
            let date = new Date();

            let hh = date.getHours();
            let mm = date.getMinutes();
            let ss = date.getSeconds();

            let hRotation = 30* hh + mm/2 + ss/120;
            let mRotation = 6 * mm + ss/10
            let sRotation = 6 * ss;

            hour.style.transform = `rotate(${hRotation}deg)`
            minute.style.transform = `rotate(${mRotation}deg)`
            second.style.transform = `rotate(${sRotation}deg)`
        }

        setInterval(displayTime,1000)


Instagram : CodeWithTanveer

GitHub :  CodeWithTanveer

Youtube : CodeWithTanveer

















































0 Comments