@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Document</title>
+  <title>JavaScript Clock</title>
 </head>
 <body>
 
@@ -57,16 +57,55 @@
 
     .hand {
       width:50%;
-      height:6px;
-      background:black;
+      height:3.4px;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function:cubic-bezier(0.8, 0.2, 0.85, 2.35);
+    }
+
+    .second-hand {
+      background: red;
+    }
+
+    .min-hand, .hour-hand {
+      background: black;
+    }
+
+    .hand.hour-hand {
+      width: 45%;
+      height: 5px;
+      margin-left: 14.5px;
     }
 
   </style>
 
   <script>
 
+  const secondHand = document.querySelector('.second-hand')
+
+  const minsHand = document.querySelector('.min-hand')
+
+  const hourHand = document.querySelector('.hour-hand')
+
+  function setDate() {
+    const now = new Date()
+    const seconds = now.getSeconds()// uses Date to get current seconds
+    const secondsDegrees = ((seconds / 60) * 360) + 90
+    secondHand.style.transform =`rotate(${secondsDegrees}deg)`
+
+    const minutes = now.getMinutes()
+    const minsDegrees = ((minutes / 60) * 360) + 90
+    minsHand.style.transform = `rotate(${minsDegrees}deg)`
+
+    const hour = now.getHours()
+    const hourDegrees = ((hour / 12) * 360) + 90
+    hourHand.style.transform = `rotate(${hourDegrees}deg)`
+  }
+
+  setInterval(setDate, 1000)
 
   </script>
 </body>
 
@@ -66,6 +66,7 @@
       transition: all 0.05s;
       transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
+    }
 </style>
 
 <script>
Original file line number	Diff line number	Diff line change
`@@ -66,6 +66,7 @@`
`66`	`66`	`transition: all 0.05s;`
`67`	`67`	`transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);`
`68`	`68`	`}`
	`69`	`+ }`
`69`	`70`	`</style>`
`70`	`71`
`71`	`72`	`<script>`