diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..c8701e2e6a 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,24 @@
   <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;
+    audio.currentTime = 0;
+    audio.play();
 
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+    key.classList.add('playing');
+  }
+
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') return;
+    this.classList.remove('playing');
+  }
+
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+  window.addEventListener("keyup", playSound);
 </script>
 
 
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..72d5395db3 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,44 @@
       background:black;
       position: absolute;
       top:50%;
+      right:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      /*transition: 0.05s;*/
+      /*transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);*/
+    }
+
+    .hour-hand {
+      width: 20%;
+    }
+
+    .min-hand {
+      width: 50%;
+    }
+
+    .second-hand{
+      width: 40%;
     }
 
   </style>
 
   <script>
+  const hourhand = document.querySelector('.hour-hand');
+  const minutehand = document.querySelector('.min-hand');
+  const secondhand = document.querySelector('.second-hand');
+
+  function updateTime() {
+    const now = new Date();
+    const hour = now.getHours();
+    const minute = now.getMinutes();
+    const second = now.getSeconds();
+
+    secondhand.style.transform = `rotate(${90 + second * 6}deg)`;
+    minutehand.style.transform = `rotate(${90 + minute * 6}deg)`;
+    hourhand.style.transform = `rotate(${90 + hour * 30}deg)`;
+  }
 
