sei-ec-remote · jlm8965 · Sep 28, 2022 · Oct 4, 2022
diff --git a/clock.js b/clock.js
@@ -0,0 +1,26 @@
+setInterval(setClock, 1000)
+
+//first get element to be able to do stuff with it
+const hourRotation = document.getElementById("hour")
+const minuteRotation = document.getElementById("minute")
+const secondRotation = document.getElementById("second")
+
+function setClock () {
+    const currentDate = new Date()
+    const seconds = currentDate.getSeconds() /60
+    const minutes = (seconds + currentDate.getMinutes()) / 60
+    const hours = (minutes + currentDate.getHours()) / 12
+
+    setRotation(secondRotation, seconds)
+    setRotation(minuteRotation, minutes)
+    setRotation(hourRotation, hours)
+}
+
+function setRotation(element, rotationRatio) {
+    element.style.setProperty('--rotation', rotationRatio * 360)
+}
+
+setClock()
+
+
+
diff --git a/index.html b/index.html
@@ -8,9 +8,9 @@
   <body>
     <div id="clock">
       <img id="face" src="img/clockface.png"/>
-      <img id="second" src="img/second-hand.png"/>
       <img id="minute" src="img/minute-hand.png"/>
       <img id="hour" src="img/hour-hand.png"/>
+      <img id="second" src="img/second-hand.png"/>
     </div>
     <script src="clock.js"></script>
   </body>

diff --git a/style.css b/style.css
@@ -1,14 +1,35 @@
 #clock {
+
 }
 
 #clock img {
+  position: absolute; 
+
 }
 
 #hour {
+  position: absolute;   
+  transform: rotate(calc(var(--rotation)* 1deg));
+
 }
+
+
 
 #minute {
+  position: absolute;   
+  transform: rotate(calc(var(--rotation)* 1deg));
 }
+
+
+
 
 #second {
+  position: absolute;   
+  transform: rotate(calc(var(--rotation)* 1deg));
+
 }
+
+  #face {
+    position: relative;   
+
+  }