JS30 wesbos#2

Author: Mateusz Kaczmarek

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

@@ -25,6 +25,12 @@
       font-size: 10px;
     }
 
+    span {
+      color: red;
+      text-transform: uppercase;
+      font-size: 10px;
+    }
+
     body {
       font-size: 2rem;
       display:flex;
@@ -61,13 +67,35 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.2s cubic-bezier(0.56, 1.71, 0.25, 1)
     }
 
   </style>
 
   <script>
+  const secondHand = document.querySelector('.second-hand');
+  const minHand = document.querySelector('.min-hand');
+  const hourHand = document.querySelector('.hour-hand');
+
+  function setDate() {
+    const now = new Date();
+
+    const seconds = now.getSeconds();    
+    const secondsDegrees = (seconds / 60) * 360 + 90;
+    secondHand.style.transform = "rotate(" + secondsDegrees + "deg)"; 
+
+    const mins = now.getMinutes();    
+    const minDegrees = (mins / 60) * 360 + 90;
+    minHand.style.transform = "rotate(" + minDegrees + "deg)"; 
 
+    const hours = now.getHours();    
+    const hoursDegrees = (hours / 12) * 360 + 90;
+    hourHand.style.transform = "rotate(" + hoursDegrees + "deg)";
+  }
 
+  setInterval(setDate, 1000)
   </script>
 </body>
 </html>