From 22cdd9bad008cb833f7b514975d86c9058108289 Mon Sep 17 00:00:00 2001
From: offirgolan <offirgolan@gmail.com>
Date: Sat, 17 Dec 2016 11:47:10 +1300
Subject: [PATCH 1/6] Add finished exercises 1-3

---
 01 - JavaScript Drum Kit/index-START.html | 18 ++++++++++++++++
 02 - JS + CSS Clock/index-START.html      | 20 ++++++++++++++++++
 03 - CSS Variables/index-START.html       | 25 +++++++++++++++++++++++
 3 files changed, 63 insertions(+)

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 + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..5eef2dba9a 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + 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 7171607a8b..2d35b08793 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>

From 8e0e875b78a36caa2172aa7d6c1f44d9f82e44ef Mon Sep 17 00:00:00 2001
From: offirgolan <offirgolan@gmail.com>
Date: Mon, 2 Jan 2017 20:47:19 -0800
Subject: [PATCH 2/6] Add exercises 4-6

---
 04 - Array Cardio Day 1/index-START.html | 39 +++++++++++++++++++++++-
 05 - Flex Panel Gallery/index-START.html | 31 ++++++++++++++++++-
 06 - Type Ahead/index-START.html         | 32 +++++++++++++++++++
 3 files changed, 100 insertions(+), 2 deletions(-)

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>

From 3b99bc4f957fe598eed1f64e31e11b8db9bcfbbe Mon Sep 17 00:00:00 2001
From: offirgolan <offirgolan@gmail.com>
Date: Tue, 3 Jan 2017 18:47:30 -0800
Subject: [PATCH 3/6] Exercises 7-10

---
 07 - Array Cardio Day 2/index-START.html      | 15 ++++++-
 08 - Fun with HTML5 Canvas/index-START.html   | 43 +++++++++++++++++++
 .../index-START.html                          | 16 +++++++
 3 files changed, 73 insertions(+), 1 deletion(-)

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>

From f752083547b054ca5de713a673a3b87f89df5c0a Mon Sep 17 00:00:00 2001
From: offirgolan <offirgolan@gmail.com>
Date: Mon, 23 Jan 2017 18:35:50 -0800
Subject: [PATCH 4/6] Exercise 11

---
 11 - Custom Video Player/scripts.js | 100 ++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)

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();

From 5a648b595a922953fe095dd3fda142c387efcb7c Mon Sep 17 00:00:00 2001
From: offirgolan <offirgolan@gmail.com>
Date: Mon, 23 Jan 2017 18:53:19 -0800
Subject: [PATCH 5/6] Exercise 12

---
 12 - Key Sequence Detection/index-START.html | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

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>

From 2e7b49857ace3049587abce232f05a00f95928c5 Mon Sep 17 00:00:00 2001
From: offirgolan <offirgolan@gmail.com>
Date: Thu, 16 Feb 2017 17:01:17 -0800
Subject: [PATCH 6/6] Finished some more

---
 13 - Slide in on Scroll/index-START.html      | 19 ++++++++
 15 - LocalStorage/index-START.html            | 45 ++++++++++++++++++-
 17 - Sort Without Articles/index-START.html   |  8 ++++
 20 - Speech Detection/index-START.html        | 26 +++++++++++
 .../index-START.html                          | 29 +++++++++++-
 5 files changed, 123 insertions(+), 4 deletions(-)

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 d3395cca35..fae44a3575 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>
-