diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..57ef66fc07 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,25 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  function playAudio(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
 
+    if (audio) {
+      audio.currentTime = 0; // rewind to the start
+      audio.play();
+      key.classList.add('playing');
+    }
+  }
+
+  function removeClass(e) {
+    if (e.propertyName === 'transform') {
+      this.classList.remove('playing');
+    }
+  }
+
+  window.addEventListener('keydown', playAudio);
+  document.querySelectorAll('.key').forEach(key => key.addEventListener('transitionend', removeClass));
 </script>
 
 
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 2712384201..5eef2dba9a 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -61,12 +61,32 @@
       background:black;
       position: absolute;
       top:50%;
+      transform: rotate(90deg);
+      transform-origin: 100%;
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0, 2.68, 0.58, 1);
     }
 
   </style>
 
   <script>
+    const hourHand = document.querySelector('.hand.hour-hand');
+    const minHand = document.querySelector('.hand.min-hand');
+    const secondHand = document.querySelector('.hand.second-hand');
 
+    function setDate() {
+      const now = new Date();
+      const hours = ((now.getHours() / 24) * 360) + 90;
+      const minutes = ((now.getMinutes() / 60) * 360) + 90;
+      const seconds = ((now.getSeconds() / 60) * 360) + 90;
+
+      hourHand.style.transform = `rotate(${hours}deg)`;
+      minHand.style.transform = `rotate(${minutes}deg)`;
+      secondHand.style.transform = `rotate(${seconds}deg)`;
+    }
+
+    setInterval(setDate, 1000);
+    setDate();
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index ca2b59d077..0990add0aa 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -22,6 +22,22 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <style>
 
+    :root {
+      --spacing: 10px;
+      --blur: 10px;
+      --base: #ffc600;
+    }
+
+    img {
+      padding: var(--spacing);
+      filter: blur(var(--blur));
+      background-color: var(--base);
+    }
+
+    .hl {
+      color: var(--base);
+    }
+
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -48,6 +64,15 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    function updateValue() {
+      const sizing = this.dataset.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + sizing);
+    }
+
+    document.querySelectorAll('.controls input').forEach((input) => {
+      input.addEventListener('change', updateValue);
+      input.addEventListener('mousemove', updateValue);
+    });
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..de277088b8 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,28 +31,65 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const excer1 = inventors.filter(i => i.year >= 1500 && i.year < 1600);
+    console.log(excer1);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const excer2 = inventors.map(i => `${i.first} ${i.last}`);
+    console.log(excer2);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const excer3 = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
+    console.table(excer3);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const excer4 = inventors.reduce((total, i) => {
+      return total += (i.passed - i.year);
+    }, 0);
+    console.log(excer4);
 
     // 5. Sort the inventors by years lived
+    const excer5 = inventors.sort((a, b) => {
+      const aLived = a.passed - a.year;
+      const bLived = b.passed - b.year;
+
+      return aLived > bLived ? -1 : 1;
+    });
+    console.table(excer5);
 
     // 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 excer6 = Array.from(document.querySelectorAll('.mw-category li'))
+                    .map(b => b.textContent)
+                    .filter(b => b.includes('de'));
+  console.log(excer6);
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const excer7 = people.sort((a, b) => {
+      const [aLast] = a.split(',');
+      const [bLast] = b.split(',');
+
+      return aLast.localeCompare(bLast);
+    });
+    console.log(excer7);
 
     // 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 excer8 = data.reduce((hash, str) => {
+      if (hash[str]) {
+        hash[str]++;
+      } else {
+        hash[str] = 1;
+      }
+
+      return hash;
+    }, {});
+    console.log(excer8);
 
   </script>
 </body>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..a74d20a844 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
@@ -41,6 +42,10 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      justify-content: center;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -50,12 +55,22 @@
     .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
     .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
 
