title: javascript analog clock hands not moving
body: <p>So I am making a javascript analog clock
  I seem to have a code that isn't giving me an error but I cant seem to get the clock to work,
  I tried to debug it and I thing the issue is that I cant get the hands to rotate.</p>
  <p>here is my code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setInterval(setClock, 1000);
  
  const hourHand = document.querySelector("[data-hour-hand]"); 
  const minuteHand = document.querySelector("[data-minute-hand]"); 
  const secondHand = document.querySelector("[data-second-hand]"); 
  
  function setClock(){
      const currentDate = new Date();
      const secondsRatio = currentDate.getSeconds() / 60;
      const minuteRatio = (secondsRatio + currentDate.getMinutes()) / 60;
      const hourRatio = (minuteRatio + currentDate.getHours()) / 12;
  
      setRotation(secondHand , secondsRatio);
      setRotation(minuteHand , minuteRatio);
      setRotation(hourHand , hourRatio);
  
      // console.log(hourRatio); 
  }
  
  function setRotation(element, rotationRation){
      element.style.setProperty('--rotation', 'rotationRation * 360'); 
  }
  
  setClock();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*, *::after, *::before {
      box-sizing: border-box;
  }
  body{
      background: linear-gradient(to right, hsl(200, 100%, 50%), hsl(170, 100%, 50%));
      display: flex;
      justify-content: center;
      align-items: center ;
      min-height: 100vh;
      overflow: hidden ;
  }
  
  .clock{
      background-color: rgba(255, 255, 255, .8);
      height: 300px;
      width: 300px;
      border-radius: 50%;
      border: 2px solid black;
      position: relative;
  }
  .clock::after{
      content: '';
      position: absolute;
      height: 15px;
      width: 15px;
      background: black;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 13;
      border-radius: 50%;
  }
  .clock .number{
      --rotation: 0;
      position: absolute;
      width: 100%;
      height: 100%; 
      text-align: center;
      transform: rotate(var(--rotation));
  }
  
  .clock .number1{ --rotation: 30deg;}
  .clock .number2{ --rotation: 60deg;}
  .clock .number3{ --rotation: 90deg;}
  .clock .number4{ --rotation: 120deg;}
  .clock .number5{ --rotation: 150deg;}
  .clock .number6{ --rotation: 180deg;}
  .clock .number7{ --rotation: 210deg;}
  .clock .number8{ --rotation: 240deg;}
  .clock .number9{ --rotation: 270deg;}
  .clock .number10{ --rotation: 300deg;}
  .clock .number11{ --rotation: 330deg;}
  
  .clock .hand{
      --rotation: 0;
      position: absolute;
      bottom: 50%;
      left: 50%;
      width: 10px;
      height: 40%;
      background: black;
      border: 1px solid white;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      transform: translateX(-50%) rotate(calc(var(--rotation)));
      /* transform: ;  */
      transform-origin: bottom;
      z-index: 10;
  }
  
  .clock .hand.hour{
      width: 10px;
      height: 30%;
      background: black;
  }
  .clock .hand.minute{
      width: 7px;
      height: 40%;
      background: black;
  }
  .clock .hand.second{
      width: 3px;
      height: 42%;
      background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;clock analog&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="style.css"&gt;
          &lt;script src="script.js" async defer&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!--[if lt IE 7]&gt;
              &lt;p class="browsehappy"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="#"&gt;upgrade your browser&lt;/a&gt; to improve your experience.&lt;/p&gt;
          &lt;![endif]--&gt;
          &lt;div class="clock"&gt;
              &lt;div class="hand hour" data-hour-hand&gt;&lt;/div&gt;
              &lt;div class="hand minute" data-minute-hand&gt;&lt;/div&gt;
              &lt;div class="hand second" data-second-hand&gt;&lt;/div&gt;
              &lt;div class="number number1"&gt;1&lt;/div&gt;
              &lt;div class="number number2"&gt;2&lt;/div&gt;
              &lt;div class="number number3"&gt;3&lt;/div&gt;
              &lt;div class="number number4"&gt;4&lt;/div&gt;
              &lt;div class="number number5"&gt;5&lt;/div&gt;
              &lt;div class="number number6"&gt;6&lt;/div&gt;
              &lt;div class="number number7"&gt;7&lt;/div&gt;
              &lt;div class="number number8"&gt;8&lt;/div&gt;
              &lt;div class="number number9"&gt;9&lt;/div&gt;
              &lt;div class="number number10"&gt;10&lt;/div&gt;
              &lt;div class="number number11"&gt;11&lt;/div&gt;
              &lt;div class="number number12"&gt;12&lt;/div&gt;
  
          &lt;/div&gt;
          
      &lt;/body&gt;
  &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>
  <p>using console.log(), i found that the setClock is running as per the interval time set, I am also getting values using Date(), and the formula applied to get the deg of turn is also working, I suspect the issue to be with the setRotation() but I cant figure out what the issue is.</p>