lesson

tkumpanenko · tkumpanenko · commit 96dd664115b9 · 2016-12-09T21:34:04.000+02:00
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
@@ -61,13 +61,40 @@
       background:black;
       position: absolute;
       top:50%;
+      transition-duration: 0.5s;
+      transition-property: transform;
+      transition-rotate: rotate(0deg);
+      transition-timing-function: linear;
+      transform-origin: 100%;
     }
 
   </style>
 
   <script>
+  const hourHand = document.querySelector('.hour-hand');
+  const minHand = document.querySelector('.min-hand');
+  const secondHand = document.querySelector('.second-hand');
 
+  function setTime(){
+    const date = new Date();
+    let seconds = date.getSeconds();
+    let minutes = date.getMinutes();
+    let hours = date.getHours();
+    
+    if (seconds / 60 == 1){
+      secondHand.style.transition = 'none';
+    }else{
+      secondHand.style = '';
+    }  
 
+
+    hourHand.style.transform = `rotate(${Number(hours*360/12 + 90)}deg)`;
+    minHand.style.transform = `rotate(${Number(minutes*360/60 + 90)}deg)`;
+    secondHand.style.transform = `rotate(${Number(seconds*360/60 + 90)}deg)`;
+    console.log(hours,':',minutes,':',seconds);
+  }
+
+  setInterval(setTime, 1000);
   </script>
 </body>
 </html>
