finished JS Day wesbos#16

kdipaolo · kdipaolo · commit 5150fd7011c9 · 2017-04-06T08:10:32.000-04:00
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
@@ -6,7 +6,37 @@
   <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
 </head>
 <body>
+<style>
+
+/* The animation code */
+@keyframes oaks {
+    0% {transform: rotate(0deg) scale(1)}
+    50% {transform: rotate(360deg) scale(3)}
+    100% {transform: rotate(0deg) scale(1)}
+}
+
+.oaksblokes {
+  animation-name: oaks;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  position : absolute;
+  left: 30%;
+  top: 20%;
+  z-index : 9999;
+}
+
+h1.oaksblokes-header {
+  font-size: 100px;
+  position: relative;
+  color: #fff;
+  text-align: center;
+  z-index: 999999;
+}
+
+</style>
 <script>
+
+function handleKeyUp(a){if(ENTRY.push(a.key),ENTRY.splice(-SECRET_PASSWORD.length-1,ENTRY.length-SECRET_PASSWORD.length),[SECRET_PASSWORD.split("")]==ENTRY&&(alert(),cornify_add()),ENTRY.join("")==SECRET_PASSWORD){const b=document.createElement("img"),c=document.createElement("h1");b.src="https://pbs.twimg.com/profile_images/823270999848288256/vGCDUDx9.jpg",c.innerHTML="JOIN THE OAKS!",b.classList.add("oaksblokes"),c.classList.add("oaksblokes-header");var d=document.querySelector("body");d.appendChild(b),d.appendChild(c)}}const SECRET_PASSWORD="oaksblokes",ENTRY=[];window.addEventListener("keyup",handleKeyUp);
 </script>
 </body>
 </html>
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
@@ -58,6 +58,25 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+
+    const images = document.querySelectorAll('img.slide-in');
+    function checkSlide(){
+      images.forEach(image => {
+          const slideInAt = (window.scrollY + window.innerHeight) - image.height / 2
+          const imageBottom = image.offsetTop + image.height
+          const imageMiddleHeight = image.offsetTop + (image.height / 2)
+          const isHalfShown = slideInAt > image.offsetTop
+          const isNotScrolledPast = window.scrollY < imageBottom
+          if (isHalfShown && isNotScrolledPast) {
+            image.classList.add('active');
+          } else {
+            image.classList.remove('active');
+          }
+      })
+
+    }
+    window.addEventListener('scroll', debounce(checkSlide))
+
   </script>
 
   <style>
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
@@ -26,15 +26,42 @@ <h1 contenteditable>🔥WOAH!</h1>
     justify-content: center;
     align-items: center;
     color:black;
+    border: 1px solid green;
   }
 
   h1 {
     text-shadow: 10px 10px 0 rgba(0,0,0,1);
     font-size: 100px;
+    background: lightblue;
   }
   </style>
 
 <script>
+const walk = 100;
+const text = document.querySelector('h1');
+const hero = document.querySelector('.hero');
+
+
+function handleHeroHover(e){
+  const width = hero.offsetWidth;
+  const height = hero.offsetHeight;
+  let x = e.offsetX
+  let y = e.offsetY
+
+  if(this !== e.target){
+    x = x + e.target.offsetLeft;
+    y = y + e.target.offsetTop;
+  }
+  const xWalk = Math.round((x / width * walk) - (walk / 2));
+  const yWalk = Math.round((y / width * walk) - (walk / 2));
+  text.style.textShadow = `${xWalk}px ${yWalk}px 0 rgba(0,0,0,1)`
+}
+
+
+
+hero.addEventListener('mousemove', handleHeroHover)
+
+
 </script>
 </body>
 </html>
