Clock Analog

Hay semuanya, saat ini saya sedang memberikan tutorial tentang cara membuat jam analog dan digital menggunakan HTML, CSS, dan JavaScript. Dalam tutorial ini, saya akan membahas langkah-langkah dasar pembuatan website, mulai dari struktur halaman, desain tampilan. Tutorial ini ditujukan bagi pemula maupun yang ingin memperdalam pemahaman tentang pengembangan web secara praktis.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Clock Analog | Webdevelop</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100vh;
                gap: 20px;
            }
            .clock {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 300px;
                height: 300px;
                border-radius: 100%;
                border: 4px solid black;
                outline: 4px solid whitesmoke;
                box-shadow: 10px 10px 15px black, 10px 10px 15px black inset;
            }
            .center {
                z-index: 1;
                width: 20px;
                height: 20px;
                border-radius: 100%;
                background: black;
                border: 4px solid brown;
            }
            .obj {
                position: absolute;
                transform-origin: bottom;
                width: 10px;
                height: 100px;
                background: black;
                border-radius: 10px 10px 0 0;
            }
            .seconds {
                width: 2px;
                background: brown;
                box-shadow: 5px 5px 5px black;
            }
            .hours {
                height: 50px;
            }
            .minutes {
                height: 80px;
            }
            span {
                position: absolute;
                font-size: 30px;
                font-weight: bold;
            }
            span:nth-child(1) {top: 20px;}
            span:nth-child(2) {right: 20px;}
            span:nth-child(3) {bottom: 20px;}
            span:nth-child(4) {left: 20px;}
        </style>
    </head>
    <body>
    	<div class="clock">
            <span>12</span>
            <span>3</span>
            <span>6</span>
            <span>9</span>
            <div class="center"></div>
            <div class="obj hours"></div>
            <div class="obj minutes"></div>
            <div class="obj seconds"></div>
        </div>
        <h1>Clock Analog | Webdevelop</h1>
        <div class="clock-digital"></div>
        <script>
            function clock(){
                const now = new Date();

let hours = now.getHours();
                let minutes = now.getMinutes();
                let seconds = now.getSeconds();

// CLOCK DIGITAL
                document.getElementsByClassName("clock-digital")[0].innerHTML = `${hours} : ${minutes} : ${seconds}`;

var dplHours = document.getElementsByClassName("hours")[0];
                var dplMinutes = document.getElementsByClassName("minutes")[0];
                var dplSeconds = document.getElementsByClassName("seconds")[0];

dplHours.style.transform = `translateY(-25px) rotate(${(hours % 12) * 30 + minutes * 0.5}deg)`;
                dplMinutes.style.transform = `translateY(-40px) rotate(${minutes * 6}deg)`;
                dplSeconds.style.transform = `translateY(-50px) rotate(${seconds * 6}deg)`;
            }
            setInterval(clock, 1000);
        </script>
    </body>
    </html>

Cari Blog Ini

Webdevelop | Source Code

Clock Analog

Komentar

Posting Komentar

Postingan populer dari blog ini

Simple Portofolio

Clock Digital