diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..80344d00c5 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,27 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  window.addEventListener("keydown", (e) => {
+    let audio = document.querySelector(`audio[data-key="${e.keyCode}"`)
+    let key = document.querySelector(`.key[data-key="${e.keyCode}"`)
+    if (!audio) return
 
+    // console.log(audio)
+    key.classList.add("playing")
+    audio.currentTime = 0
+    audio.play()
+  })
+
+let keys = document.querySelectorAll(".key")
+keys.forEach((key) => {
+  key.addEventListener("transitionend", returnKeyToIdleStyle)
+})
+
+  function returnKeyToIdleStyle(e) {
+    if (e.propertyName !== "transform") return
+
+    this.classList.remove("playing")
+  }
 </script>
 
 
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 8a4f0d556e..2d1a543820 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 {
+      --spacing: 10px;
+      --blur: 10px;
+      --base: yellow;
+    }
+
+    .hl {
+      color: var(--base);
+    }
+
+    img {
+      background: var(--base);
+      padding: var(--spacing);
+      filter: blur(var(--blur));
+    }
 
     /*
       misc styles, nothing to do with CSS variables
@@ -45,6 +60,18 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    function updateStyling(e) {
+      let unit = this.dataset.sizing || ""
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + unit)
+      console.log("updateStyling", this.value + unit)
+    }
+
+    let inputs = document.querySelectorAll(".controls input")
+
+    inputs.forEach(input => {
+      input.addEventListener("change", updateStyling)
+      input.addEventListener("mousemove", updateStyling)
+    })
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..1c15fccea8 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -32,15 +32,32 @@
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
 
+const old_inventors = inventors.filter(inventor => inventor.year >= 1500 &&
+  inventor.year < 1600)
+console.table(old_inventors)
+
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
 
+let full_names = inventors.map(inventor => `${inventor.first} ${inventor.last}`)
+console.log(full_names)
+
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
 
+let sorted_inventors = inventors.sort((a, b) => {
+  return a.year > b.year ? 1 : -1
+})
+console.table(sorted_inventors)
+
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
 
+  let yearsLived = inventors.reduce((memo, inventor) => {
+    return memo + (inventor.passed - inventor.year)
+  }, 0)
+console.log(yearsLived)
+
     // 5. Sort the inventors by years lived
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index c6509bed02..0a7ac8c4a2 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,9 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -54,8 +58,17 @@
       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;
@@ -68,6 +81,7 @@
 
     .panel.open {
       font-size:40px;
+      flex: 5;
     }
 
   </style>
@@ -102,6 +116,21 @@
   </div>
 
   <script>
+    function toggleOpen() {
+      this.classList.toggle("open")
+    }
+
+function toggleActive(e) {
+  console.log(e)
+  if (e.propertyName === "flex-grow") {
+    this.classList.toggle("open-active")
+  }
+}
+
+let panels = document.querySelectorAll(".panel")
+
+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..bdfa469516 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,56 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+let cities
+
+async function fetchCities() {
+  let response = await fetch(endpoint)
+  let json = await response.json()
+  return json
+}
+
+function searchCitites(wordToSearch, cities) {
+  let regex = new RegExp(wordToSearch, 'gi')
+  return cities.filter(place => place.city.match(regex) ||
+    place.state.match(regex))
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function highlight(word, partToHighlight) {
+  let regexp = new RegExp(partToHighlight, 'gi')
+  return word.replace(regexp, `<span class="hl">${partToHighlight}</span>`)
+}
+
+function displaySuggestions() {
+  let foundCities = searchCitites(this.value, cities)
+  let html = foundCities.map(place => {
+    let highlightedCity = highlight(place.city, this.value)
+    let highlightedState = highlight(place.state, this.value)
+
+    return `
+    <li>
+      <span class="name">${highlightedCity}, ${highlightedState}</span>
+      <span class="population">${numberWithCommas(place.population)}</span>
+    </li>`
+  }).join("")
+  suggestionsElement.innerHTML = html
+}
+
+async function main() {
+  cities = await fetchCities()
+}
+
+main()
+
+let searchInput = document.querySelector(".search")
+searchInput.addEventListener("change", displaySuggestions)
+searchInput.addEventListener("keyup", displaySuggestions)
+
+let suggestionsElement = document.querySelector(".suggestions")
+
 </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..c9ae28850e 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -28,14 +28,29 @@
     // Array.prototype.some() // is at least one person 19 or older?
     // Array.prototype.every() // is everyone 19 or older?
 
+function wasBornIn80s(person) {
+  return person.year >= 1980 && person.year <= 1989
+}
+
+    let somePeopleWerebornIn80s = people.some(person => wasBornIn80s(person))
+console.log(somePeopleWerebornIn80s)
+
+let allPeopleWereBornIn80s = people.every(person => wasBornIn80s(person))
+console.log(allPeopleWereBornIn80s)
+
     // 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
 
+let comment = comments.find(comment => comment.id === 523423)
+console.log(comment)
+
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
 
+let index = comments.findIndex(comment => comment.id === 523423)
+console.log("index:", index)
   </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..d3a025e48c 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,38 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+let canvas = document.querySelector("#draw")
+let ctx = canvas.getContext("2d")
+let isDrawing = false
+let lastX = 0
+let lastY = 0
+
+function draw(x, y) {
+  ctx.beginPath()
+  ctx.moveTo(lastX, lastY)
+  ctx.lineTo(x, y)
+  ctx.stroke()
+}
+
+canvas.addEventListener("mousemove", (e) => {
+  if (!isDrawing) return
+  
+  draw(e.offsetX, e.offsetY)
+  lastX = e.offsetX
+  lastY = e.offsetY
+})
+canvas.addEventListener("mousedown", (e) => {
+  isDrawing = true
+  lastX = e.offsetX
+  lastY = e.offsetY
+})
+canvas.addEventListener("mouseup", () => isDrawing = false)
+
+canvas.width = window.innerWidth
+canvas.height = window.innerHeight
+ctx.strokeStyle = "#BADA55"
+ctx.lineWidth = 5
+
 </script>
 
 <style>
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..5d335b2b04 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -24,6 +24,7 @@
     // Styled
 
     // warning!
+console.warn("HO-HO-HO!")
 
     // Error :|
 
@@ -36,6 +37,9 @@
     // Viewing DOM Elements
 
     // Grouping together
+console.group("hullo")
+console.log("Frodo and Bilbo")
+console.groupEnd()
 
     // counting
 
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index a02071ff00..a4326d0b52 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -99,6 +99,39 @@
   </div>
 
 <script>
+  let checkboxes = document.querySelectorAll("input[type=checkbox]")
+  let lastCheckedBox
+
+  function setLastCheckedBox(checkbox) {
+    console.log("setLastCheckedBox")
+    if (checkbox.checked)
+      lastCheckedBox = checkbox
+  }
+
+  function checkInBetweenBoxes(box1, box2) {
+    let doCheckBoxes = false
+
+    console.log("checkInBetweenBoxes")
+    checkboxes.forEach(checkbox => {
+      if (checkbox === box1 || checkbox === box2)
+        doCheckBoxes = !doCheckBoxes
+
+      if (doCheckBoxes)
+        checkbox.checked = true
+    })
+  }
+
+  function handleCheck(e) {
+    console.log(lastCheckedBox)
+    if (lastCheckedBox && e.shiftKey && this.checked)
+      checkInBetweenBoxes(this, lastCheckedBox)
+
+    setLastCheckedBox(this)
+  }
+
+checkboxes.forEach(checkbox => {
+  checkbox.addEventListener('click', handleCheck)
+})
 </script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..aa76419edb 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,20 @@
+const player = document.querySelector(".player")
+const video = player.querySelector(".viewer")
+const playToggleButton = player.querySelector(".toggle")
+
+function togglePlay() {
+  if (video.paused)
+    video.play()
+  else
+    video.pause()
+}
+
+function updateToggleButton() {
+  const icon = this.paused ? '►' : '❚ ❚'
+  playToggleButton.textContent = icon
+}
+
+video.addEventListener("play", updateToggleButton)
+video.addEventListener("pause", updateToggleButton)
+
+playToggleButton.addEventListener("click", togglePlay)
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..5b7e067913 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,19 @@
 </head>
 <body>
 <script>
+  const KEYPHRASE = "wesbos"
+  const keypresses = []
+
+  window.addEventListener("keyup", (e) => {
+    console.log(e.key)
+    keypresses.push(e.key)
+    if (keypresses.length > KEYPHRASE.length)
+      keypresses.shift()
+    console.log(keypresses)
+
+    if (keypresses.join("") === KEYPHRASE)
+      cornify_add()
+  })
 </script>
 </body>
 </html>
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index f978b7446f..04e1928d62 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -8,6 +8,11 @@
 
   <script>
     // start with strings, numbers and booleans
+let str = "foo"
+let str2 = str
+console.log(str, str2)
+str = "bar"
+console.log(str, str2)
 
     // Let's say we have an array
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
@@ -43,6 +48,9 @@
     };
 
     // and think we make a copy:
+const person2 = {...person}
+person2.age = 99
+console.log(person.age, person2.age)
 
     // how do we take a copy instead?
 
diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index 9bbd250a9b..0afd7af393 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -3,6 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <title>Sort Without Articles</title>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js"
+    ></script>
 </head>
 <body>
 
@@ -44,8 +47,21 @@
   <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'];
+  class Band {
+    static get articleRegex() { return /^(A|An|The) / }
 
+    constructor(name) {
+      this.name = name
+      this.sortName = name.replace(Band.articleRegex, '')
+    }
+  }
+
+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'].map((band) => new Band(band))
+
+console.table(_.sortBy(bands, 'sortName'))
 
 </script>
 
diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index abdf4c91af..4eab19ea94 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,18 @@
     </li>
   </ul>
 <script>
+  const videos = Array.from(document.querySelectorAll('.videos > li'))
+  const videoTimes = videos.map((video) => {
+    return video.dataset.time
+  })
+
+  const totalTime = videoTimes.reduce((sum, time) => {
+    const [minutes, seconds] = time.split(':')
+    sum += parseInt(minutes) * 60
+    sum += parseInt(seconds)
+    return sum
+  }, 0)
+  console.log(totalTime)
 </script>
 </body>
 </html>