+  setInterval(updateTime, 1000);
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index ca2b59d077..03a0d3f1d4 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,16 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+  var inputs = document.querySelectorAll(".controls input");
+
+  function handleUpdate() {
+    var suffix = this.dataset.sizing || '';
+    var val = this.value;
+    document.documentElement.style.setProperty(`--${this.name}`, val + suffix);
+  }
+
+  inputs.forEach(input => input.addEventListener("input", 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..303d126cf2 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,28 +31,74 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    function checkFifteen(inventor) {
+      return (inventor.year >= 1500 && inventor.year < 1600);
+    }
+    const fifteen = inventors.filter(checkFifteen);
+    console.log(fifteen);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    function mapName(inventor) {
+      return inventor.first + " " + inventor.last;
+    }
+    const inventorNames = inventors.map(mapName);
+    console.log(inventorNames);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    function compareBirth(a, b) {
+      return a.year - b.year;
+    }
+    const sortedBirth = inventors.sort(compareBirth);
+    console.log(sortedBirth);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    function reduceYears(sum, inventor) {
+      return sum + (inventor.passed - inventor.year);
+    }
+    const totalYears = inventors.reduce(reduceYears, 0);
+    console.log(totalYears);
 
     // 5. Sort the inventors by years lived
+    function compareYears(a, b) {
+      return (a.passed - a.year) - (b.passed - b.year);
+    }
+    const yearsLived = inventors.sort(compareYears);
+    console.log(yearsLived);
 
     // 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 wrapper = document.querySelector(".mw-category");    
+    // const links = Array.prototype.slice.call(wrapper.querySelectorAll("a"));
+    // const boulevardNames = links.map(link => link.textContent);
+    // const de = boulevardNames.filter(name => name.includes("de"));
+    // console.log(de);
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    function compareLast(a, b) {
+      const lasta = a.split(", ")[0];
+      const lastb = b.split(", ")[0];
+      return lasta.localeCompare(lastb);
+    }
+    const sortedLast = people.sort(compareLast);
+    console.log(sortedLast);
 
     // 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' ];
+    function sumWords(obj, word) {
+      if (obj[word] == null) {
+        obj[word] = 1;
+      } else {
+        obj[word] += 1;
+      }
+      return obj;
+    }
+    const sumInstances = data.reduce(sumWords, {});
+    console.log(sumInstances);
 
   </script>
 </body>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..74fd170a2f 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;
+      display: flex;
+      flex-direction: column;
+      /*justify-content: center;*/
     }
 
 
@@ -54,6 +59,26 @@
       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.open-active > *:first-child {
+      transform: translateY(0);
+    }
+
+    .panel.open-active > *:last-child {
+      transform: translateY(0);
     }
 
     .panel p {
@@ -68,6 +93,7 @@
 
     .panel.open {
       font-size:40px;
+      flex: 5;
     }
 
     .cta {
@@ -107,7 +133,27 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll(".panel");
+    
+    function close(p) {
+      if (p != this) {
+        p.classList.toggle("open", false);
+      }
+    }
+
+    function toggleOpen() {
+      panels.forEach(close, this);
+      this.classList.toggle("open");
+    }
+
+    function toggleActive(e) {
+      if (e.propertyName == "flex-grow") {
+        this.classList.toggle("open-active");
+      }
+    }
 
+    panels.forEach(panel => panel.addEventListener("click", toggleOpen));
+    panels.forEach(panel => panel.addEventListener("transitionend", toggleActive));
   </script>
 
 
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..3c941a7de5 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,47 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+var request = new XMLHttpRequest();
+var cities = [];
+request.onreadystatechange = function () {
+  if (this.readyState == 4 && this.status == 200) {
+    var json = JSON.parse(this.responseText);
+    json.forEach(item => cities.push(item));
+  }
+}
+request.open("GET", endpoint, true);
+request.send();
+
+function matchWord(subtext) {
+  subtext = subtext.toLowerCase();
+  return cities.filter(c => c.city.toLowerCase().includes(subtext) || c.state.toLowerCase().includes(subtext));
+}
+
+function updateMatches(e) {
+  var updatedCities = matchWord(this.value);
+
+  while (suggestions.firstChild) {
+    suggestions.removeChild(suggestions.firstChild);
+  }
+
+  const updatedHTML = updatedCities.map(c => {
+    const regex = new RegExp(this.value, "gi");
+    const cityName = c.city.replace(regex, `<span class="hl">${this.value}</span>`)
+    const stateName = c.state.replace(regex, `<span class="hl">${this.value}</span>`)
+    return `
+    <li>
+      <span class="name">${cityName}, ${stateName}</span>
+      <span class="population">${c.population}</span>
+    </li>
+    `;
+  }).join('');
+  suggestions.innerHTML = updatedHTML;
+}
+
+var input = document.querySelector(".search");
+var suggestions = document.querySelector(".suggestions");
+input.addEventListener("keyup", updateMatches);
+
 </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..2ab19e4e1b 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -27,14 +27,26 @@
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
     // Array.prototype.every() // is everyone 19 or older?
+    function nineteen(person) {
+      const y = (new Date()).getFullYear();
+      const age = y - person.year;
+      return age >= 19;
+    }
+    console.log(people.some(nineteen));
+    console.log(people.every(nineteen));
 
     // 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
+    function findID(comment) {
+      return comment.id == this;
+    }
+    console.log(comments.find(findID, 823423));
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    console.log(comments.findIndex(findID, 823423));
 
   </script>
 </body>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..dc992f5d4e 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -6,7 +6,45 @@
 </head>
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
+
 <script>
+const canvas = document.querySelector('#draw');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+ctx.strokeStyle = '#BADA55';
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+
+let isDrawing = false;
+let lastX = null;
+let lastY = null;
+let hue = 0;
+let direction = true;
+
+function draw(e) {
+  if (!isDrawing) return;
+  ctx.beginPath();
+  if (!lastX) lastX = e.offsetX;
+  if (!lastY) lastY = e.offsetY;
+  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+  ctx.moveTo(lastX, lastY);
+  ctx.lineTo(e.offsetX, e.offsetY);
+  ctx.stroke();
+  lastX = e.offsetX;
+  lastY = e.offsetY;
+  hue++;
+  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) direction = !direction;
+  if (direction) ctx.lineWidth++;
+  else ctx.lineWidth--;
+}
+
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mousedown', () => isDrawing = true);
+canvas.addEventListener('mouseup', () => {
+  isDrawing = false; lastX = null; lastY = null;});
+canvas.addEventListener('mouseout', () => {
+  isDrawing = false; lastX = null; lastY = null;});
 </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..8147fe7b15 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,42 @@
   </div>
 
 <script>
+const checkboxes = Array.prototype.slice.call(document.querySelectorAll("[type=checkbox]"));
+let shiftDown = false;
+let lastChecked = null;
+
+function checkBetween() {
+  if (!shiftDown) {
+    lastChecked = checkboxes.indexOf(this);
+    return;
+  }
+  else if (lastChecked == null) {
+    lastChecked = checkboxes.indexOf(this);
+    return;
+  }
+
+  let index = checkboxes.indexOf(this);
+  let toCheck = this.checked;
+
+  for (i = Math.min(lastChecked, index); i <= Math.max(lastChecked, index); i++) {
+    checkboxes[i].checked = toCheck;
+  }
+
+  lastChecked = null;
+}
+
+checkboxes.forEach(box => box.addEventListener("click", checkBetween));
+
+function shiftTrue(e) {
+  if (e.key == "Shift") shiftDown = true;
+}
+
+function shiftFalse(e) {
+  if (e.key == "Shift") shiftDown = false;
+}
+
+window.addEventListener("keydown", shiftTrue);
+window.addEventListener("keyup", shiftFalse);
 </script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..09f69b6d35 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,58 @@
+const player = document.querySelector('.player');
+const video = player.querySelector('.viewer');
+const progress = player.querySelector('.progress');
+const progressBar = player.querySelector('.progress__filled');
+const toggle = player.querySelector('.toggle');
+const skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+
+function togglePlay() {
+	if (video.paused) {
+		video.play();
+	}
+	else {
+		video.pause();
+	}
+}
+
+function updateButton() {
+	const icon = this.paused ? '►' : '❚ ❚';
+	toggle.innerHTML = icon;
+}
+
+function updateProgress() {
+	let currentTime = video.currentTime;
+	let duration = video.duration;
+	let percent = (currentTime / duration) * 100;
+	progressBar.style.flexBasis = `${percent}%`;
+}
+
+function skipButton() {
+	let amt = parseInt(this.dataset.skip);
+	video.currentTime += amt;
+}
+
+function updateRange() {
+	video[this.name] = this.value;
+}
+
+function scrub(e) {
+	let newTime = (e.offsetX / progress.offsetWidth) * video.duration;
+	video.currentTime = newTime;
+}
+
+toggle.addEventListener("click", togglePlay);
+video.addEventListener("click", togglePlay);
+video.addEventListener("timeupdate", updateProgress);
+video.addEventListener("play", updateButton);
+video.addEventListener("pause", updateButton);
+skipButtons.forEach(button => button.addEventListener("click", skipButton));
+ranges.forEach(range => {
+	range.addEventListener("change", updateRange)
+	range.addEventListener("mousemove", updateRange);
+	});
+let mousedown = false;
+progress.addEventListener("click", scrub);
+progress.addEventListener("mousemove", e => mousedown && scrub(e));
+progress.addEventListener("mousedown", () => mousedown = true);
+progress.addEventListener("mouseup", () => mousedown = false);
\ No newline at end of file
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..e63d2be228 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,18 @@
 </head>
 <body>
 <script>
+const secretCode = 'michael';
+let seq = [];
+function updateSeq(e) {
+	let key = e.key;
+	seq.push(key);
+	seq = seq.slice(-secretCode.length);
+	if (seq.join('') == secretCode) {
+		cornify_add();
+	}
+}
+
+window.addEventListener("keyup", updateSeq);
 </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..a0025c673e 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -35,9 +35,6 @@ <h1>Slide in on Scroll</h1>
     <img src="http://unsplash.it/400/400" class="align-right slide-in">
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
-
-
 
 
   </div>
@@ -58,6 +55,35 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    function checkSlide(e) {
+      let windowTop = window.scrollY;
+      let windowBot = windowTop + window.innerHeight;
+      images.forEach(image => {
+        let imageTop = image.offsetTop + image.height / 3;
+        let imageBot = imageTop + image.height * 2 / 3;
+        let seeTop = imageTop > windowTop && imageTop < windowBot;
+        let seeBot = imageBot > windowTop && imageBot < windowBot;
+        if (seeTop || seeBot) {
+          image.classList.add('active');
+        }
+        else {
+          image.classList.remove('active');
+        }
+      });
+    }
+
+    let ticking = false;
+    const images = document.querySelectorAll('.slide-in');
+    window.addEventListener('scroll', e => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          checkSlide(e);
+          ticking = false;
+        });
+      }
+      ticking = true;
+    });
+
   </script>
 
   <style>
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..b1721c596d 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -23,12 +23,54 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+    <button id="delete">Delete All</button>
   </div>
 
 <script>
