day 2 - JS Clock done!

drabikowy · drabikowy · commit e1b566326421 · 2017-01-03T14:32:06.000+01:00
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
@@ -1,39 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>JS + CSS Clock</title>
+   <meta charset="UTF-8">
+   <title>JS + CSS Clock</title>
 </head>
 <body>
 
 
-    <div class="clock">
+   <div class="clock">
       <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 hour-hand"></div>
+         <div class="hand min-hand"></div>
+         <div class="hand second-hand"></div>
       </div>
-    </div>
+   </div>
 
 
-  <style>
-    html {
+   <style>
+   html {
       background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
       background-size:cover;
       font-family:'helvetica neue';
       text-align: center;
       font-size: 10px;
-    }
+   }
 
-    body {
+   body {
       font-size: 2rem;
       display:flex;
       flex:1;
       min-height: 100vh;
       align-items: center;
-    }
+   }
 
-    .clock {
+   .clock {
       width: 30rem;
       height: 30rem;
       border:20px solid white;
@@ -42,32 +42,59 @@
       position: relative;
       padding:2rem;
       box-shadow:
-        0 0 0 4px rgba(0,0,0,0.1),
-        inset 0 0 0 3px #EFEFEF,
-        inset 0 0 10px black,
-        0 0 10px rgba(0,0,0,0.2);
-    }
+      0 0 0 4px rgba(0,0,0,0.1),
+      inset 0 0 0 3px #EFEFEF,
+      inset 0 0 10px black,
+      0 0 10px rgba(0,0,0,0.2);
+   }
 
-    .clock-face {
+   .clock-face {
       position: relative;
       width: 100%;
       height: 100%;
       transform: translateY(-3px); /* account for the height of the clock hands */
-    }
+   }
 
-    .hand {
+   .hand {
       width:50%;
       height:6px;
       background:black;
       position: absolute;
       top:50%;
-    }
+      border-radius: 10px 0 0 10px;
 
-  </style>
+      transform: rotate(90deg);
+      transform-origin: right;
+      transition: all 0.5s;
+      transition-timing-function: cubic-bezier(0.01, 1.14, 1, 1.08);
+   }
 
-  <script>
+   .hour-hand {
+      width: 30%;
+      left: 20%;
+   }
 
+   </style>
 
-  </script>
+   <script type="text/javascript">
+
+   const secondHand = document.querySelector('.second-hand');
+   const minHand = document.querySelector('.min-hand');
+   const hourHand = document.querySelector('.hour-hand');
+   function setDate() {
+      const time = new Date();
+      const secondDegrees = time.getSeconds() /60 * 360 + 90;
+      const minDegrees = time.getMinutes() / 60 * 360 + 90;
+      const hourDegrees = time.getHours() / 12 * 360 + 90;
+
+      secondHand.style.transform = `rotate(${secondDegrees}deg)`;
+      minHand.style.transform = `rotate(${minDegrees}deg)`;
+      hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+
+   }
+
+   setInterval(setDate, 1000);
+
+   </script>
 </body>
 </html>
