cleaned up timer

Author: brandonjunus

02 - JS and CSS Clock/index-START.html

@@ -62,39 +62,30 @@
       background: black;
       position: absolute;
       top: 50%;
+      transform-origin: 100%;
+      transition: all 1s;
+      transition-timing-function: ease-in-out;
     }
 
   </style>
 
   <script>
-
-    let hours = new Date().getHours() % 12;
-    let hourHand = document.getElementsByClassName('hour-hand')[0];
-    hourHand.setAttribute('style', `transform: rotate(${90 + ((360 / 12) * hours)}deg); transform-origin: bottom right;`)
-    
-    let minutes = new Date().getMinutes();
-    let minutesHand = document.getElementsByClassName('min-hand')[0];
-    minutesHand.setAttribute('style', `transform: rotate(${90 + ((360 / (60)) * minutes)}deg); transform-origin: bottom right;`)
-    
-    let seconds = new Date().getSeconds();
-    let secondsHand = document.getElementsByClassName('second-hand')[0];
-    secondsHand.setAttribute('style', `transform: rotate(${90 + ((360 / (60)) * seconds)}deg); transform-origin: bottom right;`)
-    
-    setInterval(() => {
+    let setTime = () => {
       let seconds = new Date().getSeconds();
       let secondsHand = document.getElementsByClassName('second-hand')[0];
-      secondsHand.setAttribute('style', `transform: rotate(${90 + ((360 / (60)) * seconds)}deg); transform-origin: bottom right;`)
+      secondsHand.setAttribute('style', `transform: rotate(${90 + ((360 / (60)) * seconds)}deg); transform-origin: 100%;`)
 
       let hours = new Date().getHours() % 12;
       let hourHand = document.getElementsByClassName('hour-hand')[0];
-      hourHand.setAttribute('style', `transform: rotate(${90 + ((360 / 12) * hours)}deg); transform-origin: bottom right;`)
+      hourHand.setAttribute('style', `transform: rotate(${90 + ((360 / 12) * hours)}deg); transform-origin: 100%;`)
 
       let minutes = new Date().getMinutes();
       let minutesHand = document.getElementsByClassName('min-hand')[0];
-      minutesHand.setAttribute('style', `transform: rotate(${90 + ((360 / (60)) * minutes)}deg); transform-origin: bottom right;`)
-    }, 1000);
+      minutesHand.setAttribute('style', `transform: rotate(${90 + ((360 / (60)) * minutes)}deg); transform-origin: 100%;`)
+    }
 
-    // console.log('seconds', seconds);
+    setInterval(() => {setTime()}, 1000);
+    setTime();
 
 
   </script>