-  const addItems = document.querySelector('.add-items');
-  const itemsList = document.querySelector('.plates');
-  const items = [];
+  var addItems = document.querySelector('.add-items');
+  var itemsList = document.querySelector('.plates');
+  var items = JSON.parse(localStorage.getItem('items')) || [];
+  var deleteBtn = document.getElementById('delete');
+
+  function submitItem(e) {
+    e.preventDefault();
+    const txt = this.querySelector('[name=item]').value;
+    const item = {
+      text: txt,
+      done: false
+    };
+    this.reset();
+    items.push(item);
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList);
+  }
+
+  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 toggleItem(e) {
+    if (!e.target.matches('input')) return;
+    items[e.target.dataset.index].done = !items[e.target.dataset.index].done;
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList);
+  }
+
+  addItems.addEventListener('submit', submitItem);
+  populateList(items, itemsList);
+  itemsList.addEventListener('click', toggleItem);
+  deleteBtn.addEventListener('click', () => {
+    localStorage.removeItem('items');
+    items = [];
+    populateList(items, itemsList);
+  });
 
 </script>
 
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
index 58a9bba861..89dcf5df3e 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -31,6 +31,33 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+  const hero = document.querySelector('.hero');
+  const text = hero.querySelector('h1');
+  const walk = 100;
+  console.dir(text);
+
+  function shadow(e) {
+    var width = hero.offsetWidth;
+    var height = hero.offsetHeight;
+    var x = e.offsetX;
+    var y = e.offsetY;
+
+    if (e.target !== this) {
+      x += e.target.offsetLeft;
+      y += e.target.offsetTop;
+    }
+
+    var xWalk = Math.round(walk * x / width - walk / 2);
+    var yWalk = Math.round(walk * y / height - walk / 2);
+
+    text.style.textShadow = `
+      ${xWalk}px ${yWalk}px 0 rgba(255,255,0,1),
+      ${-xWalk}px ${-yWalk}px 0 rgba(0,0,255,1)
+    `;
+  }
+
+  hero.addEventListener('mousemove', shadow);
+
 </script>
 </body>
 </html>
diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..9d358bece8 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -43,8 +43,28 @@
   <ul id="bands"></ul>
 
 <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 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 articles = ['A ', 'An ', 'The '];
 
+  function sortBands(a, b) {
+    var newa = a;
+    var newb = b;
+    articles.forEach(article => {
+      if (a.startsWith(article)) {
+        newa = a.slice(article.length);
+      }
+      if (b.startsWith(article)) {
+        newb = b.slice(article.length);
+      }
+    });
+    return newa.localeCompare(newb);
+  }
+
+  const sorted = bands.sort(sortBands);
+  const bandsHTML = document.querySelector('#bands');
+  bandsHTML.innerHTML = sorted.map(band => {
+    return `<li>${band}</li>`;
+  }).join('');
 
 </script>
 
diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index 3eaee0f3ef..19f2f654ff 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,16 @@
     </li>
 
 <script>
+  const times = Array.from(document.querySelectorAll('[data-time]'), (video) => video.dataset.time);
+  const timeSec = times.map((time) => {
+    var minSec = time.split(':').map((boy) => parseInt(boy, '10'));
+    return (minSec[0] * 60) + minSec[1];
+  });
+  const total = timeSec.reduce((a, b) => a + b);
+  var hours = Math.floor(total / 3600);
+  var minutes = Math.floor((total % 3600) / 60);
+  var seconds = ((total % 3600) % 60) % 60;
+  console.log(`${hours}:${minutes}:${seconds}`);
 </script>
 </body>
 </html>
diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html
index d4ffc4dc2a..30ce2bd395 100755
--- a/19 - Webcam Fun/index.html	
+++ b/19 - Webcam Fun/index.html	
@@ -10,7 +10,11 @@
   <div class="photobooth">
     <div class="controls">
       <button onClick="takePhoto()">Take Photo</button>
-<!--       <div class="rgb">
+      <p><input type="checkbox" id="redEffect">Red Effect</p>
+      <p><input type="checkbox" id="rgbSplit">RGB Split</p>
+      <p><input type="checkbox" id="ghostEffect">Ghost Effect</p>
+      <p><input type="checkbox" id="greenScreen">Green Screen</p>
+      <div class="rgb">
         <label for="rmin">Red Min:</label>
         <input type="range" min=0 max=255 name="rmin">
         <label for="rmax">Red Max:</label>
@@ -29,7 +33,7 @@
         <input type="range" min=0 max=255 name="bmin">
         <label for="bmax">Blue Max:</label>
         <input type="range" min=0 max=255 name="bmax">
-      </div> -->
+      </div>
     </div>
 
     <canvas class="photo"></canvas>
diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js
index 00355f5a9c..c8be9586b8 100644
--- a/19 - Webcam Fun/scripts.js	
+++ b/19 - Webcam Fun/scripts.js	
@@ -3,3 +3,110 @@ const canvas = document.querySelector('.photo');
 const ctx = canvas.getContext('2d');
 const strip = document.querySelector('.strip');
 const snap = document.querySelector('.snap');
