done clock completely

RomainRd · RomainRd · commit 4b64d1aa80fd · 2016-12-14T16:54:26.000+01:00
diff --git a/02 - JS + CSS Clock/Memo.txt b/02 - JS + CSS Clock/Memo.txt
@@ -0,0 +1,12 @@
+1. CSS clock hand:
+  - use transform: rotate() in CSS file
+  - by default the object rotates in the middle of the object: use transform-origin: x%; to move the origin on the X axis.
+  - set default rotate at 90° to have them face upwards
+  - set a transition for the animation not to be too hard: transition: all 0.5s;
+  - use a transition-timing-funtion to update the way the object moves
+
+2. JS:
+  - setInterval to set the interval at which the hands should move
+  - A function to set the date. You have a date you find which second you are currently in then you transform into degress (make sure that you add 90° to the total because we added that to the CSS)
+  - then you add the style transform rotate by variable degrees.
+
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
@@ -61,11 +61,44 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.1s;
+      transition-timing-function: cubic-bezier(0.54, 2.52, 0.96, 1.09);
     }
 
   </style>
 
   <script>
+      const sec_hand = document.querySelector('.second-hand')
+      const min_hand = document.querySelector('.min-hand')
+      const hour_hand = document.querySelector('.hour-hand')
+
+
+    function setDate() {
+      var date = new Date();
+
+      // SECONDS
+      var seconds = date.getSeconds();
+      var secondsDegrees = ((seconds / 60) * 360) + 90;
+      sec_hand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+      // MINUTES
+      var minutes = date.getMinutes();
+      var minutesDegrees = ((minutes / 60) * 360) + 90;
+      min_hand.style.transform = `rotate(${minutesDegrees}deg)`;
+
+      // HOUR
+      var hour = date.getHours();
+      var hourDegrees = ((hour / 24) * 360) + 90;
+      hour_hand.style.transform = `rotate(${hourDegrees}deg)`;
+
+    }
+
+
+
+    window.setInterval(setDate, 1000);
+
 
 
   </script>
