two complete

Author: hadaswerman

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

@@ -61,12 +61,40 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      /* transition-timing-function: cubic-bezier: adjusts appearance of motion*/
+      transition-timing-function: cubic-bezier(.1, 2.7, .58, 1);
     }
 
   </style>
 
   <script>
 
+  const secondHand = document.querySelector('.second-hand');
+  const minuteHand = document.querySelector('.min-hand');
+  const hourHand = document.querySelector('.hour-hand');
+
+    function setDate() {
+      console.log('Hi');
+      const now = new Date();
+      const seconds = now.getSeconds();
+      const minutes = now.getMinutes();
+      const hours = now.getHours();
+
+      console.log(seconds);
+      const secondsDegs = ((seconds / 60) * 360) + 90;
+      secondHand.style.transform = `rotate(${secondsDegs}deg`;
+
+      const minsDegs = ((minutes / 60) *360) + 90;
+      minuteHand.style.transform = `rotate(${minsDegs}deg`;
+
+      const hoursDegs = ((hours / 12) *360) + 90;
+      hourHand.style.transform = `rotate(${hoursDegs}deg`;
+    }
+
+    setInterval(setDate,1000);
 
   </script>
 </body>