+const filters = document.querySelectorAll('[type=checkbox]');
+
+function getVideo() {
+  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+    .then(localMediaStream => {
+      console.log(localMediaStream);
+      video.src = window.URL.createObjectURL(localMediaStream);
+      video.play();
+    })
+    .catch(err => {
+      console.error(`OH NO!!!`, err);
+    });
+}
+
+function paintToCanvas() {
+  const width = video.videoWidth;
+  const height = video.videoHeight;
+  canvas.width = width;
+  canvas.height = height;
+
+  setInterval(() => {
+    ctx.drawImage(video, 0, 0, width, height);
+    let pixels = ctx.getImageData(0, 0, width, height);
+    ctx.globalAlpha = 1.0;
+    filters.forEach(filter => {
+    	if (!filter.checked) return;
+    	switch (filter.id) {
+    		case 'redEffect':
+    			pixels = redEffect(pixels);
+    			break;
+    		case 'rgbSplit':
+    			pixels = rgbSplit(pixels);
+    			break;
+    		case 'ghostEffect':
+    			ctx.globalAlpha = 0.1;
+    			break;
+    		case 'greenScreen':
+    			pixels = greenScreen(pixels);
+    			break;
+    		default:
+    			throw 'Unknown filter';
+    	}
+    });
+    ctx.putImageData(pixels, 0, 0);
+  }, 16);
+}
+
+function takePhoto() {
+	snap.currentTime = 0;
+	snap.play();
+
+	var data = canvas.toDataURL('image/jpeg');
+	var link = document.createElement('a');
+	link.href = data;
+	// link.setAttribute('download', 'handsome');
+	link.setAttribute('target', '_blank');
+  link.innerHTML = `<img src="${data}" alt="Handsome Man" />`;
+  strip.insertBefore(link, strip.firstChild);
+}
+
+function redEffect(pixels) {
+  for(let i = 0; i < pixels.data.length; i += 4) {
+    pixels.data[i + 0] = pixels.data[i + 0] + 200; // RED
+    pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN
+    pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue
+  }
+  return pixels;
+}
+
+function rgbSplit(pixels) {
+  for(let i = 0; i < pixels.data.length; i+=4) {
+    pixels.data[i - 150] = pixels.data[i + 0]; // RED
+    pixels.data[i + 500] = pixels.data[i + 1]; // GREEN
+    pixels.data[i - 550] = pixels.data[i + 2]; // Blue
+  }
+  return pixels;
+}
+
+function greenScreen(pixels) {
+  const levels = {};
+
+  document.querySelectorAll('.rgb input').forEach((input) => {
+    levels[input.name] = input.value;
+  });
+
+  for (i = 0; i < pixels.data.length; i = i + 4) {
+    red = pixels.data[i + 0];
+    green = pixels.data[i + 1];
+    blue = pixels.data[i + 2];
+    alpha = pixels.data[i + 3];
+
+    if (red >= levels.rmin
+      && green >= levels.gmin
+      && blue >= levels.bmin
+      && red <= levels.rmax
+      && green <= levels.gmax
+      && blue <= levels.bmax) {
+      // take it out!
+      pixels.data[i + 3] = 0;
+    }
+  }
+
+  return pixels;
+}
+
+getVideo();
+video.addEventListener('canplay', paintToCanvas);
diff --git a/20 - Speech Detection/index-FINISHED.html b/20 - Speech Detection/index-FINISHED.html
index 413c3eeaaf..03e775247b 100644
--- a/20 - Speech Detection/index-FINISHED.html	
+++ b/20 - Speech Detection/index-FINISHED.html	
@@ -31,7 +31,9 @@
       if (e.results[0].isFinal) {
         p = document.createElement('p');
         words.appendChild(p);
+        console.count('New p element');
       }
+      console.log(transcript);
   });
 
   recognition.addEventListener('end', recognition.start);
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index d3395cca35..b0cf070b8e 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -5,12 +5,58 @@
   <title>Speech Detection</title>
 </head>
 <body>
-
+  <h1 id="status">Ready</h1>
+  <button type="button" id="start">Start</button> 
   <div class="words" contenteditable>
   </div>
 
 <script>
   window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+  const recognition = new SpeechRecognition();
+  recognition.interimResults = true;
+  recognition.lang = 'en-US';
+  recognition.maxAlternatives = 1;
+
+  const status = document.querySelector('#status');
+  const start = document.querySelector('#start');
+  const words = document.querySelector('.words');
+  const speech = words.querySelector('#speech');
+  let p = document.createElement('p');
+  words.appendChild(p);
+
+  start.addEventListener('click', () => {
+    if (start.classList.contains('disable')) {
+      start.classList.remove('disable');
+      start.innerHTML = 'Start';
+      status.innerHTML = 'Ready';
+      recognition.stop();
+      return;
+    }
+    start.classList.add('disable');
+    start.innerHTML = 'Stop';
+    status.innerHTML = 'Receiving';
+    recognition.start();
+  });
+
+  // recognition.addEventListener('speechstart', () => {
+  //   speech.innerHTML = '';
+  //   spoken = '';
+  // });
+
+  recognition.addEventListener('result', (e) => {
+    var newWords = Array.from(e.results).map(word => word[0].transcript).join('');
+    p.textContent = newWords;
+    if (e.results[0].isFinal) {
+      p = document.createElement('p');
+      words.appendChild(p);
+    }
+  });
+
+  recognition.addEventListener('end', () => {
+    if (start.classList.contains('disable')) {
+      recognition.start();
+    }
+  });
 
 
 </script>
@@ -28,6 +74,20 @@
       font-size: 20px;
     }
 
