Skip to content

Instantly share code, notes, and snippets.

@widada

widada/analog-clock.md

Last active July 5, 2023 08:45
Show Gist options
  • Save widada/bd30f0f95289332d2b9e57219c10328d to your computer and use it in GitHub Desktop.
Save widada/bd30f0f95289332d2b9e57219c10328d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. widada renamed this gist Jul 5, 2023. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion analog-clock → analog-clock.md
    View file
    Original file line number Diff line number Diff line change
    @@ -105,5 +105,4 @@

    </body>
    </html>

    ```
  2. widada revised this gist Jul 5, 2023. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions analog-clock
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    ```html
    <!DOCTYPE html>
    <html>
    <head>
    @@ -104,3 +105,5 @@

    </body>
    </html>

    ```
  3. widada created this gist Jul 5, 2023.
    106 changes: 106 additions & 0 deletions analog-clock
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,106 @@
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    height: 100vh;
    margin: 0;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #f0f0f0;
    font-family: 'Arial', sans-serif;
    text-align: center;
    }

    h1 {
    margin-bottom: 50px;
    }

    .quote {
    margin-top: 50px;
    font-style: italic;
    }

    .clock {
    width: 300px;
    height: 300px;
    border: 10px solid #f0f0f0;
    border-radius: 50%;
    position: relative;
    background: linear-gradient(to right, #ff5f6d, #ffc371);
    }

    .hand {
    width: 50%;
    background: black;
    position: absolute;
    bottom: 50%;
    transform-origin: bottom;
    transform: rotate(90deg);
    }

    .hour-hand {
    height: 6px;
    left: 25%;
    }

    .minute-hand {
    height: 4px;
    left: 25%;
    }

    .second-hand {
    height: 2px;
    left: 25%;
    }

    @media (max-width: 600px) {
    h1, .quote {
    font-size: 16px;
    }

    .clock {
    width: 200px;
    height: 200px;
    }
    }
    </style>
    </head>
    <body>

    <h1>Jam Analog</h1>

    <div class="clock">
    <div class="hand hour-hand"></div>
    <div class="hand minute-hand"></div>
    <div class="hand second-hand"></div>
    </div>

    <p class="quote">"Pendidikan adalah senjata paling kuat yang bisa digunakan untuk mengubah dunia." - Nelson Mandela</p>

    <script>
    function setDate() {
    const now = new Date();
    const seconds = now.getSeconds();
    const secondsDegrees = ((seconds / 60) * 360) + 90;
    document.querySelector('.second-hand').style.transform = `rotate(${secondsDegrees}deg)`;

    const mins = now.getMinutes();
    const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
    document.querySelector('.minute-hand').style.transform = `rotate(${minsDegrees}deg)`;

    const hour = now.getHours();
    const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
    document.querySelector('.hour-hand').style.transform = `rotate(${hourDegrees}deg)`;
    }

    setInterval(setDate, 1000);
    setDate();
    </script>

    </body>
    </html>