diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..9c18270769 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,43 @@
 
 <script>
 
+    function playSound(e) {
+        // Get the <audio> element and <div.key> that matches our key
+        const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+        const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+
+        if (!audio) return; // stop function from running if this isn't a hot key.
+        audio.currentTime = 0; // rewind audio to start, otherwise can't jam on the key!
+        audio.play();
+
+        key.classList.add('playing'); // add the class to grow / color border
+    }
+
+    // whenever a key is pressed, run playSound
+    window.addEventListener('keydown', playSound);
+
+    // Instead of using setTimeout or something, remove the transition
+    // effect by watching for transitions to end, then remove the class.
+    // I guess this also runs when we transition back, but then if it removes
+    // the class again, so what, it won't start a new transition anyway.
+    function removeTransition(e) {
+        if (e.propertyName !== 'transform') return; // skip if not a transform
+            // that is because a lot of stuff fires; many things transitioned,
+            // so many things fire on transitionend. But we only want to take
+            // action for one of them, and transform is the event we are watching
+            // here, ignoring the others.
+        this.classList.remove('playing'); // remove the class; button goes back to "unpressed"
+        // Here, 'this' is the key, because we are running this function from an event
+        // listener that was attached to a key (below, in the forEach)
+    }
+
+    const keys = document.querySelectorAll('.key');
+    // You have to use forEach here, to add event listener to each.
+    // Note keys is not an array, it is a NodeList, they are different things.
+
+    // Whenever a transitionend fires, run our function to take key back to normal.
+    keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
 </script>
 
 
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..2871c18502 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,51 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%; /* along x-axis, 0% would be left, 100% is at right.
+                                 so this will make the origin point the right side,
+                                 which in our case is the pivot point in the center
+                                 of the clock face. otherwise each hand spins
+                                 at the center of the hand, not at one end. */
+      transform: rotate(90deg); /* rotate all the hands 90º so they start at 12 */
+      transition: all 0.05s; /* how long the transition takes (the 1-sec "tick" )*/
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+            /* this defines how the hand moves during transition. this one moves and
+               bounces back a little, for a fun effect. there's like a little
+               gui editor in chrome dev tools you can use for this?? */
     }
 
   </style>
 
   <script>
+    const secondHand = document.querySelector('.second-hand');
+    const minuteHand = document.querySelector('.min-hand');
+    const hourHand = document.querySelector('.hour-hand');
 
+    function setDate() {
+        const now = new Date();
+
+        const seconds = now.getSeconds();
+        // calculate the seconds
+        // first, divide seconds by 60, this gives you a percentage
+        // e.g. 5 / 60 = 8.3%
+        // multiply that percentage by 360 degrees to get current position
+        // add 90 to that to offset the fact that we started at 90, not 0.
+        const secondsDegrees = ((seconds / 60) * 360) + 90;
+        // set the transform property so we rotate that number of degrees
+        secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+        const minutes = now.getMinutes();
+        const minutesDegrees = ((minutes / 60) * 360) + 90;
+        minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
+
+        const hours = now.getHours();
+        // divide by 12, not 60
+        const hoursDegrees = ((hours / 12) * 360) + 90;
+        hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+    }
+
+    // run this once per 1000ms (1s)
+    setInterval(setDate, 1000);
 
   </script>
 </body>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..531ea679ed 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -22,6 +22,25 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <style>
 
