diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..59ff7b07ae 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,6 +58,25 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  function playSound(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
+    if(!audio) return; // stop function from running
+    audio.currentTime = 0; // rewind to start
+    audio.play();
+
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
+    key.classList.add('playing');
+  }
+
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return; // skip it if it's not a transform
+    this.classList.remove('playing');
+  }
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+  window.addEventListener('keydown', playSound);
 
 </script>
 
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..8a60531709 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -10,7 +10,7 @@
     <div class="clock">
       <div class="clock-face">
         <div class="hand hour-hand"></div>
-        <div class="hand min-hand"></div>
+        <div class="hand minute-hand"></div>
         <div class="hand second-hand"></div>
       </div>
     </div>
@@ -61,12 +61,36 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s cubic-bezier(.1, 2.7,.58,1);
     }
 
   </style>
 
   <script>
+    const secondHand = document.querySelector('.second-hand');
+    const minuteHand = document.querySelector('.minute-hand');
+    const hourHand = document.querySelector('.hour-hand');
 
+    function setDate() {
+      const now = new Date();
+      const seconds = now.getSeconds();
+      const secondsDegrees = ((seconds/60) * 360) + 90;
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+      const minutes = now.getMinutes();
+      const minutesDegrees = ((minutes/60) * 360) + 90;
+      minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
+
+      const hours = now.getHours();
+      const hoursDegrees = ((hours/12) * 360) + 90;
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+
+      //console.log(secondHand.style.transform);
+    }
+
+    setInterval(setDate, 1000)
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index ca2b59d077..8ff7b79286 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,6 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img {
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
+
+    .hl {
+      color: var(--base);
+    }
 
     /*
       misc styles, nothing to do with CSS variables
@@ -48,6 +63,18 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+
+    const inputs = document.querySelectorAll('.controls input');
+
+    function handleUpdate(){
+      const suffix = this.dataset.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+
+    }
+
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..2972f458cd 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -29,31 +29,98 @@
 
     const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
 
-    // Array.prototype.filter()
+    // Array.prototype.filter() -- loops over each item in array and decide to keep or not
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const fifteen = inventors.filter(function(inventor) {
+      if(inventor.year >= 1500 && inventor.year < 1600) {
+        return true; // keep it
+      }
+    })
 
-    // Array.prototype.map()
+    // shorthand:
+    // const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
+
+    console.table(fifteen);
+    console.table(inventors);
+
+    // Array.prototype.map() -- takes in an array, does something with it, then returns new array of same length
     // 2. Give us an array of the inventors' first and last names
+    const fullNames = inventors.map(inventor => inventor.first + ' ' + inventor.last);
+    //console.log(fullNames);
 
-    // Array.prototype.sort()
+    // Array.prototype.sort() -- sorts by giving 1 or -1
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const ordered = inventors.sort(function(a, b){
+      if (a.year > b.year) {
+        return 1;
+      } else {
+        return -1;
+      }
+    });
+
+    // shorthand:
+    // ordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1));
+
+    //console.table(ordered);
 
-    // Array.prototype.reduce()
+    // Array.prototype.reduce() -- builds something on each item
     // 4. How many years did all the inventors live?
 
+    const totalYears = inventors.reduce((total, inventor) => {
+      return total + (inventor.passed - inventor.year);
+    }, 0)
+
+    //console.log(totalYears);
+
     // 5. Sort the inventors by years lived
 
+    const oldest = inventors.sort(function(a,b) {
+      const lastGuy = a.passed - a.year;
+      const nextGuy = b.passed - b.year;
+      return lastGuy > nextGuy ? -1 : 1;
+    })
+
+    //console.table(oldest);
+
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 
+    /*
+        const category = document.querySelector('.mw-category');
+        const links = Array.from(category.querySelectorAll('a'));
+
+        const de = links
+                    .map(link => link.textContent)
+                    .filter(streetName => streetName.includes('de'));
+    */
+
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
 
+    const alpha = people.sort((lastOne, nextOne) => {
+      const [alast, afirst] = lastOne.split(', ');
+      const [blast, bfirst] = nextOne.split(', ');
+      return alast > blast ? -1 : 1;
+    })
+
+    //console.log(alpha);
+
     // 8. Reduce Exercise
     // Sum up the instances of each of these
     const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
 
+    const transportation = data.reduce(function(obj, item) {
+      if(!obj[item]) {
+        obj[item] = 0;
+      }
+
+      obj[item]++;
+      return obj;
+    }, {})
+
+    //console.log(transportation);
+
   </script>
 </body>
 </html>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..0c2f98ebea 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,9 +24,16 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+
       background:#6B0F9C;
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
@@ -54,6 +61,18 @@
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .panel > *:first-child {
+      transform: translateY(-100%);
+    }
+
+    .panel > *:last-child {
+      transform: translateY(100%);
     }
 
     .panel p {
@@ -67,9 +86,18 @@
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
+    .panel.open.active > *:first-child {
+      transform: translateY(0);
+    }
+
+    .panel.open.active > *:last-child {
+      transform: translateY(0);
+    }
+
     .cta {
       color:white;
       text-decoration: none;
@@ -108,6 +136,21 @@
 
   <script>
 
+    const panels = document.querySelectorAll('.panel');
+
+    function toggleOpen() {
+      this.classList.toggle('open');
+    }
+
+    function toggleActive(e) {
+      if(e.propertyName.includes('flex')) {
+        this.classList.toggle('active');
+      }
+    }
+
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+
   </script>
 
 
diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html
index 5902b43936..b526d13223 100644
--- a/06 - Type Ahead/index-FINISHED.html	
+++ b/06 - Type Ahead/index-FINISHED.html	
@@ -22,6 +22,8 @@
   .then(blob => blob.json())
   .then(data => cities.push(...data));
 
+console.log(typeof(cities));
+
 function findMatches(wordToMatch, cities) {
   return cities.filter(place => {
     // here we need to figure out if the city or state matches what was searched
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..c59cc00b79 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,42 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+const cities = [];
+
+fetch(endpoint)
+  .then(blob => blob.json())
+  .then(data => cities.push(...data));
+
+function findMatches(wordToMatch, cities) {
+  return cities.filter(place => {
+    // here we need to figure out if the city or state matches what was searched
+    const regex = new RegExp(wordToMatch, 'gi');
+    return place.city.match(regex) || place.state.match(regex);
+  })
+}
+
+function displayMatches() {
+  const matchArray = findMatches(this.value, cities);
+  const html = matchArray.map(place => {
+    const regex = new RegExp(this.value, 'gi');
+    const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
+    const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
+    return `
+      <li>
+        <span class="name">${cityName}, ${stateName}</span>
+        <span class="population">${place.population}</span>
+      </li>
+    `;
+  }).join('');
+  suggestions.innerHTML = html;
+}
+
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+searchInput.addEventListener('change', displayMatches);
+searchInput.addEventListener('keyup', displayMatches);
+
 </script>
   </body>
 </html>
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..596ae499b4 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,56 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+/*
+    const isAdult = people.some(function(person){
+      const currentYear = (new Date().getFullYear());
+
+      if(currentYear - person.year >= 19) {
+        return true;
+      }
+    })
+*/
+
+    const isAdult = people.some(person => {
+      const currentYear = (new Date().getFullYear());
+      return currentYear - person.year >= 19;
+    })
+
+    console.log({isAdult});
+
     // Array.prototype.every() // is everyone 19 or older?
 
+    const allAdults = people.every(person => {
+      const currentYear = (new Date().getFullYear());
+      return currentYear - person.year >= 19;
+    })
+
+    console.log({allAdults});
+
+
     // Array.prototype.find()
     // Find is like filter, but instead returns just the one you are looking for
     // find the comment with the ID of 823423
 
+    const comment = comments.find(function(comment){
+      return comment.text === "Super good";
+    });
+
+    console.log(comment);
+
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const index = comments.findIndex(comment => comment.id === 823423);
+    //comments.splice(index, 1);
+    const newComments = [
+      ...comments.slice(0, index),
+      ...comments.slice(index + 1)
+    ]
+
+    console.table(comments);
+    console.table(newComments);
+
 
   </script>
 </body>
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..ff9f89891c 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -20,26 +20,57 @@
     // Regular
 
     // Interpolated
+    console.log('Hello I am a %s string!', 'poop');
 
     // Styled
+    console.log('%c I am some great text', 'font-size: 24px');
 
     // warning!
+    console.warn('Oh NO');
 
     // Error :|
+    console.error('Crap!');
 
     // Info
+    console.info('Fun fact!');
 
     // Testing
+    console.assert(1 === 2, 'That is wrong!');
 
     // clearing
+    //console.clear();
 
     // Viewing DOM Elements
+    const p = document.querySelector('p');
+    console.dir(p);
 
     // Grouping together
+    dogs.forEach(dog => {
+      console.groupCollapsed(`${dog.name}`);
+      console.log(`This is ${dog.name}`);
+      console.log(`${dog.name} is ${dog.age *7} dog years old`);
+      console.groupEnd(`${dog.name}`);
+    })
 
     // counting
+    console.count('Wes');
+    console.count('Wes');
+    console.count('Wes');
+    console.count('Me');
+    console.count('Wes');
+    console.count('Wes');
+    console.count('Me');
+    console.count('Me');
+    console.count('Wes');
 
     // timing
+    console.time('fetching data');
+    fetch('https://api.github.com/users/cchaos')
+      .then(data => data.json())
+      .then(data => {
+        console.timeEnd('fetching data');
+        console.log(data);
+      });
 
   </script>
 </body>
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index eb7ed310bb..078b5d7bea 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,33 @@
   </div>
 
 <script>
+
+  const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
+
+  let lastChecked;
+
+  function handleCheck(e) {
+    // Check if they had the shift key down
+    // And that they are checking it
+    let inBetween = false;
+    if (e.shiftKey && this.checked) {
+      //loop over every single checkbox
+      checkboxes.forEach(checkbox => {
+        if (checkbox === this || checkbox === lastChecked) {
+          inBetween = !inBetween;
+        }
+
+        if (inBetween) {
+          checkbox.checked = true;
+        }
+      })
+    }
+
+    lastChecked = this;
+  }
+
+  checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
+
 </script>
 </body>
 </html>
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8fccb..56266b402a 100644
--- 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 sliderImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      sliderImages.forEach(sliderImage => {
+        // halfway through the image
+        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
+        // bottom of 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');
+        }
+      });
+    }
+
+    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
index 4da1bac2ea..d54b8ab167 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -13,9 +13,12 @@
     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(players, team);
     // however what happens when we update that array?
 
     // now here is the problem!
@@ -25,26 +28,53 @@
     // 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: "Person Name",
+      age: 35
+    }
 
     // and think we make a copy:
+    const captain = person;
+    captain.age = 76;
 
     // how do we take a copy instead?
+    const cap2 = Object.assign({}, person, {age: 86});
+    console.log(cap2, person);
 
     // We will hopefully soon see the object ...spread
+    //const cap3 = {...person};
 
     // 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: 99,
+      social: {
+        twitter: "@",
+        facebook: "face"
+      }
+    }
+    console.log(wes);
+
+    const dev = Object.assign({}, wes);
+
+    const dev2 = JSON.parse(JSON.stringify(wes));
 
   </script>
 
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..ab08d7559a 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -23,12 +23,74 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+    <hr>
+    <button data-check-all="true">Check All</button>
+    <button data-uncheck-all="true">Uncheck All</button>
+    <br>
+    <button data-clear="true">Clear List</button>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const items = JSON.parse(localStorage.getItem('items')) || [];
+  const buttons = document.querySelectorAll('button');
+
+  function addItem(e) {
+    e.preventDefault();
+    const text = (this.querySelector('[name="item"]')).value;
+    const item = {
+      text,
+      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 buttonHandler(e) {
+    if (e.currentTarget.dataset.checkAll) {
+      items.forEach(item => item.done = true);
+      localStorage.setItem('items', JSON.stringify(items));
+
+    } else if (e.currentTarget.dataset.uncheckAll) {
+      items.forEach(item => item.done = false);
+      localStorage.setItem('items', JSON.stringify(items));
+
+    } else if (e.currentTarget.dataset.clear) {
+      items.length = 0;
+      localStorage.removeItem('items');
+    }
+
+    populateList(items, itemsList);
+  }
+
+  addItems.addEventListener('submit', addItem);
+  itemsList.addEventListener('click', toggleDone);
+  buttons.forEach(button => button.addEventListener('click', buttonHandler));
+  populateList(items, itemsList);
 
 </script>
 
diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..659e3ab818 100644
--- 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(bandName) {
+  return bandName.replace(/^(a |the |an )/i, '').trim();
+}
+
+const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
+
+console.log(sortedBands);
+
+document.querySelector('#bands').innerHTML = sortedBands.map(band => `<li>${band}</li>`).join('');
+
 
 </script>
 
diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..81fb888cc2 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -26,7 +26,27 @@
     </div>
 
   <script>
-    // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+    const triggers = document.querySelectorAll('a');
+    const highlight = document.createElement('span');
+    highlight.classList.add('highlight');
+    document.body.append(highlight);
+
+    function highlightLink() {
+      const linkCoords = this.getBoundingClientRect();
+      const coords = {
+        width: linkCoords.width,
+        height: linkCoords.height,
+        top: linkCoords.top + window.scrollY,
+        left: linkCoords.left + window.scrollX,
+      }
+
+      highlight.style.width = `${coords.width}px`;
+      highlight.style.height = `${coords.height}px`;
+      highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
+    }
+
+    triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
+
   </script>
 </body>
 </html>
diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..c97e58012f 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -54,7 +54,20 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
-
+  const nav = document.querySelector('#main');
+  const topOfNav = nav.offsetTop;
+
+  function fixNav(){
+    if (window.scrollY >= topOfNav) {
+      document.body.style.paddingTop = nav.offsetHeight + 'px';
+      document.body.classList.add('fixed-nav');
+    } else {
+      document.body.style.paddingTop = 0;
+      document.body.classList.remove('fixed-nav');
+    }
+  }
+
+  window.addEventListener('scroll', fixNav);
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index c6d59a31b3..6703d93f1c 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -23,6 +23,10 @@ body {
   transition: transform 0.5s;
 }
 
+.fixed-nav .site-wrap {
+  transform: scale(1);
+}
+
 header {
   text-align: center;
   height:50vh;
@@ -48,6 +52,11 @@ nav {
   z-index: 1;
 }
 
+.fixed-nav nav {
+  position: fixed;
+  box-shadow: 0 5px 5px rgba(0,0,0,.25);
+}
+
 nav ul {
   margin: 0;
   padding:0;
@@ -72,6 +81,10 @@ li.logo {
   font-size: 30px;
 }
 
+.fixed-nav li.logo {
+  max-width: 500px;
+}
+
 li.logo a {
   color:black;
 }
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html
index 98f5e070c4..1e34a99e98 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
@@ -40,6 +40,25 @@
 <button></button>
 <script>
 
+  const divs = document.querySelectorAll('div');
+  const button = document.querySelector('button');
+
+  function logText(e) {
+    console.log(this.classList.value);
+    //e.stopPropagation();
+  }
+
+  divs.forEach(div => div.addEventListener('click', logText, {
+    capture: false, // on the way down not up if true
+    once: true // removes listener
+  }));
+
+  button.addEventListener('click', () => {
+    console.log("Click!!")
+  },  {
+    once: true
+  });
+
 </script>
 </body>
 </html>
diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
index 9780d0d1ac..59a4164d66 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -5,7 +5,8 @@
   <title>Follow Along Nav</title>
 </head>
 <body>
-  <h2>Cool</h2>
+  <h2>https://stripe.com/</h2>
+
   <nav class="top">
     <div class="dropdownBackground">
       <span class="arrow"></span>
@@ -208,6 +209,48 @@ <h2>Cool</h2>
 </style>
 
 <script>
+
+  const triggers = document.querySelectorAll('.cool > li');
+  const background = document.querySelector('.dropdownBackground');
+  const nav = document.querySelector('.top');
+
+  function handleEnter(){
+    this.classList.add('trigger-enter');
+
+    setTimeout(() => {
+      if (this.classList.contains('trigger-enter')) {
+        this.classList.add('trigger-enter-active');
+      }
+    }, 150);
+
+    background.classList.add('open');
+
+    const dropdown = this.querySelector('.dropdown');
+    const dropdownCoords = dropdown.getBoundingClientRect();
+    const navCoords = nav.getBoundingClientRect();
+    const coords = {
+      height: dropdownCoords.height,
+      width: dropdownCoords.width,
+      top: dropdownCoords.top - navCoords.top,
+      left: dropdownCoords.left - navCoords.left
+    };
+
+    background.style.setProperty('width', coords.width + 'px');
+    background.style.setProperty('height', coords.height + 'px');
+    background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px`);
+
+
+  }
+
+  function handleLeave() {
+    this.classList.remove('trigger-enter', 'trigger-enter-active');
+    background.classList.remove('open');
+  }
+
+  triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
+  triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
+
+
 </script>
 
 </body>
diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html
index b8609315f7..d40a9dc45e 100644
--- a/27 - Click and Drag/index-START.html	
+++ b/27 - Click and Drag/index-START.html	
@@ -35,6 +35,39 @@
   </div>
 
 <script>
+
+  const slider = document.querySelector('.items');
+  let isDown = false;
+  let startX;
+  let scrollLeft;
+
+
+
+  slider.addEventListener('mousedown', (e) => {
+    isDown = true;
+    slider.classList.add('active');
+    startX = e.pageX - slider.offsetLeft;
+    scrollLeft = slider.scrollLeft;
+  });
+  slider.addEventListener('mouseleave', () => {
+    isDown = false;
+    slider.classList.remove('active');
+  });
+  slider.addEventListener('mouseup', () => {
+    isDown = false;
+    slider.classList.remove('active');
+  });
+  slider.addEventListener('mousemove', (e) => {
+    if (!isDown) return;
+
+    e.preventDefault();
+    const x = e.pageX - slider.offsetLeft;
+    const walk = (x - startX) * 1.5;
+
+    slider.scrollLeft = scrollLeft - walk;
+    console.log(walk);
+  });
+
 </script>
 
   </body>
diff --git a/Books/index.html b/Books/index.html
new file mode 100644
index 0000000000..e4d8c258db
--- /dev/null
+++ b/Books/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Minimal JS front-end App Example</title>
+  <script src="src/model/Book.js"></script>
+</head>
+<body>
+  <h1>Public Library</h1>
+  <h2>An Example of a Minimal JavaScript front-end App</h2>
+  <p>This app supports the following operations:</p>
+  <menu>
+    <li><a href="listBooks.html"><button type="button">List all books</button></a></li>
+    <li><a href="createBook.html"><button type="button">Add a new book</button></a></li>
+    <li><a href="updateBook.html"><button type="button">Update a book</button></a></li>
+    <li><a href="deleteBook.html"><button type="button">Delete a book</button></a></li>
+    <li><button type="button" onclick="Book.clearData()">Clear database</button></li>
+    <li><button type="button" onclick="Book.createTestData()">Create test data</button></li>
+  </menu>
+</body>
+</html>
\ No newline at end of file
diff --git a/Books/listBooks.html b/Books/listBooks.html
new file mode 100644
index 0000000000..eba4bd652d
--- /dev/null
+++ b/Books/listBooks.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Minimal JS front-end App Example</title>
+  <script src="src/ctrl/initialize.js"></script>
+  <script src="src/model/Book.js"></script>
+  <script src="src/view/listBooks.js"></script>
+  <script>
+    Book.createTestData();
+   window.addEventListener( "load", pl.view.listBooks.setupUserInterface);
+  </script>
+</head>
+<body>
+  <h1>Public Library: List all books</h1>
+  <table id="books">
+    <thead><tr><th>ISBN</th><th>Title</th><th>Year</th></tr></thead>
+    <tbody></tbody>
+  </table>
+  <nav><a href="index.html">Back to main menu</a></nav>
+</body>
+</html>
\ No newline at end of file
diff --git a/Books/src/ctrl/initialize.js b/Books/src/ctrl/initialize.js
new file mode 100644
index 0000000000..bd09a0ad77
--- /dev/null
+++ b/Books/src/ctrl/initialize.js
@@ -0,0 +1,2 @@
+// instantiate the namespaces for Public Library
+var pl = { model:{}, view:{}, ctrl:{} };
\ No newline at end of file
diff --git a/Books/src/model/Book.js b/Books/src/model/Book.js
new file mode 100644
index 0000000000..50765076ee
--- /dev/null
+++ b/Books/src/model/Book.js
@@ -0,0 +1,99 @@
+function Book( slots ) {
+  this.isbn  = slots.isbn;
+  this.title = slots.title;
+  this.year  = slots.year;
+};
+
+//
+// A class-level property Book.instances representing the collection of all Book instances managed by the application in the form of a map.
+Book.instances = {};
+
+//
+// A static class-level method Book.convertRow2Obj for converting a row into a corresponding object of type Book.
+Book.convertRow2Obj = function (bookRow) {
+  var book = new Book( bookRow);
+  return book;
+};
+
+//
+// A class-level method Book.loadAll for loading all managed Book instances from the persistent data store.
+Book.loadAll = function () {
+  var i=0, key="", keys=[], bookTableString="", bookTable={};
+  try {
+    if (localStorage["bookTable"]) {
+      bookTableString = localStorage["bookTable"];
+    }
+  } catch (e) {
+    alert("Error when reading from Local Storage\n" + e);
+  }
+  if (bookTableString) {
+    bookTable = JSON.parse( bookTableString);
+    keys = Object.keys( bookTable);
+    console.log( keys.length +" books loaded.");
+    for (i=0; i < keys.length; i++) {
+      key = keys[i];
+      Book.instances[key] = Book.convertRow2Obj( bookTable[key]);
+    }
+  }
+};
+
+//
+// A class-level method Book.saveAll for saving all managed Book instances to the persistent data store.
+Book.saveAll = function () {
+  var bookTableString="", error=false,
+      nmrOfBooks = Object.keys( Book.instances).length;
+  try {
+    bookTableString = JSON.stringify( Book.instances);
+    localStorage["bookTable"] = bookTableString;
+  } catch (e) {
+    alert("Error when writing to Local Storage\n" + e);
+    error = true;
+  }
+  if (!error) console.log( nmrOfBooks + " books saved.");
+};
+
+//
+// A class-level method Book.add for creating and storing a new Book record.
+Book.add = function (slots) {
+  var book = new Book( slots);
+  Book.instances[slots.isbn] = book;
+  console.log("Book " + slots.isbn + " created!");
+};
+
+//
+// A class-level method Book.update for updating an existing Book record.
+Book.update = function (slots) {
+  var book = Book.instances[slots.isbn];
+  var year = parseInt( slots.year);
+  if (book.title !== slots.title) { book.title = slots.title;}
+  if (book.year !== year) { book.year = year;}
+  console.log("Book " + slots.isbn + " modified!");
+};
+
+//
+// A class-level method Book.destroy for deleting a Book instance.
+Book.destroy = function (isbn) {
+  if (Book.instances[isbn]) {
+    console.log("Book " + isbn + " deleted");
+    delete Book.instances[isbn];
+  } else {
+    console.log("There is no book with ISBN " + isbn + " in the database!");
+  }
+};
+
+//
+// A class-level method Book.createTestData for creating a few example book records to be used as test data.
+Book.createTestData = function () {
+  Book.instances["006251587X"] = new Book({isbn:"006251587X", title:"Weaving the Web", year:2000});
+  Book.instances["0465026567"] = new Book({isbn:"0465026567", title:"Gödel, Escher, Bach", year:1999});
+  Book.instances["0465030793"] = new Book({isbn:"0465030793", title:"I Am A Strange Loop", year:2008});
+  Book.saveAll();
+};
+
+//
+// A class-level method Book.clearData for clearing the book datastore.
+Book.clearData = function () {
+  if (confirm("Do you really want to delete all book data?")) {
+    localStorage["bookTable"] = "{}";
+  }
+};
\ No newline at end of file
diff --git a/Books/src/view/listBooks.js b/Books/src/view/listBooks.js
new file mode 100644
index 0000000000..0ae6e91292
--- /dev/null
+++ b/Books/src/view/listBooks.js
@@ -0,0 +1,17 @@
+pl.view.listBooks = {
+  setupUserInterface: function () {
+    var tableBodyEl = document.querySelector("table#books>tbody");
+    var i=0, keys=[], key="", row={};
+    // load all book objects
+    Book.loadAll();
+    keys = Object.keys( Book.instances);
+    // for each book, create a table row with a cell for each attribute
+    for (i=0; i < keys.length; i++) {
+      key = keys[i];
+      row = tableBodyEl.insertRow();
+      row.insertCell(-1).textContent = Book.instances[key].isbn;
+      row.insertCell(-1).textContent = Book.instances[key].title;
+      row.insertCell(-1).textContent = Book.instances[key].year;
+    }
+  }
+};
\ No newline at end of file
diff --git a/MVC/App.js b/MVC/App.js
new file mode 100644
index 0000000000..a9968d8ead
--- /dev/null
+++ b/MVC/App.js
@@ -0,0 +1,5 @@
+$(function () {
+     var model = new TaskModel(),
+         view = new TaskView(model),
+         controller = new TaskController(model, view);
+ });
diff --git a/MVC/EventDispatcher.js b/MVC/EventDispatcher.js
new file mode 100644
index 0000000000..1425c14ee1
--- /dev/null
+++ b/MVC/EventDispatcher.js
@@ -0,0 +1,18 @@
+var Event = function (sender) {
+    this._sender = sender;
+    this._listeners = [];
+}
+
+Event.prototype = {
+
+    attach: function (listener) {
+        this._listeners.push(listener);
+    },
+
+    notify: function (args) {
+        for (var i = 0; i < this._listeners.length; i += 1) {
+            this._listeners[i](this._sender, args);
+        }
+    }
+
+};
\ No newline at end of file
diff --git a/MVC/TaskController.js b/MVC/TaskController.js
new file mode 100644
index 0000000000..57ed2eb9d6
--- /dev/null
+++ b/MVC/TaskController.js
@@ -0,0 +1,65 @@
+var TaskController = function (model, view) {
+    this.model = model;
+    this.view = view;
+
+    this.init();
+};
+
+TaskController.prototype = {
+
+    init: function () {
+        this.createChildren()
+            .setupHandlers()
+            .enable();
+    },
+
+    createChildren: function () {
+        // no need to create children inside the controller
+        // this is a job for the view
+        // you could all as well leave this function out
+        return this;
+    },
+
+    setupHandlers: function () {
+
+        this.addTaskHandler = this.addTask.bind(this);
+        this.selectTaskHandler = this.selectTask.bind(this);
+        this.unselectTaskHandler = this.unselectTask.bind(this);
+        this.completeTaskHandler = this.completeTask.bind(this);
+        this.deleteTaskHandler = this.deleteTask.bind(this);
+        return this;
+    },
+
+    enable: function () {
+
+        this.view.addTaskEvent.attach(this.addTaskHandler);
+        this.view.completeTaskEvent.attach(this.completeTaskHandler);
+        this.view.deleteTaskEvent.attach(this.deleteTaskHandler);
+        this.view.selectTaskEvent.attach(this.selectTaskHandler);
+        this.view.unselectTaskEvent.attach(this.unselectTaskHandler);
+
+        return this;
+    },
+
+
+    addTask: function (sender, args) {
+        this.model.addTask(args.task);
+    },
+
+    selectTask: function (sender, args) {
+        this.model.setSelectedTask(args.taskIndex);
+    },
+
+    unselectTask: function (sender, args) {
+        this.model.unselectTask(args.taskIndex);
+    },
+
+    completeTask: function () {
+        this.model.setTasksAsCompleted();
+    },
+
+    deleteTask: function () {
+        this.model.deleteTasks();
+    }
+
+};
\ No newline at end of file
diff --git a/MVC/TaskModel.js b/MVC/TaskModel.js
new file mode 100644
index 0000000000..0f8860eceb
--- /dev/null
+++ b/MVC/TaskModel.js
@@ -0,0 +1,62 @@
+var TaskModel = function() {
+    this.tasks         = [];
+    this.selectedTasks = [];
+
+    this.addTaskEvent             = new Event(this);
+    this.removeTaskEvent          = new Event(this);
+    this.setTasksAsCompletedEvent = new Event(this);
+    this.deleteTasksEvent         = new Event(this);
+
+  };
+
+TaskModel.prototype = {
+
+  addTask: function(task) {
+    this.tasks.push({
+      taskName: task,
+      taskStatus: 'uncompleted'
+    });
+    this.addTaskEvent.notify();
+  },
+
+  getTasks: function() {
+    return this.tasks;
+  },
+
+  setSelectedTask: function(taskIndex) {
+    this.selectedTasks.push(taskIndex);
+  },
+
+  unselectTask: function(taskIndex) {
+    this.selectedTasks.splice(taskIndex, 1);
+  },
+
+  setTasksAsCompleted: function() {
+    var selectedTasks = this.selectedTasks;
+    for (var index in selectedTasks) {
+      this.tasks[selectedTasks[index]].taskStatus = 'completed';
+    }
+
+    this.setTasksAsCompletedEvent.notify();
+
+    this.selectedTasks = [];
+
+  },
+
+
+  deleteTasks: function() {
+    var selectedTasks = this.selectedTasks.sort();
+
+    for (var i = selectedTasks.length - 1; i >= 0; i--) {
+      this.tasks.splice(this.selectedTasks[i], 1);
+    }
+
+    // clear the selected tasks
+    this.selectedTasks = [];
+
+    this.deleteTasksEvent.notify();
+
+  }
+
+
+};
\ No newline at end of file
diff --git a/MVC/TaskView.js b/MVC/TaskView.js
new file mode 100644
index 0000000000..214f7f3f6c
--- /dev/null
+++ b/MVC/TaskView.js
@@ -0,0 +1,152 @@
+var TaskView = function (model) {
+    this.model = model;
+    this.addTaskEvent = new Event(this);
+    this.selectTaskEvent = new Event(this);
+    this.unselectTaskEvent = new Event(this);
+    this.completeTaskEvent = new Event(this);
+    this.deleteTaskEvent = new Event(this);
+
+    this.init();
+};
+
+TaskView.prototype = {
+
+    init: function () {
+        this.createChildren()
+            .setupHandlers()
+            .enable();
+    },
+
+    createChildren: function () {
+        // cache the document object
+        this.$container = $('.js-container');
+        this.$addTaskButton = this.$container.find('.js-add-task-button');
+        this.$taskTextBox = this.$container.find('.js-task-textbox');
+        this.$tasksContainer = this.$container.find('.js-tasks-container');
+
+        return this; // allows for the method chaining inside the previous init() call
+    },
+
+    setupHandlers: function () {
+
+        // setting up the event handlers and changing the scope of the this keyword inside that handler
+
+        this.addTaskButtonHandler = this.addTaskButton.bind(this);
+        this.selectOrUnselectTaskHandler = this.selectOrUnselectTask.bind(this);
+        this.completeTaskButtonHandler = this.completeTaskButton.bind(this);
+        this.deleteTaskButtonHandler = this.deleteTaskButton.bind(this);
+
+        /**
+        Handlers from Event Dispatcher
+        */
+        this.addTaskHandler = this.addTask.bind(this);
+        this.clearTaskTextBoxHandler = this.clearTaskTextBox.bind(this);
+        this.setTasksAsCompletedHandler = this.setTasksAsCompleted.bind(this);
+        this.deleteTasksHandler = this.deleteTasks.bind(this);
+
+        return this;
+    },
+
+    enable: function () {
+
+        this.$addTaskButton.click(this.addTaskButtonHandler);
+        this.$container.on('click', '.js-task', this.selectOrUnselectTaskHandler);
+        this.$container.on('click', '.js-complete-task-button', this.completeTaskButtonHandler);
+        this.$container.on('click', '.js-delete-task-button', this.deleteTaskButtonHandler);
+
+        /**
+         * Event Dispatcher
+         */
+        this.model.addTaskEvent.attach(this.addTaskHandler);
+        this.model.addTaskEvent.attach(this.clearTaskTextBoxHandler);
+        this.model.setTasksAsCompletedEvent.attach(this.setTasksAsCompletedHandler);
+        this.model.deleteTasksEvent.attach(this.deleteTasksHandler);
+
+        return this;
+    },
+
+    addTaskButton: function () {
+        this.addTaskEvent.notify({
+            task: this.$taskTextBox.val()
+        });
+    },
+
+    completeTaskButton: function () {
+        this.completeTaskEvent.notify();
+    },
+
+    deleteTaskButton: function () {
+        this.deleteTaskEvent.notify();
+    },
+
+    selectOrUnselectTask: function () {
+
+        var taskIndex = $(event.target).attr("data-index");
+
+        if ($(event.target).attr('data-task-selected') == 'false') {
+            $(event.target).attr('data-task-selected', true);
+            this.selectTaskEvent.notify({
+                taskIndex: taskIndex
+            });
+        } else {
+            $(event.target).attr('data-task-selected', false);
+            this.unselectTaskEvent.notify({
+                taskIndex: taskIndex
+            });
+        }
+
+    },
+
+    show: function () {
+        this.buildList();
+    },
+
+    buildList: function () {
+        var tasks = this.model.getTasks();
+        var html = "";
+        var $tasksContainer = this.$tasksContainer;
+
+        $tasksContainer.html('');
+
+        var index = 0;
+        for (var task in tasks) {
+
+            if (tasks[task].taskStatus == 'completed') {
+                html += "<div style='color:green;'>";
+            } else {
+                html += "<div>";
+            }
+
+            $tasksContainer.append(html + '<label><input type="checkbox" class="js-task" data-index="" + index + "" data-task-selected="false">' + tasks[task].taskName + '</label></div>');
+
+            index++;
+        }
+
+    },
+
+
+
+    /* -------------------- Handlers From Event Dispatcher ----------------- */
+
+    clearTaskTextBox: function () {
+        this.$taskTextBox.val('');
+    },
+
+    addTask: function () {
+        this.show();
+    },
+
+    setTasksAsCompleted: function () {
+        this.show();
+
+    },
+
+    deleteTasks: function () {
+        this.show();
+
+    }
+
+    /* -------------------- End Handlers From Event Dispatcher ----------------- */
+
+
+};
\ No newline at end of file
diff --git a/MVC/index.html b/MVC/index.html
new file mode 100644
index 0000000000..e503fc7632
--- /dev/null
+++ b/MVC/index.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Javascript MVC</title>
+    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
+</head>
+
+
+<body>
+
+    <div class="js-container">
+
+        <input type="text" class="js-task-textbox">
+        <input type="button" class="js-add-task-button" value="Add Task">
+
+        <div class="js-tasks-container"></div>
+        <!-- end tasks -->
+        <input type="button" class="js-complete-task-button" value="Complete Tasks">
+        <input type="button" class="js-delete-task-button" value="Delete Tasks">
+
+    </div>
+    <!-- end js-container -->
+
+    <script src="EventDispatcher.js"></script>
+    <script src="TaskModel.js"></script>
+    <script src="TaskView.js"></script>
+    <script src="TaskController.js"></script>
+    <script src="App.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file