
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS + CSS Clock</title>
  <link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>


    <div class="clock">
      <div class="clock-face">
        <div class="circle"></div>
        <div class="hand hour-hand"></div>
        <div class="hand min-hand"></div>
        <div class="hand second-hand"></div>
      </div>
    </div>


    <style>
      html {
        background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
        background-size: cover;
        font-family: 'helvetica neue';
        text-align: center;
        font-size: 10px;
      }
  
      body {
        margin: 0;
        font-size: 2rem;
        display: flex;
        flex: 1;
        min-height: 100vh;
        align-items: center;
      }
  
      .clock {
        aspect-ratio: 1/1;
        width: min(90%, 30rem);
        border: 0.5rem solid white;
        border-radius: 50%;
        margin: 50px auto;
        position: relative;
        padding: 2rem;
        box-shadow:
          0 0 0 4px rgba(0,0,0,0.1),
          inset 0 0 0 3px #EFEFEF,
          inset 0 0 10px black,
          0 0 10px rgba(0,0,0,0.2);
      }
  
      .clock-face {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .circle{
        aspect-ratio: 1/1;
        height: 10px;
        top: 50%;
        left: calc(50% - 5px);
        position: absolute;
        border-radius: 50%;
        background: black;
        transform-origin: 100%;
        z-index: 2;
      }
  
      .hand {
        width: 50%;
        height: 6px;
        background: hsla(0, 0%, 10%, 0.8);
        position: absolute;
        top: calc(50% + 3px);
        transform-origin: 100%;
        transform: rotate(90deg);
        transition: all 0.05s;
        transition-timing-function: ease-in;
      }

      .min-hand{
        background: hsla(0, 0%, 40%, 0.8);
      }
      .second-hand{
        background: hsla(0, 0%, 80%, 0.8);
      }
  </style>

  <script>

    const secondHand = document.querySelector('.second-hand');
    const minsHand = document.querySelector('.min-hand');
    const hourHand = document.querySelector('.hour-hand');

    

    setInterval(function() {

      const time = new Date();

      const milliseconds = time.getMilliseconds();

      const seconds = time.getSeconds();
      const secondsDegrees = ((seconds + (milliseconds / 1000)) / 60) * 360 + 90;
      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

      const mins = time.getMinutes();
      const minsDegrees = (((mins + ((seconds + (milliseconds / 1000)) / 60)) / 60) * 360) + 90;
      minsHand.style.transform = `rotate(${minsDegrees}deg)`;

      const hour = time.getHours();
      const hourDegrees = (((hour + ((mins + ((seconds + (milliseconds / 1000)) / 60)) / 60)) / 12) * 360) + 90;
      hourHand.style.transform = `rotate(${hourDegrees}deg)`;

    }, 80);


  </script>
</body>
</html>