diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..1b01f50f70 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 play($e) {
+    const audio = document.querySelector(`audio[data-key="${ $e.keyCode }"]`),
+          key = document.querySelector(`.key[data-key="${ $e.keyCode }"]`)
+    if (!audio) return
+    audio.currentTime = 0
+    audio.play()
+    key.classList.add('playing')
+  }
 
+  function stop($e) {
+    const { propertyName } = $e
+    if (propertyName !== 'transform') return
+    this.classList.remove('playing')
+  }
+
+  window.addEventListener('keydown', play)
+  const keys = document.querySelectorAll('.key')
+  keys.forEach(key => key.addEventListener('transitionend', stop))
 </script>
 
 
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..4f3ed019a4 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,13 +61,35 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.42, 0, 0.25, 1.85);
     }
 
   </style>
 
-  <script>
+<script>
+const secondHand = document.querySelector('.second-hand'),
+      minuteHand = document.querySelector('.min-hand'),
+      hourHand = document.querySelector('.hour-hand')
 
+function setTime() {
+  const now = new Date(),
+        seconds = getRotation(now.getSeconds(), 60),
+        minutes = getRotation(now.getMinutes(), 60),
+        hours = getRotation(now.getHours(), 12)
+  
+  secondHand.style.transform = `rotate(${ seconds }deg)`
+  minuteHand.style.transform = `rotate(${ minutes }deg)`
+  hourHand.style.transform = `rotate(${ hours }deg)`
+}
 
-  </script>
+function getRotation(timeValue, scale) {
+  return (timeValue / scale * 360) + 90
+}
+
+setInterval(setTime, 1000)
+</script>
 </body>
 </html>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..d474124172 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,7 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --base: #fc0;
+      --spacing: 5px;
+      --blur: 10px;
+    }
+
+    img {
+      padding: var(--spacing);
+      background-color: var(--base);
+      filter: blur(var(--blur));
+    }
 
+    .hl {
+      color: var(--base);
+    }
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -48,6 +62,13 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    function handleUpdate() {
+      const unit = this.dataset.sizing || ''
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + unit)
+    }
+
+    const inputs = document.querySelectorAll('.controls input')
+    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 4162bce339..8e1e4af16f 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -33,17 +33,27 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const inventorsBorn1500 = inventors.filter(person => person.year >= 1500 && person.year < 1599)
+    // console.table(inventorsBorn1500)
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const fullNames = inventors.map(inventor => `${ inventor.first } ${ inventor.last }`)
+    // console.log(fullNames)
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const birthdaySort = inventors.sort((a, b) => a.year > b.year ? 1 : -1)
+    // console.table(birthdaySort)
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const totalYears = inventors.reduce((total, {year, passed}) => {return total + (passed - year)}, 0)
+    // console.log(totalYears)
 
     // 5. Sort the inventors by years lived
+    const sortByYearsLived = inventors.sort((a, b) => (a.passed - a.year) > (b.passed - b.year) ? -1 : 1)
+    // console.table(sortByYearsLived)
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
@@ -51,11 +61,22 @@
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const alphaByLastName = people.sort((a, b) => {
+      const [aLast, ] = a.split(', '),
+            [bLast, ] = b.split(', ')
+      return aLast > bLast ? 1 : -1
+    })
+    // console.log(alphaByLastName)
 
     // 8. Reduce Exercise
     // Sum up the instances of each of these
     const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
-
+    const transportation = data.reduce((options, transport) => {
+      if(!options[transport]) options[transport] = 0 
+      options[transport]++
+      return options
+    }, {})
+    // console.log(transportation)
   </script>
 </body>
 </html>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..b84da77b9c 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -7,6 +7,9 @@
 </head>
 <body>
   <style>
+    :root {
+      --transition: .7s;
+    }
     html {
       box-sizing: border-box;
       background:#ffc600;
@@ -22,6 +25,7 @@
     }
 
     .panels {
+      display: flex;
       min-height:100vh;
       overflow: hidden;
     }
@@ -30,13 +34,18 @@
       background:#6B0F9C;
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
       text-align: center;
       align-items:center;
       /* Safari transitionend event.propertyName === flex */
       /* Chrome + FF transitionend event.propertyName === flex-grow */
       transition:
-        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
-        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
+        font-size var(--transition) cubic-bezier(0.61,-0.19, 0.7,-0.11),
+        flex var(--transition) cubic-bezier(0.61,-0.19, 0.7,-0.11),
         background 0.2s;
       font-size: 20px;
       background-size:cover;
