Did project 2 and added README comments

Eric Lee · Eric Lee · commit 83835a5eeed1 · 2016-12-12T03:30:32.000-06:00
diff --git a/02 - JS + CSS Clock/README.md b/02 - JS + CSS Clock/README.md
@@ -0,0 +1,15 @@
+# Goal:
+
+Learn how to manipulate CSS aspects through JavaScript.
+
+## Summary:
+
+CSS elements can be edited through getting the class elements with querySelector and changing the style attribute of the class element. For us, we changed the style.transform attribute, calling the rotate method and changing each time-hand type with their respective degrees (hour, min, second). We made sure that this function change updated the hand's position would only be called at given interval times (every 1 sec). We set the transform origin to 100% so that the hand would rotate based on the x axis of the image. Additionally, we changed the transition for all hands to be 0.05 seconds so they would have a mini buffer time. Furthermore, we changeed the transition-timing-function based on the cubic-bezier function (changing some values through a simple interface.) so that the change would have some repetitive backwards/forwards motion to mimic the clock hands jittery movement.
+
+**NOTE:** There is a small choke for the program when the seconds reach 0. At that point, the second (and potentially minute/hour) hand causes a very abrupt stutter in the UI update. Can be fixed with some simple if/else statements 
+
+
+## One Thing Learned:
+
+JavaScript scripts are not to difficult to make, but creating the initial interface and design takes quite some time. Fortunately these proejcts come with sample code, making it easy just to focus on the back-end code.
+
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
@@ -61,12 +61,35 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.23, 1.92, 0.58, 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 minutes = now.getMinutes();
+      const minutesDegrees = (minutes * 6) + 90;
+      minHand.style.transform = `rotate(${minutesDegrees}deg)`;
+
+      const hours = now.getHours();
+      const hoursDegrees = (hours * 30) + 90;
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+
+    }
+
+    setInterval(setDate, 1000);
 
   </script>
 </body>