+    /* :root is the highest you can go - nothing is more base than :root */
+    :root {
+        /* variable names are prefixed with -- ... that's just the spec. */
+        --base: #ffc600;
+        --spacing: 10px;
+        --blur: 10px;
+    }
+
+    img {
+        /* fetch the value using var() to sub in the CSS var in this place */
+        padding: var(--spacing);
+        background: var(--base);
+        filter: blur(var(--blur));
+    }
+
+    .hl {
+        color: var(--base);
+    }
+
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -48,6 +67,28 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('.controls input');
+
+    function handleUpdate() {
+        // use the HTML attrib data attrs, e.g. data-sizing, to determine the
+        // unit (the slider just says e.g. "10" not "10px").
+
+        // dataset has all the "data-" attributes on the element. Handy!
+        const suffix = this.dataset.sizing || '';   // alt. case in case no data-sizing
+
+        // update the value, to affect the DOM and produce the visible effect
+        // name is taken from the name attr on the input element. Same for value
+        document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+    }
+
+    // listen for a change; this is when you change the value. On a slider,
+    // it's when you let go and the new value is set.
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+
+    // listen for mousemove also. This will fire as you slide a slider
+    // around, even without letting go. So this is how we get the behavior
+    // of scrubbing across the slider and the values are changing in realtime.
+    inputs.forEach(input => input.addEventListener('mousemove', 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..cab680175d 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -32,30 +32,129 @@
     const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
 
     // Array.prototype.filter()
+    //
+    // filter takes in an array, and returns a subset of that array which
+    // matches the filter criteria. It may be anywhere from 0 to length(array)
+    // in size, because it's possible nothing matches, or all match.
+    //
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const fifteen = inventors.filter(function(inventor) {
+        if (inventor.year >= 1500 && inventor.year < 1600) {
+            return true; // keep it
+        } else {
+            return false; // optional; if you don't return, or return false,
+                        // then it's not kept in the output set anyway.
+        }
+    })
+
+    // this can also be written with shorter syntax as:
+    // const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600)
+
+    console.table(fifteen)
 
     // Array.prototype.map()
+    //
+    // map takes an array and returns an array of the same length, after pushing
+    // each member of the array through a function to process it.
+    //
     // 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()
+    //
+    // Sort is like map, in that it takes in an array and outputs one of same
+    // length, but specialized in that the function is expected to be a comparator
+    // to tell you which side of a vs. b to sort the element on.
+    //
     // 3. Sort the inventors by birthdate, oldest to youngest
 
+    const sortedBirthdates = inventors
+    sortedBirthdates.sort(function(a, b) {
+        if (a.year > b.year) return 1
+        if (a.year < b.year) return -1
+        if (a.year === b.year) return 0
+    })
+    console.table(sortedBirthdates)
+
+    // shorter version using ternary operator:
+    // const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1)
+    // NOTE: does not account for the === (0) case.
+
     // Array.prototype.reduce()
+    //
+    // reduce applies a function against an accumulator and reduces the whole thing
+    // to a single value.
+    //
     // 4. How many years did all the inventors live?
 
+    const yearsLived = inventors.reduce((total, inventor) => {
+        return total + (inventor.passed - inventor.year)
+    }, 0)
+    console.log(yearsLived)
+
     // 5. Sort the inventors by years lived
+    //
+    // use a sort to get this, and the comparator should be about the years lived
+
+    // helper function
+    const livedFor = (inventor) => inventor.passed - inventor.year
+
+    const sortedYearsLived = inventors
+    sortedYearsLived.sort(function(a, b) {
+        if (livedFor(a) > livedFor(b)) return -1
+        if (livedFor(a) < livedFor(b)) return 1
+        if (livedFor(a) === livedFor(b)) return 0
+    })
+
+    console.table(sortedYearsLived)
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 
+// have to paste this code into the dev console on this page for it to work.
+if (false) {
+    // found this class using devtools inspector
+    const category = document.querySelector('.mw-category')
+    // NOTE: you can use querySelectorAll against any DOM element, not just document
+    // Now we have a NodeList (which is NOT an array!)
+    //const links = category.querySelectorAll('a')
+    // So we can't use map on that. Let's try again and get an array this time.
+    const links = Array.from(category.querySelectorAll('a'))
+    // Could also have done this using spread operator:
+    //const links = [...category.querySelectorAll('a')]
+
+    // convert the list of links to list of names and filter
+    const de = links
+                .map(link => link.textContent)
+                .filter(streetName => streetName.includes('de'))
+}
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
 
+    const sortedByLastName = people
+    sortedByLastName.sort(function(a, b) {
+        const [aLast, aFirst] = a.split(', ')
+        const [bLast, bFirst] = b.split(', ')
+        return aLast > bLast ? 1 : -1
+    })
+
+    console.log(sortedByLastName)
+
     // 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(function(obj, item) {
+        if (!obj[item]) {
+            obj[item] = 0   // set initial value; isn't one here yet.
+        }
+        obj[item] += 1  // add one to our count
+        return obj      // need to return it! or it's lost
+    }, {})
+    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..4fecf6adf3 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,17 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      /* changing display to flex will take these horizontally stacked
+       * boxes and make them side by side. Why is that? Not exactly
+       * explained, but can research what flexbox is later.
+       *
+       * Wes has much more at flexbox.io.
+       *
+       * Just doing this and nothing else repositions them side by side,
+       * auto-width according to the widest word within each box.
+       * the rest of the container is just blank space (yellow in this case)
+       */
+      display: flex;
     }
 
     .panel {
@@ -34,6 +45,7 @@
       align-items:center;
       /* Safari transitionend event.propertyName === flex */
       /* Chrome + FF transitionend event.propertyName === flex-grow */
+      /* This is the bit that does the animation on changes */
       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),
