Merge branch 'master' of https://github.com/ccalbaugh/JavaScript30

ccalbaugh · ccalbaugh · commit 87a03161812e · 2017-01-11T17:43:32.000-06:00
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
@@ -7,6 +7,19 @@
 </head>
 <body>
 <script>
+
+const pressed = [];
+const secretCode = 'caden';
+
+window.addEventListener('keyup', (e) => {
+	console.log(e.key);
+	pressed.push(e.key);
+	pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
+	if (pressed.join('').includes(secretCode)) {
+		cornify_add();
+	}
+	console.log(pressed);
+});
 </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,27 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const slideImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      slideImages.forEach(sliderImage => {
+        // Halfway through the image
+        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
+        // The bottom of the image
+        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');
+        }
+      });
+      console.log(e);
+    }
+
+    window.addEventListener('scroll', debounce(checkSlide));
+
   </script>
 
   <style>
diff --git a/14 - JavaScript References VS Copying/index-START.html b/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);
+
+    let name = 'Caden';
+    let name2 = name;
+    console.log(name, name2);
+    name = 'Caden Albaugh';
+    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;
+
+    console.log(team, players);
 
     // You might think we can just do something like this:
+    team[3] = 'lux';
 
     // however what happens when we update that array?
 
@@ -25,27 +40,49 @@
     // Why? It's because that is an array reference, not an array copy. They both point to the same array!
 
     // So, how do we fix this? We take a copy instead!
+    const team2 = players.slice();
 
     // one day
 
     // 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 capt2 = Object.assign({}, person, { number: 99 });
 
     // We will hopefully soon see the object ...spread
+    capt3 = {...person}; // This is shallow, meaning it will only go one level deep
 
     // 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'
+      }
+    };
+
   </script>
 
 </body>
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
@@ -23,12 +23,89 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+    <div class="button-wrapper">
+      <button class="check-all" type="button">Check All</button>
+      <button class="uncheck-all" type="button">Uncheck All</button>
+     <button class="clear-all" type="button">Clear All</button>
+    </div>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const items = JSON.parse(localStorage.getItem('items')) || [];
+  const checkAllButton = document.querySelector('.check-all');
+  const uncheckAllButton = document.querySelector('.uncheck-all');
+  const clearAllButton = document.querySelector('.clear-all');
+
+  function addItem(e) {
+    e.preventDefault();
+    const text = (this.querySelector('[name="item"]')).value;
+    const item = {
+      text, // ES6 shorthand property
+      done: false
+    };
+
+    items.push(item);
+    populateList(items, itemsList);
+    localStorage.setItem('items', JSON.stringify(items));
+    this.reset();
+  }
+
+  function populateList(plates = [], platesList) {
+    platesList.innerHTML = plates.map(( plate, i ) => {
+      return `
+        <li>
+          <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
+          <label for="item${i}">${plate.text}</label>
+        </li>
+      `;
+    }).join('');
+  }
+
+  function toggleDone(e) {
+    if (!e.target.matches('input')) return; // skip this unless it's an input
+    const el = e.target;
+    const index = el.dataset.index;
+    items[index].done = !items[index].done;
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList);
+  }
+
+  function checkAll() {
+    var list = JSON.parse(localStorage.getItem('items'));
+    var checkedList = list.map(item => {
+      item.done = true;
+      return item;
+    });
+
+    localStorage.setItem('items', JSON.stringify(checkedList));
+    populateList(checkedList, itemsList);
+  }
+
+  function uncheckAll() {
+    var list = JSON.parse(localStorage.getItem('items'));
+    var checkedList = list.map(item => {
+      item.done = false;
+      return item;
+    });
+
+    localStorage.setItem('items', JSON.stringify(checkedList));
+    populateList(checkedList, itemsList);
+  }
+
+  function clearAll() {
+    localStorage.removeItem('items');
+    populateList([], itemsList);
+  }
+
+  addItems.addEventListener('submit', addItem);
+  itemsList.addEventListener('click', toggleDone);
+  checkAllButton.addEventListener('click', checkAll);
+  uncheckAllButton.addEventListener('click', uncheckAll);
+  clearAllButton.addEventListener('click', clearAll);
+
+  populateList(items, itemsList);
 
 </script>
 
diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css
@@ -76,3 +76,17 @@
       outline:0;
       border:1px solid rgba(0,0,0,0.1);
     }
+
+    .button-wrapper {
+      display: flex;
+      margin: 10px 0;
+    }
+
+    button {
+      width: calc(33.333% - 20px);
+      flex: 1;
+      justify-content: space-between;
+      padding:10px;
+      outline:0;
+      border:1px solid rgba(0,0,0,0.1);
+    }
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
@@ -31,6 +31,31 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+  const hero = document.querySelector('.hero');
+  const text = hero.querySelector('h1');
+  const walk = 100; // 100px
+
+  function shadow(e) {
+    const { offsetWidth: width, offsetHeight: height } = hero;
+    let  { offsetX: x, offsetY: y } = e;
+
+    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 / height * walk) - (walk / 2));
+
+    text.style.textShadow = `
+      ${xWalk}px ${yWalk}px 0 rgba(255, 0, 255, 0.7),
+      ${xWalk * -1}px ${yWalk}px 0 rgba(0, 255, 255, 0.7),
+      ${yWalk}px ${xWalk * -1}px 0 rgba(255, 255, 0, 0.7),
+      ${yWalk * -1}px ${xWalk}px 0 rgba(70, 170, 110, 0.7)
+    `;
+  }
+
+  hero.addEventListener('mousemove', shadow);
 </script>
 </body>
 </html>
diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
@@ -45,6 +45,16 @@
 <script>
 const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
 
+function strip(bandNames) {
+  return bandNames.replace(/^(a |the |an )/i, '').trim();
+}
+
+const sortedBands = bands.sort( (a, b) => strip(a) > strip(b) ? 1 : -1 );
+
+document.querySelector('#bands').innerHTML =
+  sortedBands
+    .map(band => `<li>${band}</li>`)
+    .join('');
 
 </script>
 
diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
@@ -182,6 +182,25 @@
     </li>
 
 <script>
+  const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
+
+  const seconds = timeNodes
+    .map(node => node.dataset.time)
+    .map(timeCode => {
+      const [mins, secs] = timeCode.split(':')
+        .map(parseFloat)
+      return (mins * 60) + secs;
+    })
+    .reduce((total, seconds) => total + seconds);
+
+    let secondsLeft = seconds;
+    const hours = Math.floor(seconds / 3600);
+    secondsLeft = secondsLeft % 3600;
+    const minutes = Math.floor(secondsLeft / 60);
+    secondsLeft = secondsLeft % 60;
+
+  console.log(hours, minutes, secondsLeft);
+
 </script>
 </body>
 </html>
