failed attempt at making the 360 rotation look smooth

Author: Madison Dickson

02 - JS and CSS Clock/index-START.html

@@ -9,9 +9,9 @@
 
     <div class="clock">
       <div class="clock-face">
-        <div class="hand hour-hand"></div>
-        <div class="hand min-hand"></div>
-        <div class="hand second-hand"></div>
+        <div class="hand hour-hand no-transition"></div>
+        <div class="hand min-hand no-transition"></div>
+        <div class="hand second-hand" style=""></div>
       </div>
     </div>
 
@@ -62,12 +62,57 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform:rotate(90deg);
+      transition: all 0.5s;
+      transition-timing-function: cubic-bezier(0.04, 1.77, 0.32, 0.94);
+    }
+    hand.no-transition {
+      transition:none;
     }
-
   </style>
 
   <script>
+    const hourhand = document.querySelector('.hour-hand')
+    const minutehand = document.querySelector('.min-hand')
+    const secondhand = document.querySelector('.second-hand')
+
+    function setHands(h,m,s){
+      secondhand.style.transform = `rotate(${s/60 * 360 + 90}deg)`;
+      minutehand.style.transform = `rotate(${m/60 * 360 + 90}deg)`;
+      hourhand.style.transform = `rotate(${h/12 * 360 + 90}deg)`;
+
+      console.log(s, `rotate(${s/60 * 360 + 90}deg)`)
+    }
+
+    function setTime() {
+      const now = new Date();
+      let seconds = now.getSeconds();
+      const minutes = now.getMinutes();
+      const hours = now.getHours();
+
+      //fix the weird slide transition from 359degrees -> 0degrees
+      if(seconds === 0){
+        seconds = 60;
+      }
+
+      setHands(hours,minutes,seconds)
+
+      //tried, doesn't work.. still animates
+      if(seconds === 60){
+        console.log('add class')
+        secondhand.style.transition = 'all 0s';
+        setHands(hours,minutes,0)
+        console.log('remove class')
+        secondhand.style.transition = 'all 0.5s';
+        // window.setTimeout( () => {
+        //   // secondhand.classList.remove('no-transition')
+        // }, 0)
+      }
+    }
 
+    setTime();
+    window.setInterval(setTime, 1000);
 
   </script>
 </body>