Completed wesbos#13 & wesbos#14

Author: gbmyt

13 - Slide in on Scroll/index-START.html

@@ -58,6 +58,29 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const sliderImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      sliderImages.forEach(sliderImage => {
+
+        // Half-way through the image
+        const slideInAt = (window.scrollY + window.innerHeight) -
+          sliderImage.height / 2;
+          const imageBottom = sliderImage.offsetTop + sliderImage.height;
+
+          const isHalfShown = slideInAt > sliderImage.offsetTop;
+          const isNotScrolledPast = window.scrollY < imageBottom;
+
+          if (isHalfShown && isNotScrolledPast) {
+            sliderImage.classList.add('active');
+          } else {
+            sliderImage.classList.remove('active');
+          }
+      })
+    }
+
+    window.addEventListener('scroll', debounce(checkSlide));
+
   </script>
 
   <style>
@@ -68,11 +91,11 @@ <h1>Slide in on Scroll</h1>
       font-size: 20px;
       font-weight: 200;
     }
-    
+
     body {
       margin: 0;
     }
-    
+
     *, *:before, *:after {
       box-sizing: inherit;
     }
@@ -101,13 +124,13 @@ <h1>Slide in on Scroll</h1>
 
     .slide-in {
       opacity: 0;
-      transition: all .5s;
+      transition: all .35s;
     }
 
     .align-left.slide-in {
       transform: translateX(-30%) scale(0.95);
     }
-    
+
     .align-right.slide-in {
       transform: translateX(30%) scale(0.95);
     }

14 - JavaScript References VS Copying/index-START.html

@@ -8,13 +8,28 @@
 
   <script>
     // start with strings, numbers and booleans
+    let age = 100;
+    let age2 = age;
+    console.log(age, age2);
+
+    age = 200;
+    console.log(age, age2);
+
+    let name = 'Wes';
+    let name2 = name;
+    console.log(name, name2);
+    name = 'Wesley';
+    console.log(name, name2);
 
     // Let's say we have an array
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
     // and we want to make a copy of it.
+    const team = players;
 
     // You might think we can just do something like this:
+    team[3] = 'Lux';
+    // console.log(team, players);
 
     // however what happens when we update that array?
 
@@ -27,29 +42,49 @@
     // So, how do we fix this? We take a copy instead!
 
     // one way
+    const team2 = players.slice();
 
     // or create a new array and concat the old one in
+    const team3 = [].concat(players);
 
     // or use the new ES6 Spread
+    const team4 = [...players];
+    const team5 = Array.from(players);
 
     // now when we update it, the original one isn't changed
 
     // The same thing goes for objects, let's say we have a person object
-
     // with Objects
     const person = {
       name: 'Wes Bos',
       age: 80
     };
 
     // and think we make a copy:
+    const captain = person;
+    captain.number = 99;
 
     // how do we take a copy instead?
+    const cap2 = Object.assign({}, person, { number: 199 });
+
+    // Below Syntax Coming Soon
+    // const cap3 = {...person};
 
     // We will hopefully soon see the object ...spread
 
     // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
-
+    const wes = {
+      name: 'Wes',
+      age: 100,
+      social: {
+        twitter: '@wesbos',
+        facebook: 'wesbos.developer'
+      }
+    }
+
+    // Only one level deep
+    // Won't deep clone nested objs w/i obj
+    const dev = Object.assign({}, wes);
   </script>
 
 </body>