+    button {
+      opacity: 1.0;
+      cursor: allowed;
+      background-color: purple;
+      border: none;
+      color: white;
+      text-align: center;
+      padding: 10px;
+    }
+
+    button.disable {
+      background-color: red;
+    }
+
     .words {
       max-width:500px;
       margin:50px auto;
diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html
index a1b981b1cd..73be0d3800 100644
--- a/21 - Geolocation/index-START.html	
+++ b/21 - Geolocation/index-START.html	
@@ -57,6 +57,21 @@ <h1 class="speed">
     /*Compass: https://thenounproject.com/search/?q=compass&i=592352*/
   </style>
   <script>
+  const arrow = document.querySelector('.arrow');
+  const speed = document.querySelector('.speed-value');
+
+  function updateCompass(e) {
+    console.dir(e);
+    // debugger;
+    speed.innerHTML = e.coords.speed;
+    arrow.style.transform = `rotate(${e.coords.heading}deg)`;
+  }
+
+  if (navigator.geolocation) {
+    navigator.geolocation.watchPosition(updateCompass);
+  } else {
+    console.log('Unable to watch location');
+  }
   </script>
 </body>
 </html>
diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..b153c95bdc 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -27,6 +27,23 @@
 
   <script>
     // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+    const triggers = document.querySelectorAll('a');
+    const highlight = document.createElement('span');
+    highlight.classList.add('highlight');
+    document.body.append(highlight);
+    var x = 0;
+    var y = 0;
+
+    function highlightLink() {
+      const coords = this.getBoundingClientRect();
+      console.dir(coords);
+      highlight.style.width = `${coords.width}px`;
+      highlight.style.height = `${coords.height}px`;
+      highlight.style.transform = `translate(${coords.left + window.scrollX}px,
+       ${coords.top + window.scrollY}px)`;
+    }
+
+    triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
   </script>
 </body>
 </html>
diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e890008d36..58d72862c8 100644
--- a/23 - Speech Synthesis/index-START.html	
+++ b/23 - Speech Synthesis/index-START.html	
@@ -30,11 +30,49 @@ <h1>The Voiceinator 5000</h1>
 
 <script>
   const msg = new SpeechSynthesisUtterance();
-  let voices = [];
+  var voices = null;
   const voicesDropdown = document.querySelector('[name="voice"]');
   const options = document.querySelectorAll('[type="range"], [name="text"]');
   const speakButton = document.querySelector('#speak');
   const stopButton = document.querySelector('#stop');
+
+
+  function populateVoices() {
+    voices = window.speechSynthesis.getVoices();
+
+    for (i = 0; i < voices.length; i++) {
+      var option = document.createElement('option');
+      option.textContent = `${voices[i].name} (${voices[i].lang})`;
+      voicesDropdown.appendChild(option);
+    }
+  }
+
+  function setVoice() {
+    var voice = voices[this.selectedIndex - 1];
+    msg.voice = voice;
+    stop();
+  }
+
+  function updateRange() {
+    msg[this.name] = this.value;
+    stop();
+  }
+
+  function speak() {
+    stop();
+    msg.text = options[2].value;
+    window.speechSynthesis.speak(msg);
+  }
+
+  function stop() {
+    window.speechSynthesis.cancel();
+  }
+
+  speechSynthesis.addEventListener('voiceschanged', populateVoices);
+  voicesDropdown.addEventListener('change', setVoice);
+  options.forEach(range => range.addEventListener('change', updateRange));
+  speakButton.addEventListener('click', speak);
+  stopButton.addEventListener('click', stop);
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..0f66eb3e53 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -54,7 +54,22 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
-
+  const nav = document.querySelector('#main');
+  const topOfNav = nav.offsetTop;
+
+  function setNav() {
+    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');
+    }
+    return;
+  }
+
+  window.addEventListener('scroll', setNav);
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index c6d59a31b3..c1eb5656a6 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -56,7 +56,7 @@ nav ul {
 }
 
 nav li {
-  flex:1;
+  flex: 1;
   text-align: center;
   display: flex;
   justify-content: center;
@@ -64,7 +64,8 @@ nav li {
 }
 
 li.logo {
-  max-width:0;
+  /*max-width:0;*/
+  flex: 0 1 0;
   overflow: hidden;
   background: white;
   transition: all .5s;
@@ -72,6 +73,11 @@ li.logo {
   font-size: 30px;
 }
 
+.fixed-nav li.logo {
+  /*max-width: 500px;*/
+  flex: 1;
+}
+
 li.logo a {
   color:black;
 }
@@ -84,3 +90,7 @@ nav a {
   transition:all 0.2s;
   text-transform: uppercase;
 }
+
+.fixed-nav nav {
+  position: fixed;
+}
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..1c6dbfcc20 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
@@ -39,7 +39,25 @@
 
 <button></button>
 <script>
+  const divs = document.querySelectorAll('div');
+  const button = document.querySelector('button');
 
+  function logText(e) {
+    console.log(this.classList.value);
+    // e.stopPropagation(); // stop bubbling!
+    // console.log(this);
+  }
+
+  divs.forEach(div => div.addEventListener('click', logText, {
+    capture: false,
+    once: true
+  }));
+
+  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..d9d7809e53 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -143,7 +143,7 @@ <h2>Cool</h2>
     background: #fff;
     border-radius: 4px;
     box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
-    transition:all 0.3s, opacity 0.1s, translate 0.2s;
+    transition:all 0.3s, opacity 0.3s, translate 0.05s;
     transform-origin: 50% 0%;
     display: flex;
     justify-content: center;
@@ -208,6 +208,36 @@ <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');
+    background.classList.add('open');
+    setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
+    const dropdown = this.querySelector('.dropdown');
+    const dropdownCoords = dropdown.getBoundingClientRect();
+    const navCoords = nav.getBoundingClientRect();
+    const coords = {
+      height: dropdownCoords.height,
+      width: dropdownCoords.width,
+      left: dropdownCoords.left - navCoords.left,
+      top: dropdownCoords.top - navCoords.top
+    };
+    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-active', 'trigger-enter');
+    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..52e5c01601 100644
--- a/27 - Click and Drag/index-START.html	
+++ b/27 - Click and Drag/index-START.html	
@@ -35,6 +35,36 @@
   </div>
 
 <script>
+  const slider = document.querySelector('.items');
+  let isDown = false;
+  let startX;
+  let scrollLeft;
+
+  slider.addEventListener('mousedown', (e) => {
+    isDown = true;
+    slider.classList.add('active');
+    console.dir(e);
+    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) * 3;
+    slider.scrollLeft = scrollLeft - walk;
+  });
 </script>
 
   </body>
diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html
index c4cbd4259a..7c58ca3a5d 100644
--- a/28 - Video Speed Controller/index-START.html	
+++ b/28 - Video Speed Controller/index-START.html	
@@ -15,6 +15,25 @@
   </div>
 
 <script>
+	const speed = document.querySelector('.speed');
+	const speedBar = speed.querySelector('.speed-bar');
+	const video = document.querySelector('.flex');
+	let mouseDown = false;
+
+	speed.addEventListener('mousedown', () => mouseDown = true);
+	speed.addEventListener('mouseup', () => mouseDown = false);
+	speed.addEventListener('mouseleave', () => mouseDown = false);
+	speed.addEventListener('mousemove', (e) => {
+		e.preventDefault();
+		if (!mouseDown) return;
+		const percent = Math.round(100 * e.offsetY / speed.offsetHeight);
+		speedBar.style.setProperty('height', `${percent}%`);
+		const min = 0.4;
+		const max = 4;
+		const speedUp = (percent / 100) * (max - min) + min;
+		speedBar.textContent = `${speedUp.toFixed(2)}x`;
+		video.playbackRate = speedUp;
+	});
 </script>
 </body>
 </html>