JSS clock with glitch done

Vikas-KM · Vikas-KM · commit 91203f2a191d · 2018-12-10T21:40:41.000+05:30
diff --git a/02 - JS and CSS Clock/JS_CSS_Clock.js b/02 - JS and CSS Clock/JS_CSS_Clock.js
@@ -0,0 +1,26 @@
+const secondHand = document.querySelector('.second-hand');
+const hourHand = document.querySelector('.hour-hand');
+const minsHand = document.querySelector('.min-hand');
+const glitch = document.querySelector('.fast');
+function setDate(){
+    const date = new Date();
+    const hour = date.getHours();
+    const mins = date.getMinutes();
+    const secs = date.getSeconds();
+    const secsDeg = ((secs/60)*360)+90; //90 added for the offset we did initially
+    const minsDeg = ((mins/60)*360)+90;
+    const hoursDeg = ((hour/12)*360)+90;
+
+    if(secs === 0)
+        secondHand.classList.add('fast');
+    if(secs === 1)
+        secondHand.classList.remove('fast');
+    secondHand.style.transform = `rotate(${secsDeg}deg)`;
+    minsHand.style.transform = `rotate(${minsDeg}deg)`;
+    hourHand.style.transform = `rotate(${hoursDeg}deg)`;
+
+    console.log(`hour is ${hour}, mins is ${mins} and secs is ${secs}`);
+}
+
+let myDate = setInterval(setDate,1000);
+
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
@@ -11,7 +11,7 @@
       <div class="clock-face">
         <div class="hand hour-hand"></div>
         <div class="hand min-hand"></div>
-        <div class="hand second-hand"></div>
+        <div class="hand second-hand fast"></div>
       </div>
     </div>
 
@@ -62,13 +62,30 @@
       background: black;
       position: absolute;
       top: 50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.1,2.7,0.58,1);
     }
 
-  </style>
+    .hour-hand{
+      background-color:red;
+    }
+
+    .min-hand{
+      background-color:blue;
+    }
 
-  <script>
+    .second-hand{
+      background-color:green;
+    }
+
+    .fast{
+      transition: all 0s;
+    }
 
+  </style>
 
-  </script>
+  <script src="JS_CSS_Clock.js">  </script>
 </body>
 </html>
diff --git a/02 - JS and CSS Clock/learning.txt b/02 - JS and CSS Clock/learning.txt
@@ -0,0 +1,4 @@
+Things learnt while solving this project
+1: transform-origin
+2: background cover
+3: transition