@@ -41,6 +53,20 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      /* This tells the boxes to evenly distribute themselves to be equal within
+       * the container. Why? It's explained later.
+       */
+      flex: 1;
+      /* center the text left-to-right in the box */
+      /* .. but it already was? */
+      justify-content: center;
+      align-items: center;
+      /* this is the magic change that spreads the words out top to bottom */
+      /* so the other flex (.panels) we flex'd it to spread left to right */
+      /* here, inside we are making each panel also a flex box. */
+      display: flex;
+      /* And this is how we get them to stack top to bottom intead of left to right */
+      flex-direction: column;
     }
 
 
@@ -50,12 +76,35 @@
     .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
     .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
 
+    /* Flex children */
     .panel > * {
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      /* This is here to help visualization */
+      /*border: 1px solid red;*/
+      /* this spreads the text out top to bottom in each column */
+      /* Really it just seems to make each box take up 1/3 (its share) of
+       * the container. The word is still at the top of its section/box */
+      flex: 1 0 auto;
+      /* this makes it another flex box (inside anothe rinside another!)
+       * but the words are now upper left corner... */
+      display: flex;
+      /* and let's center this stuff... */
+      /* so now they are all centered in their own boxes. yay */
+      justify-content: center;
+      align-items: center;
     }
 
+    /* hide the top/bottom rows from the window, put them offscreen */
+    .panel > *:first-child { transform: translateY(-100%); }
+    .panel > *:last-child { transform: translateY(100%); }
+
+    /* when panel is open & active, show those rows again */
+    /* actually it will animate */
+    .panel.open-active > *:first-child { transform: translateY(0); }
+    .panel.open-active > *:last-child { transform: translateY(0); }
+
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -68,6 +117,9 @@
 
     .panel.open {
       font-size:40px;
+      /* this means to take up 5x the room of the others. */
+      /* the others take up 1 (flex:5), this one takes up 5 */
+      flex: 5;
     }
 
     .cta {
@@ -108,6 +160,29 @@
 
   <script>
 
+  // Get all panels
+  const panels = document.querySelectorAll('.panel')
+
+  // toggle the open class on this element
+  function toggleOpen() {
+      this.classList.toggle('open')
+  }
+
+  // toggle the open-active class on this element
+  function toggleActive(e) {
+      // note: in safari this is just 'flex'
+      // in others it is 'flex-grow'
+      if (e.propertyName.includes('flex')) {
+          this.classList.toggle('open-active');
+      }
+  }
+
+  // when we click, togggle the open class
+  panels.forEach(panel => panel.addEventListener('click', toggleOpen))
+
+  // when the transition has finished, toggle the open-active class
+  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..d68a7c7756 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,73 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+const cities = [];
+
+// Fetch will fetch whatever you pass it, and return a promise.
+fetch(endpoint)
+    .then(blob => blob.json())      // When resolved, we have the data. Now we want to
+                                    // turn that data into JSON. The json() method returns
+                                    // anther promise.
+    .then(data => cities.push(...data));    // When that promise resolves (we have JSON now), we want
+                                            // to put that into our array using the spread operator
+                                            // and push(). If you give multiple args to push, it pushes
+                                            // each one onto the array. This will give us an array of the
+                                            // cities that were returned.
+
+// A function to locate matches in our array of data.
+function findMatches(wordToMatch, cities) {
+    // Use filter() to return a subset of cities which match the search.
+    return cities.filter(place => {
+        // here we need to figure out if the city or state matches what was searched
+        const regex = new RegExp(wordToMatch, 'gi');
+        // check if this regex (the search string) matches against the current city
+        // or state. `place` is the entry to match.
+        // If either of these matches, the function returns true, therefore this
+        // entry will be included in the filtered set.
+        return place.city.match(regex) || place.state.match(regex);
+    });
+}
+
+// Format the number nicely with commas
+function numberWithCommas(x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+// Display whatever matches we have found
+function displayMatches() {
+    // Get the matches using findMatches
+    const matchArray = findMatches(this.value, cities);
+    // Build a little HTML to insert for each match.
+    // Assign to each element using map()
+    // Make one string instead of array using join()
+    const html = matchArray.map(place => {
+        // Use a regex to replace the portion of the data that matches the search
+        // string with a span of class "hl". This will highlight the part of the
+        // word which was the search, and leave the rest as regular text.
+        const regex = new RegExp(this.value, 'gi');
+        const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`)
+        // Use cityName instead of place.city in this (to get the matched data).
+        // Same for state.
+        const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`)
+        return `
+            <li>
+                <span class="name">${cityName}, ${stateName}</span>
+                <span class="population">${numberWithCommas(place.population)}</span>
+            </li>
+        `;
+    }).join('');
+    // And stick this into the DOM as an HTML node
+    suggestions.innerHTML = html;
+}
+
+// Grab a couple of DOM nodes...
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+// Event listener - when the input box changes, run the findMatches function
+searchInput.addEventListener('change', displayMatches);
+searchInput.addEventListener('keyup', displayMatches);
+
 </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..33e7c8076b 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,55 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19?
+    // const isAdult = people.some(function(person) {
+    //     const currentYear = (new Date()).getFullYear();
+    //     if (currentYear - person.year >= 19) {
+    //         return true;
+    //     }
+    // });
+
+    const isAdult = people.some(person => {
+        const currentYear = (new Date()).getFullYear();
+        return currentYear - person.year >= 19;
+    });
+    // this returns true
+    console.log(isAdult);
+    // this returns an object {isAdult: true}
+    console.log({isAdult});
+
     // Array.prototype.every() // is everyone 19?
 
+    const allAdults = people.every(person => {
+        const currentYear = (new Date()).getFullYear();
+        return currentYear - person.year >= 19;
+    });
+    console.log({allAdults});
+
     // 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 comment = comments.find(function(comment){
+    //     if (comment.id === 823423) {
+    //         return true;
+    //     }
+    // });
+    const comment = comments.find(comment => comment.id === 823423);
+    console.log(comment);
+
     // Array.prototype.findIndex()
     // Find the comment with this ID
+    const index = comments.findIndex(comment => comment.id === 823423);
+    console.log(index);
     // delete the comment with the ID of 823423
+    // delete using splice()
+    // comments.splice(index, 1);
+    // or build new array from slices. Use spread operator or you'll end
+    // with [array, array]
+    const newComments = [
+        ...comments.slice(0, index),
+        ...comments.slice(index + 1)
+    ];
 
   </script>
 </body>