@@ -10,7 +10,7 @@
     <div class="clock">
       <div class="clock-face">
         <div class="hand hour-hand"></div>
-        <div class="hand min-hand"></div>
+        <div class="hand minute-hand"></div>
         <div class="hand second-hand"></div>
       </div>
     </div>
@@ -61,12 +61,49 @@
       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.5, 1);
     }
 
   </style>
 
   <script>
 
+  // Clock Hands
+  const secondHand = document.querySelector(".second-hand");
+  const minuteHand = document.querySelector(".minute-hand");
+  const hourHand = document.querySelector(".hour-hand");
+
+    function setDate(){
+
+      const now = new Date();
+
+      // Clock hand: Seconds
+      const seconds = now.getSeconds();
+
+      // Formula: Divide seconds by 60 to get percent, multiply by 360 to get degrees, add 90 to offset the initial CSS transform of clock hands
+      const secondsDegrees = ((seconds / 60) * 360) + 90;
+
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+      // Clock hand: Minutes
+      const minutes = now.getMinutes();
+      const minutesDegrees = ((minutes / 60) * 360) + 90;
+
+      minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
+
+      // Clock hand: Hour
+      const hours = now.getHours();
+      const hoursDegrees = ((hours / 12) * 360) + 90;
+
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+
+
+    }
+
+    setInterval(setDate, 1000);
 
   </script>
 </body>