+    /* Flex Items */
     .panel > * {
       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.open-active > *:first-child { transform: translateY(0); }
+    .panel > *:last-child { transform: translateY(100%); }
+    .panel.open-active > *:last-child { transform: translateY(0); }
+
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -67,6 +82,7 @@
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
@@ -107,10 +123,23 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel');
 
-  </script>
+    function toggleOpen() {
+      this.classList.toggle('open');
+    }
 
+    function toggleActive(e) {
+      if (e.propertyName.includes('flex')) {
+        this.classList.toggle('open-active');
+      }
+    }
 
+    panels.forEach(panel => {
+      panel.addEventListener('click', toggleOpen);
+      panel.addEventListener('transitionend', toggleActive);
+    });
+  </script>
 
 </body>
 </html>
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..01eab4ae6c 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -16,7 +16,39 @@
   </form>
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+const input = document.querySelector('input');
+const suggestions = document.querySelector('.suggestions');
+const cities = [];
 
+fetch(endpoint).then(data => data.json()).then(data => cities.push(...data));
+
+function queryCities(query) {
+  return cities.filter(c => {
+    const regex = new RegExp(query, 'gi');
+    return c.city.match(regex) || c.state.match(regex);
+  })
+}
+
+function search(query) {
+  const cities = queryCities(query);
+  const regex = new RegExp(query, 'gi');
+
+  return cities.map(city => {
+    const name = `${city.city}, ${city.state}`
+                  .replace(regex, value => `<span class="hl">${value}</span>`);
+    return `
+      <li>
+        <span class="name">${name}</span>
+        <span class="population">${parseInt(city.population, 10).toLocaleString()}</span>
+      </li>
+    `;
+  });
+}
+
+input.addEventListener('keyup', function() {
+  const results = search(this.value);
+  suggestions.innerHTML = results.join('');
+});
 </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..6140948043 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -25,17 +25,30 @@
     ];
 
     // Some and Every Checks
+    const now = new Date();
+
     // Array.prototype.some() // is at least one person 19 or older?
+    const some = people.some(p => now.getFullYear() - p.year >= 19);
+    console.log(some);
+
     // Array.prototype.every() // is everyone 19 or older?
+    const every = people.every(p => now.getFullYear() - p.year >= 19);
+    console.log(every);
 
     // 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 find = comments.find(c => c.id === 823423);
+    console.log(find);
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
-    // delete the comment with the ID of 823423
+    const findIndex = comments.findIndex(c => c.id === 823423);
+    console.log(findIndex);
 
+    // delete the comment with the ID of 823423
+    comments.splice(findIndex, 1);
+    console.log(comments);
   </script>
 </body>
 </html>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..cdf33fc778 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,49 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+  const canvas = document.querySelector('canvas');
+  const context = canvas.getContext('2d');
+
+  let isDrawing = false;
+  let lastX = 0;
+  let lastY = 0;
+  let hue = 0;
+  let incLineWidth = true;
+
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  context.strokeStyle = '#BADA55';
+  context.lineJoin = 'round';
+  context.lineCap = 'round';
+  context.lineWidth = 1;
+
+  function draw(e) {
+    if (!isDrawing) {
+      return;
+    }
+
+    context.beginPath();
+    // start from
+    context.moveTo(lastX, lastY);
+    // go to
+    context.lineTo(e.offsetX, e.offsetY);
+    context.stroke();
+
+    if (context.lineWidth >= 100 || context.lineWidth <= 1) {
+      incLineWidth = !incLineWidth;
+    }
+
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+    hue = (hue + 1) % 360;
+    context.lineWidth = incLineWidth ? context.lineWidth + 1 : context.lineWidth - 1;
+    context.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+  }
+
+  canvas.addEventListener('mousemove', draw);
+  canvas.addEventListener('mousedown', e => [lastX, lastY, isDrawing] = [e.offsetX, e.offsetY, true]);
+  canvas.addEventListener('mouseup', () => isDrawing = false);
+  canvas.addEventListener('mouseleave', () => isDrawing = false);
 </script>
 
 <style>
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index b6a1cc32ec..6909a5c076 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,22 @@
   </div>
 
 <script>
