Completed project 2

wwags33 · wwags33 · commit 885abbca14b5 · 2020-02-10T14:34:10.000-05:00
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
@@ -1,19 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>JS + CSS Clock</title>
 </head>
+
 <body>
 
 
-    <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>
+  <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>
+  </div>
 
 
   <style>
@@ -43,17 +45,18 @@
       position: relative;
       padding: 2rem;
       box-shadow:
-        0 0 0 4px rgba(0,0,0,0.1),
+        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 10px rgba(0, 0, 0, 0.2);
     }
 
     .clock-face {
       position: relative;
       width: 100%;
       height: 100%;
-      transform: translateY(-3px); /* account for the height of the clock hands */
+      transform: translateY(-3px);
+      /* account for the height of the clock hands */
     }
 
     .hand {
@@ -62,13 +65,17 @@
       background: black;
       position: absolute;
       top: 50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: transform 0.05s cubic-bezier(0.1, 2.7, 0.58, 1);
     }
 
+    .second-hand {
+      background-color: darkred;
+    }
   </style>
 
-  <script>
-
-
-  </script>
+  <script src="typescripts.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/02 - JS and CSS Clock/typescripts.js b/02 - JS and CSS Clock/typescripts.js
@@ -0,0 +1,35 @@
+var secHand = document.querySelector('.second-hand');
+var minHand = document.querySelector('.min-hand');
+var hourHand = document.querySelector('.hour-hand');
+function setDateLoop() {
+    var now = new Date();
+    var seconds = now.getSeconds();
+    var secondsDegrees = (seconds / 60) * 360 + 90;
+    if (secondsDegrees === 90) {
+        secHand.style.transition = 'none';
+    }
+    else {
+        secHand.style.transition = 'transform 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)';
+    }
+    secHand.style.transform = "rotate(" + secondsDegrees + "deg)";
+    var mins = now.getMinutes();
+    var minsDegrees = (mins / 60) * 360 + 90;
+    if (minsDegrees === 90) {
+        minHand.style.transition = 'none';
+    }
+    else {
+        minHand.style.transition = 'transform 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)';
+    }
+    minHand.style.transform = "rotate(" + minsDegrees + "deg)";
+    var hours = now.getHours();
+    var hoursDegrees = (hours / 12) * 360 + 90;
+    if (hoursDegrees === 90) {
+        hourHand.style.transition = 'none';
+    }
+    else {
+        hourHand.style.transition = 'transform 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)';
+    }
+    hourHand.style.transform = "rotate(" + hoursDegrees + "deg)";
+    window.requestAnimationFrame(setDateLoop);
+}
+setDateLoop();
diff --git a/02 - JS and CSS Clock/typescripts.ts b/02 - JS and CSS Clock/typescripts.ts
@@ -0,0 +1,46 @@
+/**
+ * JavaScript30 by Wes Bos, https://javascript30.com/
+ * TypeScript implementation by Will Wager
+ * Project: TS and CSS Clock
+ * Concepts: Transforms and transitions
+ * Key takeaways: Using Date, updating CSS with TS.
+ * Sidenotes: Disable transition on the reset step to avoid flicker.
+ */
+
+const secHand: HTMLElement = document.querySelector('.second-hand');
+const minHand: HTMLElement = document.querySelector('.min-hand');
+const hourHand: HTMLElement = document.querySelector('.hour-hand');
+
+function setDateLoop(): void {
+  const now = new Date();
+  const seconds = now.getSeconds();
+  const secondsDegrees = (seconds / 60) * 360 + 90;
+  if (secondsDegrees === 90) {
+    secHand.style.transition = 'none';
+  } else {
+    secHand.style.transition = 'transform 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)';
+  }
+  secHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+  const mins = now.getMinutes();
+  const minsDegrees = (mins / 60) * 360 + 90;
+  if (minsDegrees === 90) {
+    minHand.style.transition = 'none';
+  } else {
+    minHand.style.transition = 'transform 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)';
+  }
+  minHand.style.transform = `rotate(${minsDegrees}deg)`;
+
+  const hours = now.getHours();
+  const hoursDegrees = (hours / 12) * 360 + 90;
+  if (hoursDegrees === 90) {
+    hourHand.style.transition = 'none';
+  } else {
+    hourHand.style.transition = 'transform 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)';
+  }
+  hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+
+  window.requestAnimationFrame(setDateLoop);
+}
+
+setDateLoop();
