completed lesson 02 clock

Author: LindsayElia

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

@@ -61,13 +61,49 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;  /* I like .5s if the hand is not moving as far each time */
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); /* There is a curve picker in Chrome dev tools. Sweet! */
     }
 
   </style>
 
   <script>
+    const secondHand = document.querySelector(".second-hand");
+    const minuteHand = document.querySelector(".min-hand");
+    const hourHand = document.querySelector(".hour-hand");
 
+    function setDate(){
+      const currentTime = new Date();
+      
+      const seconds = currentTime.getSeconds();
+      const secondsDegrees = (((seconds/60) * 360) + 90); // convert from minute time (60s) 
+      // to base ten (over 100), then multiple by degrees in a circle
+      // and add 90 to account for the rotation we gave it by default in the CSS
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+      
+      const minutes = currentTime.getMinutes();
+      const minutesDegrees = (((minutes/60) * 360) + 90); // hand moves same distance as
+      // for seconds, seconds and minutes share same stops on a clock
+      minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
 
+      const hours = currentTime.getHours();
+      const hoursDegrees = (((hours/12) * 360) + 90); // 12 stops on a clock for hours
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+    }
+
+
+    setInterval(setDate, 1000);
+
+
+  /* 
+  new things I learned:
+      - The CSS transform property. With it, elements can be translated, rotated, scaled, and skewed.
+      - There is a cubic bezier editor in Chrome dev tools that lets you pick just the right curve. Add the transition-timing-function property to an element and then click on the small purple icon next to the value.
+      - Practiced using some of the prototype methods for Date(), such as getSeconds().
+      - Had to think about how a clock works and do a bit of math. 
+  */
   </script>
 </body>
 </html>