+const checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]'));
+let isShift = false;
+let lastCheckedIdx = -1;
+
+function onClick(e) {
+  const currIndx = checkboxes.indexOf(this);
+
+  if (e.shiftKey && this.checked && lastCheckedIdx > -1) {
+    checkboxes.slice(Math.min(currIndx, lastCheckedIdx), Math.max(currIndx, lastCheckedIdx))
+              .forEach(c => c.checked = true);
+  }
+
+  lastCheckedIdx = currIndx;
+}
+
+checkboxes.forEach(checkbox => checkbox.addEventListener('click', onClick))
 </script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..9ff25cfe22 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,100 @@
+class VideoPlayer {
+  constructor() {
+    const player = document.querySelector('.player');
+
+    this.video = player.querySelector('video');
+    this.playButton = player.querySelector('.player__button.toggle');
+    this.sliders = player.querySelectorAll('.player__slider');
+    this.skips = player.querySelectorAll('[data-skip]');
+    this.progressBar = player.querySelector('.progress');
+    this.progressBarInner = player.querySelector('.progress .progress__filled');
+
+    this.setupEvents();
+  }
+
+  get volume() {
+    return this.video.volume;
+  }
+
+  set volume(value) {
+    this.video.volume = parseFloat(value, 10);
+  }
+
+  get playbackRate() {
+    return this.video.playbackRate;
+  }
+
+  set playbackRate(value) {
+    this.video.playbackRate = parseFloat(value, 10);
+  }
+
+  get progress() {
+    return ((this.video.currentTime / this.video.duration) * 100).toFixed(2);
+  }
+
+  set progress(value) {
+    this.progressBarInner.style.flexBasis = `${this.progress}%`;
+  }
+
+  toggleIcon() {
+    this.playButton.textContent = this.video.paused ? '►' : '❚ ❚';
+  }
+
+  togglePlay() {
+    return this.video.paused ? this.video.play() : this.video.pause();
+  }
+
+  skip(value) {
+    this.video.currentTime += parseFloat(value, 10);
+  }
+
+  scrub(e) {
+    this.video.currentTime = (e.offsetX / this.progressBar.offsetWidth) * this.video.duration;
+    this.progress = this.video.currentTime;
+  }
+
+  init() {
+    this.progress = this.video.currentTime;
+  }
+
+  setupEvents() {
+    // Init
+    this.video.addEventListener('canplay', () => this.init());
+
+    // Icon
+    this.video.addEventListener('play', () => this.toggleIcon());
+    this.video.addEventListener('pause', () => this.toggleIcon());
+
+    // Progress
+    this.video.addEventListener('timeupdate', () => {
+      this.progress = this.video.currentTime;
+    });
+
+    // Scrub
+    let mousedown = false;
+    this.progressBar.addEventListener('click', (e) => this.scrub(e));
+    this.progressBar.addEventListener('mousemove', (e) => mousedown && this.scrub(e));
+    this.progressBar.addEventListener('mousedown', () => mousedown = true);
+    this.progressBar.addEventListener('mouseup', () => mousedown = false);
+
+    // Controls
+    this.video.addEventListener('click', () => this.togglePlay());
+    this.playButton.addEventListener('click', () => this.togglePlay());
+
+    // Skips
+    this.skips.forEach(skip => {
+      skip.addEventListener('click', () => {
+        this.skip(skip.dataset.skip);
+      });
+    });
+
+    // Sliders
+    this.sliders.forEach(slider => {
+      let fn = () => this[slider.name] = slider.value;
+      slider.addEventListener('mousemove', fn);
+      slider.addEventListener('change', fn);
+    });
+  }
+}
+
+const player = new VideoPlayer();
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..0b60295464 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,20 @@
 </head>
 <body>
 <script>
+  const keys = [];
+  const code = 'unicorn';
+
+  window.addEventListener('keyup', (e) => {
+    keys.push(e.key);
+
+    if (keys.length > code.length) {
+      keys.shift();
+    }
+
+    if (keys.join('') === code) {
+      cornify_add();
+    }
+  })
 </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..c714bf857b 100644
