Completed exercise 02

Author: cwkosman

02 - JS + CSS Clock/index.html

@@ -61,36 +61,36 @@
 background:black;
 position: absolute;
 top:50%;
-transform-origin:100%;
+transform-origin:right; /*same as transform-origin:100%. Use values over 100% to transfrom about a point off the object*/
 transform:rotate(90deg);
 transition: all 0.05s;
-transition-timing-function:cubic-bezier(0.1,2.7,0.58,1);
+transition-timing-function:cubic-bezier(0,2.7,0.58,1);
  }
-</style>
 
-<script>
-constsecondHand=document.querySelector('.second-hand');
-constminsHand=document.querySelector('.min-hand');
-consthourHand=document.querySelector('.hour-hand');
+</style>
 
-functionsetDate(){
-constnow=newDate();
+<script>
 
-constseconds=now.getSeconds();
-constsecondsDegrees=((seconds/60)*360)+90;
-secondHand.style.transform=`rotate(${secondsDegrees}deg)`;
+constsecondHand=document.querySelector('.second-hand');
+constminuteHand=document.querySelector('.min-hand');
+consthourHand=document.querySelector('.hour-hand');
 
-constmins=now.getMinutes();
-constminsDegrees=((mins/60)*360)+90;
-minsHand.style.transform=`rotate(${minsDegrees}deg)`;
-
-consthour=now.getMinutes();
-consthourDegrees=((mins/12)*360)+90;
-hourHand.style.transform=`rotate(${hourDegrees}deg)`;
-}
+functionsetDate(){
+constnow=newDate();
+constseconds=now.getSeconds();
+constminutes=now.getMinutes();
+consthours=now.getHours();
+constsecondsDegrees=(seconds*6)+90/*(seconds/60 * 360) = seconds * 6)*/
+constminutesDegrees=(minutes*6)+90
+consthoursDegrees=(hours*30)+90/*360/12 = 30 */
+secondHand.style.transform=`rotate(${secondsDegrees}deg)`;
+minuteHand.style.transform=`rotate(${minutesDegrees}deg)`;
+hourHand.style.transform=`rotate(${hoursDegrees}deg)`;
+}
 
-setInterval(setDate,1000);
+setInterval(setDate,1000);/*built in function that runs a function at a given period
+ document.querySelector(`.second-hand');*/
 
-</script>
+</script>
 </body>
 </html>