Add js script for animating clock hands

hypatiah · hypatiah · commit 8cd9f4efdb23 · 2016-12-11T16:22:12.000-08:00
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
@@ -11,8 +11,7 @@
       <div class="clock-face">
         <div class="hand hour-hand"></div>
         <div class="hand min-hand"></div>
-        <div class="hand second-hand" style="
-        transform: rotate(-50deg);"></div>
+        <div class="hand second-hand"></div>
       </div>
     </div>
 
@@ -76,6 +75,27 @@
   </style>
 
   <script>
+    const secondHand = document.querySelector('.second-hand');
+    const hourHand = document.querySelector('.hour-hand');
+    const minuteHand = document.querySelector('.min-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 minsDegrees = ((mins / 60) * 360) + 90;
+      minuteHand.style.transform = `rotate(${minsDegrees}deg)`
+
+      const hour = now.getHours();
+      const hourDegrees = ((hour / 12) * 360) + 90;
+      hourHand.style.transform = `rotate(${hourDegrees}deg)`
+      console.log(seconds);
+    }
+
+    setInterval(setDate, 1000);
   </script>
 </body>
 </html>