@@ -53,7 +62,25 @@
     .panel > * {
       margin:0;
       width: 100%;
-      transition:transform 0.5s;
+      transition:transform 0.5s linear var(--transition);
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .panel > *:first-child {
+      transform: translateY(-100%);
+    }
+    .panel:focus > *:first-child {
+      transform: translateY(0);
+    }
+
+    .panel > *:last-child {
+      transform: translateY(100%);
+    }
+    .panel:focus > *:last-child {
+      transform: translateY(0);
     }
 
     .panel p {
@@ -66,7 +93,8 @@
       font-size: 4em;
     }
 
-    .panel.open {
+    .panel:focus {
+      flex: 5;
       font-size:40px;
     }
 
@@ -79,27 +107,27 @@
 
 
   <div class="panels">
-    <div class="panel panel1">
+    <div class="panel panel1" tabindex=0>
       <p>Hey</p>
       <p>Let's</p>
       <p>Dance</p>
     </div>
-    <div class="panel panel2">
+    <div class="panel panel2" tabindex=0>
       <p>Give</p>
       <p>Take</p>
       <p>Receive</p>
     </div>
-    <div class="panel panel3">
+    <div class="panel panel3" tabindex=0>
       <p>Experience</p>
       <p>It</p>
       <p>Today</p>
     </div>
-    <div class="panel panel4">
+    <div class="panel panel4" tabindex=0>
       <p>Give</p>
       <p>All</p>
       <p>You can</p>
     </div>
-    <div class="panel panel5">
+    <div class="panel panel5" tabindex=0>
       <p>Life</p>
       <p>In</p>
       <p>Motion</p>
@@ -107,10 +135,19 @@
   </div>
 
   <script>
-
+  // const panels = document.querySelectorAll('.panel')
+
+  // function toggleOpen() {
+  //   this.classList.toggle('open')
+  // }
+  // function toggleOpenActive($e) {
+  //   if ($e.propertyName.includes('flex')) {
+  //     this.classList.toggle('open-active')
+  //   }
+  // }
+
+  // panels.forEach(panel => panel.addEventListener('click', toggleOpen))
+  // panels.forEach(panel => panel.addEventListener('transitionend', toggleOpenActive))
   </script>
-
-
-
 </body>
 </html>
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..14283a7965 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -6,17 +6,48 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-
   <form class="search-form">
-    <input type="text" class="search" placeholder="City or State">
-    <ul class="suggestions">
+    <label for="search">Search by city or state</label>
+    <input id="search" type="text" class="search" placeholder="City or State">
+    <ul id="suggestions" class="suggestions">
       <li>Filter for a city</li>
       <li>or a state</li>
     </ul>
   </form>
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+const cities = [];
+const search = document.getElementById('search')
+const suggestions = document.getElementById('suggestions')
+
+fetch(endpoint)
+  .then(res => res.json())
+  .then(data => cities.push(...data))
+
+search.addEventListener('input', displayMatches)
+
+function findMatches(word, cities) {
+  const regex = new RegExp(word, 'gi')
+  return cities.filter(({city, state}) => {
+    return city.match(regex) || state.match(regex)
+  });
+}
 
+function displayMatches() {
+  const results = findMatches(this.value, cities)
+  const hlRegex = new RegExp(this.value, 'gi')
+  const resultHtml = results.map(({city, state, population}) => {
+    city = city.replace(hlRegex, `<span class="hl">${this.value}</span>`)
+    state = state.replace(hlRegex, `<span class="hl">${this.value}</span>`)
+    return `
+      <li>
+        <span class="name">${city}, ${state}</span>
+        <span class="population">${Number(population).toLocaleString()}</span>
+      </li>
+    `
+  }).join('')
+  suggestions.innerHTML = resultHtml
+}
 </script>
   </body>
 </html>
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 206ec31aa0..c0150437dd 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,31 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19?
+    const isAdult = people.some(person => {
+      const currYear = (new Date()).getFullYear()
+      return (currYear - person.year) >= 19
+    })
+
+    // One liner
+    const isAdult2 = people.some(({year}) => ((new Date()).getFullYear() - year) >= 19)
+
     // Array.prototype.every() // is everyone 19?
+    const everyAdult = people.every(({year}) => ((new Date()).getFullYear() - year) >= 19)
 
     // 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 cID = 823423
+    const comment = comments.find(({id}) => id === cID)
+   
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const index = comments.findIndex(({id}) => id === cID)
+    const newComments = [
+      ...comments.splice(0, index),
+      ...comments.splice(index + 1)
+    ]
 
   </script>
 </body>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..b8b5767696 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -3,10 +3,56 @@
 <head>
   <meta charset="UTF-8">
   <title>HTML5 Canvas</title>
+  <style>
+    #draw {
+      height: 100vh;
+      width: 100vw;
+    }
+  </style>
 </head>
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+const canvas = document.getElementById('draw')
+canvas.width = window.innerWidth
+canvas.height = window.innerHeight
+
+const ctx = canvas.getContext('2d')
+ctx.lineJoin = 'round'
+ctx.lineCap = 'round'
+
+let isDrawing = false,
+    lastX = 0,
+    lastY = 0,
+    hue = 0,
+    direction = true
+
+function draw({offsetX, offsetY}) {
+  if (!isDrawing) return
+
+  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`
+  
+  ctx.beginPath()
+  ctx.moveTo(lastX, lastY)
+  ctx.lineTo(offsetX, offsetY)
+  ctx.stroke()
+
+  lastX = offsetX
+  lastY = offsetY
+  hue = hue % 360 + 1
+  if(ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+    direction = !direction
+  }
+  direction ? ctx.lineWidth++ : ctx.lineWidth--
+}
+
+document.addEventListener('mousemove', draw)
+document.addEventListener('mousedown', ({offsetX, offsetY}) => {
+  [lastX, lastY] = [offsetX, offsetY]
+  isDrawing = true
+})
+document.addEventListener('mouseup', () => isDrawing = false)
+document.addEventListener('mouseout', () => 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 eb7ed310bb..d67821966d 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -40,7 +40,7 @@
       margin:20px;
     }
 
-    p {
+    label {
       margin:0;
       padding:20px;
       transition:background 0.2s;
@@ -66,44 +66,58 @@
   -->
   <div class="inbox">
     <div class="item">
-      <input type="checkbox">
-      <p>This is an inbox layout.</p>
+      <input type="checkbox" id="0">
+      <label for="0">This is an inbox layout.</label>
     </div>
     <div class="item">
-      <input type="checkbox">
-      <p>Check one item</p>
+      <input type="checkbox" id="1">
+      <label for="1">Check one item</label>
     </div>
     <div class="item">
-      <input type="checkbox">
-      <p>Hold down your Shift key</p>
+      <input type="checkbox" id="2">
+      <label for="2">Hold down your Shift key</label>
     </div>
     <div class="item">
-      <input type="checkbox">
-      <p>Check a lower item</p>
+      <input type="checkbox" id="3">
+      <label for="3">Check a lower item</label>
     </div>
     <div class="item">
-      <input type="checkbox">
-      <p>Everything inbetween should also be set to checked</p>
+      <input type="checkbox" id="4">
+      <label for="4">Everything inbetween should also be set to checked</label>
     </div>
     <div class="item">
-      <input type="checkbox">
-      <p>Try do it with out any libraries</p>
+      <input type="checkbox" id="5">
+      <label for="5">Try do it with out any libraries</label>
     </div>
     <div class="item">
-      <input type="checkbox">
-      <p>Just regular JavaScript</p>
+      <input type="checkbox" id="6">
+      <label for="6">Just regular JavaScript</label>
     </div>
     <div class="item">
-      <input type="checkbox">
-      <p>Good Luck!</p>
+      <input type="checkbox" id="7">
+      <label for="7">Good Luck!</label>
     </div>
     <div class="item">
-      <input type="checkbox">
-      <p>Don't forget to tweet your result!</p>
+      <input type="checkbox" id="8">
+      <label for="8">Don't forget to tweet your result!</label>
     </div>
   </div>
 
 <script>
+  const items = [...document.querySelectorAll('.item > input')]
+  let lastSelectIndex = -1;
+  items.forEach(item => item.addEventListener('click', ({srcElement, shiftKey}) => {
+    if(shiftKey && lastSelectIndex !== -1) {
+      const currentSelectIndex = items.indexOf(srcElement)
+      const subItems = currentSelectIndex > lastSelectIndex ? 
+                        items.slice(lastSelectIndex, currentSelectIndex) : 
+                        items.slice(currentSelectIndex, lastSelectIndex)
+      const shouldCheck = items[lastSelectIndex].checked
+      subItems.forEach(item => item.checked = shouldCheck)
+    } else {
+      lastSelectIndex = items.indexOf(srcElement)
+    }
+  }))
 </script>
 </body>
 </html>
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..eb6dbf0b9f 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -3,10 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <title>Key Detection</title>
-  <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
+  <!--<script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>-->
 </head>
 <body>
 <script>
+  const pressed = []
+  const secretCode = ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "b", "a"]
+  window.addEventListener('keyup', ($e) => {
+    while(pressed.length >= secretCode.length) {
+      pressed.shift()
+    }
+    pressed.push($e.key)
+    if(pressed === secretCode) {
+      alert('winner!')
+      pressed.length = 0
+    }
+  })
 </script>
 </body>
 </html>