--- 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 checkSlides(e) {
+      images.forEach(img => {
+        // half way through the image
+        const slideInAt = (window.scrollY + window.innerHeight) - img.height / 2;
+        // bottom of the image
+        const imageBottom = img.offsetTop + img.height;
+        const isHalfShown = slideInAt > img.offsetTop;
+        const isNotScrolledPast = window.scrollY < imageBottom;
+        if (isHalfShown && isNotScrolledPast) {
+          img.classList.add('active');
+        } else {
+          img.classList.remove('active');
+        }
+      });
+    }
+
+    window.addEventListener('scroll', debounce(checkSlides));
   </script>
 
   <style>
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..98ab171776 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -28,11 +28,52 @@ <h2>LOCAL TAPAS</h2>
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const LOCAL_STORAGE_KEY = 'items';
+  const localStorageItems = localStorage.getItem(LOCAL_STORAGE_KEY);
+  const items = localStorageItems ? JSON.parse(localStorageItems) : [];
+
+  function saveToLocalStorage(items) {
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(items));
+  }
+
+  function addItem(e) {
+    e.preventDefault();
+
+    const input = this.querySelector('input[name=item]');
+
+    items.push({ text: input.value, done: false })
+    saveToLocalStorage(items);
+    populatePlates(items, itemsList);
+
+    // Reset the form
+    this.reset();
+  }
+
+  function checkItem(e) {
+    const index = e.target.dataset.index;
+    items[index].done = e.target.checked
+    saveToLocalStorage(items);
+  }
+
+  function populatePlates(plates = [], list) {
+    list.innerHTML = plates.map((plate, i) => {
+      return `
+        <li>
+          <input type="checkbox" id="item-${i}" data-index=${i} ${plate.done ? 'checked' : ''}/>
+          <label for="item-${i}">${plate.text}</label>
+        </li>
+      `;
+    }).join('')
+  }
+
+
+  populatePlates(items, itemsList);
+
+  addItems.addEventListener('submit', addItem);
+  itemsList.addEventListener('change', checkItem);
 
 </script>
 
 
 </body>
 </html>
-
diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..112fa568a6 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -44,7 +44,15 @@
 
 <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'];
+const list = document.querySelector('#bands');
 
+function strip(str) {
+  return str.replace(/^(a |the |an )/i, '').trim();
+}
+
+const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
+
+list.innerHTML = sortedBands.map(b => `<li>${b}</li>`).join('')
 
 </script>
 
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index fa472df74e..ca5902e658 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -12,6 +12,32 @@
 <script>
   window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
+  const recognition = new SpeechRecognition();
+  const words = document.querySelector('.words');
+  let p = document.createElement('p');
+
+  recognition.interimResults = true;
+  words.appendChild(p);
+
+  recognition.addEventListener('result', e => {
+    const transcript = Array.from(e.results)
+      .map(result => result[0])
+      .map(result => result.transcript)
+      .join('');
+
+      const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
+
+      p.textContent = poopScript;
+
+      if (e.results[0].isFinal) {
+        p = document.createElement('p');
+        words.appendChild(p);
+      }
+  });
+
+  recognition.addEventListener('end', recognition.start);
+
+  recognition.start();
 
 </script>
 
diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..264aa4a24e 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -26,8 +26,33 @@
     </div>
 
   <script>
-    // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+    const triggers = document.querySelectorAll('a');
+    const highlight = document.createElement('span');
+
+    highlight.classList.add('highlight');
+    document.querySelector('body').appendChild(highlight);
+
+    function follow(e) {
+      const _clientRect = this.getBoundingClientRect();
+      const clientRect = {
+        width: _clientRect.width,
+        height: _clientRect.height,
+        top: _clientRect.top + window.scrollY,
+        left: _clientRect.left + window.scrollX
+      };
+
+      highlight.style.width = `${clientRect.width}px`;
+      highlight.style.height = `${clientRect.height}px`;
+      highlight.style.transform = `translate(${clientRect.left}px, ${clientRect.top}px)`;
+      highlight.style.opacity = 1;
+    }
+
+    function unfollow() {
+      highlight.style.opacity = 0;
+    }
+
+    triggers.forEach(t => t.addEventListener('mouseenter', follow))
+    triggers.forEach(t => t.addEventListener('mouseleave', unfollow))
   </script>
 </body>
 </html>
-