diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..5d7533cbff 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,6 +59,32 @@
 
 <script>
 
+  function playSounds (e){
+    e.preventDefault();
+    const selectAudio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
+    const selectKey = document.querySelector(`.key[data-key="${e.keyCode}"]`)
+    if(!selectAudio) return;
+    // console.log('selectAudio', selectAudio);
+    // console.log('selectKey', selectKey);
+    selectAudio.currentTime = 0;
+    selectAudio.play();
+    selectKey.classList.add('playing');
+  }
+
+  window.addEventListener('keydown', playSounds);
+
+  // this is all for adding and removing a css class when the transition is complete
+  const keys = document.querySelectorAll('.key');
+    // console.log('keys are', keys)
+    // function removeTransition(e){
+    //   if(e.propertyName !== 'transform') return
+    //   this.classList.remove('playing');
+    // }
+    // when a key has a transitionend event, we call remove transition.
+    keys.forEach(key => key.addEventListener('transitionend', function(e){
+      if(e.propertyName !== 'transform') return
+      this.classList.remove('playing');
+    }));
 </script>
 
 
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..2a81021d2f 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,13 +61,36 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.5s;
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
 
   </style>
 
   <script>
+  function setDate() {
+    const now = new Date();
+    const secondHand = document.querySelector('.second-hand')
+    const minuteHand = document.querySelector('.min-hand')
+    const hourHand = document.querySelector('.hour-hand');
+    const minutes = Number(now.toString().slice(19, 21))
+    const minuteDegrees = (minutes / 60 * 360) + 90;
+    const seconds = Number(now.toString().slice(22, 25));
+    const secondDegrees = ((seconds / 60) * 360) + 90;
+    const hours = Number(now.toString().slice(16, 18))
 
+    const hoursDegrees = (hours / 24 * 360) + 90;
+    console.log('hours are ', hours, 'hoursdegrees', hoursDegrees);
+    hourHand.style.transform = `rotate(${hoursDegrees}deg)`
+    secondHand.style.transform = `rotate(${secondDegrees}deg)`
+    minuteHand.style.transform = `rotate(${minuteDegrees}deg)`
 
+    console.log('seconds is', seconds);
+  }
+
+  setInterval(setDate, 1000);
   </script>
 </body>
 </html>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..ba0e2510d2 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -9,10 +9,10 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <div class="controls">
     <label for="spacing">Spacing:</label>
-    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+    <input type="range" name="spacing" min="10" max="200" value="10" data-size="px">
 
     <label for="blur">Blur:</label>
-    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+    <input type="range" name="blur" min="0" max="25" value="10" data-size="px">
 
     <label for="base">Base Color</label>
     <input type="color" name="base" value="#ffc600">
@@ -20,11 +20,25 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
+
+
   <style>
 
-    /*
-      misc styles, nothing to do with CSS variables
-    */
+    :root{
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img{
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
+
+    .h1 {
+      color: var(--base);
+    }
 
     body {
       text-align: center;
@@ -48,6 +62,20 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('.controls input')
+
+    function handleUpdate () {
+      const suffix = this.dataset.size || '';
+      // this.value is the value set on the input bar, from 0 25 with blur, for example.
+      // to create a scalable input bar, you can set the type of the input bar to 'range'
+      //suffix is the type of value, so it's 25 + px, for example.  This tells the CSS how to 
+      //change what it should.
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+    }
+
+    // calls handleUpdate on a change to the input.  
+    inputs.forEach(input => input.addEventListener('change', handleUpdate))
+    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 317883a4c1..11008d7671 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -32,28 +32,101 @@
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
 
+    // with an implicit return.  It returns true if this statement is true.  
+    const inventorsFrom1500s = inventors.filter(inventor =>
+      inventor.year <= 1600 && inventor.year >= 1500
+    )
+    // console.log('Let\s see if this works', inventorsFrom1500s);
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
 
+    // reWritten with the implicit return.  Each object is transformed into a part of what it once was.  
+    const inventorFirstAndLast = inventors.map(inventor =>
+      [inventor.first, inventor.last]
+    )
+
+    // console.log('testing 1, 2, 3', inventorFirstAndLast);
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
 
+    // is a.year is greater than b.year, then this is true and you return 1, which means don't swap, I believe.  Yep, when b < a you switch the two, otherwise they stay the same, so 1890 > 1898, switch.
+    // 1905 > 1898, false, returns -1, means that you DO want to switch the two values.  
+    const inventorSorting = inventors.sort((a, b) =>
+      // console.log('Returning this', a.year > b.year ? 1 : -1);
+      a.year > b.year ? 1 : -1
+    )
+    // console.log('birthdate oldest to youngest');
+    // console.table( inventorSorting)
+
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
 
+    // the first parameter is the accumulator, so it needs to be the same type as the starting value,
+    // whatever that is.  The reduce will continue to run through all the inventors and add 'em up.
+    const inventorSum = inventors.reduce((total, inventor) =>
+      total + (inventor.passed - inventor.year)
+    , 0)
+
+    // console.log('the total age of everyone lived is', inventorSum);
     // 5. Sort the inventors by years lived
+    // console.log('years lived youngest to oldest');
+    const inventorsByYearsLived = inventors.sort((a, b) =>
+      (a.passed - a.year) > (b.passed - b.year) 
+    )
 
+    // console.table( inventorsByYearsLived);
     // 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 category = document.querySelector('.mw-category');
+    // const links = [...category.querySelectorAll('a')];
+    // var de = links.map(link => 
+    //   link.textContent
+    // ).filter(streetName =>
+    //   streetName.includes('de')
+    // )
+
+    // const birthdays = [...document.querySelectorAll('.celebs-box')];
+
+    // const textContent = birthdays.map(celebBox =>
+    //   celebBox.textContent
+    // )
+    // joinedCelebs = textContent.join('').split('\u21b5');
+
+
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
 
+    const sortedPeople = people.sort((a, b) => {
+      a = a.split(',');
+      a = a[0]
+      b = b.split(',');
+      b = b[0]
+
+      // console.log('a > b is', a > b ? 1 : -1);
+      // return a - b;
+      return a > b ? 1 : -1;
+      // console.log('commaLocation is', commaLocation);
+    })
+
+    // console.log('sortedPeople', sortedPeople);
+
     // 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' ];
 
+    // note how obj is starting blank.
+    const wayOfTransport = data.reduce((obj, transport) => {
+      if(!obj[transport]){
+        obj[transport] = 0;
+      }
+      obj[transport] += 1;
+      return obj;
+    }, {})
+
+    console.log('wayOfTransport', wayOfTransport);
+
   </script>
 </body>
 </html>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..2d810531f8 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -16,16 +16,21 @@
     }
     body {
       margin: 0;
-    }
+    } 
     *, *:before, *:after {
       box-sizing: inherit;
     }
 
+/* display: flex puts everything in one flex box,  changes the panels from being vertically aligned to
+horizontally aligned */
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
+/* flex: 1 tells the panels to fill out all remaining space, basically take over the page */
+/*you can add display: flex to items that are already in flexboxes.  you can put flexboxes in flexboxes*/
     .panel {
       background:#6B0F9C;
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
@@ -34,13 +39,19 @@
       align-items:center;
       /* Safari transitionend event.propertyName === flex */
       /* Chrome + FF transitionend event.propertyName === flex-grow */
+      /*need this transition or the whole thing breaks.  It because of the flex statement in here*/
       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),
+        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11);
         background 0.2s;
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -50,10 +61,29 @@
     .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
     .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
 
+    /* these are everything inside of a flex panel.  I.E.  all of the <p> tags */
     .panel > * {
       margin:0;
       width: 100%;
       transition:transform 0.5s;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    /*Transform causes CSS fields to move.  The translate -100% will move the first-child of every Panel off-screen going up, while the other will do the opposite to the last-child.  When they are deactivated the items come back*/
+    .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 {
@@ -66,8 +96,10 @@
       font-size: 4em;
     }
 
+    /*flex of 5 means that this panel will take 5 times the amount of extra room as the rest of the panels when it is open*/
     .panel.open {
       font-size:40px;
+      flex: 5;
     }
 
     .cta {
@@ -108,6 +140,30 @@
 
   <script>
 
+    const panels = document.querySelectorAll('.panel');
+
+    function toggleOpen () {
+        this.classList.toggle('open');
+    }
+
+    // if it has this open-active class, bring it on the page.  Otherwise, keep it off. 
+    function toggleActive(e){
+      console.log('E IS', e.propertyName);
+      if(e.propertyName.includes('flex')){
+        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..33653e6c4a 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -17,6 +17,70 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+const cities = [];
+  
+fetch(endpoint)
+  .then(data => {
+    // data.json is another async function that processes data into JSON and then returns it.
+    return data.json()
+  })
+  .then(jsonResponse => {
+    // this is the response in JSON
+    // console.log('json response', jsonResponse);
+    cities.push(...jsonResponse);
+  })
+
+function findMatches(wordToMatch, cities){
+  // returns all cities that include whatever is being typed into the search button.
+  return cities.filter(place =>{
+    // 'gi' is RegExp for global and insensitive.  As in it is insensitive to case. 
+    const regex = new RegExp(wordToMatch, 'gi')
+
+    return place.city.match(regex) || place.state.match(regex);
+    // this works but it will only return mixed case if that is what is searched, not only lower case or only other examples.  So it's not as good of an implementation as using regular expressions.
+    // return place.city.includes(wordToMatch) || 
+    // place.state.includes(wordToMatch) || place.city.includes(wordToMatch.toLowerCase())
+    // || place.state.includes(wordToMatch.toLowerCase())
+  })
+}
+
+function numberWithCommas(num){
+   return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+
+function displayMatches () {
+
+  const matchArray = findMatches(this.value, cities)
+  // this map returns as an array and we need it to be a long string to translate easily into HTML
+  // so that's why I call a .join on nothing at the end of this function. 
+    const html =matchArray.map(place => {
+      const regex = new RegExp (this.value, 'gi')
+      // will find whatever the value is and replace that written part with a span that is highlighted.
+      const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`)
+      const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`)
+
+      return `
+        <li>
+          <span>${cityName}, ${stateName} </span>
+          <span >${numberWithCommas(place.population)} </span>
+        </li>
+      `
+    }).join('')
+
+  // fills the suggestions html with whatever is returned by matchArray map.  Similar to a react style
+  suggestions.innerHTML = html;
+}
+
+  const input = document.querySelector('.search');
+  const suggestions = document.querySelector('.suggestions');
+
+  input.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 969566ff78..2a5290417a 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,16 +26,64 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+
+    // returns true for at least one person.
+    const overNineteen = (person => {
+      const currentDate = new Date().getFullYear();
+      // if it's true for one person, then we are solid. 
+      if(currentDate - person.year >= 19){
+        return true;
+      }
+
+    })
+
+    const anyAdults = people.some(overNineteen);
+
+    // console.log(anyAdults);
     // Array.prototype.every() // is everyone 19 or older?
 
+    const allAdults = people.every(overNineteen);
+
+    // 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 findComment = (comment => {
+      if(comment.id === 823423){
+        return comment;
+      }
+    })
+
+    // comments.find already means you're going to be using the comments array.  Don't need to pass that in to findComment.  All you need to do is add the logic to find the specific comment you're looking for,  
+    // console.log(comments.find(findComment));
+
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
 
+    // the findIndex returns the index automatically, it doesn't matter what you add as the return to the function, oddly.
+
+    const index = comments.findIndex(comment =>{
+      if(comment.id === 823423){
+        return true;
+      }
+    })
+
+    // comments.splice(index, 1);
+
+    // console.log(comments);
+
+    const newComments = [
+      ...comments.slice(0, index),
+      // the first one slices everything from zero to the index (not inclusive of index)
+      // the second slice from one past the index all the way to the end of the comments array.
+      ...comments.slice(index + 1)
+    ]
+
+    console.log(newComments)
+
   </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..23569b1887 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -5,8 +5,81 @@
   <title>HTML5 Canvas</title>
 </head>
 <body>
+<!-- all you start with is a canvas element you can draw on.  Then we're going to drag and do things to it.  -->
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
+// remember the pound sign is a way to select elements.  
+const canvas = document.querySelector('#draw');
+// sets the context of the canvas to 2d.
+// I misspelled canvas intially, which is why this wasn't working.  
+const ctx = canvas.getContext('2d')
+// want to resize canvas to be whatever size the window is at any given time, not 800 x 8000 necessairly.  
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+ctx.strokeStyle = '#BADA55';
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+ctx.lineWidth = 1;
+
+let isDrawing = false; 
+// to draw a line you need a starting x and y and an ending x and y.  
+
+let lastX = 0;
+let lastY = 0;
+let hue = 0;
+let light = 0;
+let direction = true;
+
+
+function draw (e){  
+  if(!isDrawing) return; // will stop the function from running when they're not mousedDown;
+  // console.log(e);
+  ctx.beginPath();
+  ctx.strokeStyle = `hsl(${hue}, ${light}%, 50%)`
+  ctx.moveTo(lastX, lastY);
+  ctx.lineTo(e.offsetX, e.offsetY);
+  // won't see anything until you call stroke
+  ctx.stroke();
+  //destructed array.  
+  [lastX, lastY] = [e.offsetX, e.offsetY]
+  // hue = (Math.random() * 360);
+  light++;
+  hue++;
+  if(hue >= 360){
+    hue = 0;
+  }
+  if(ctx.lineWidth >= 100 || ctx.lineWidth <=1){
+    direction = !direction;
+  }
+  if(direction){
+    ctx.lineWidth++;
+  }else{
+    ctx.lineWidth--;
+  }
+}
+
+canvas.addEventListener('mousedown', (e) => {
+  isDrawing = true;
+  [lastX, lastY] = [e.offsetX, e.offsetY]
+
+})
+
+
+// canvas.addEventListener('mousedown', (e) => {
+//   isDrawing = true;
+//   [lastX, lastY] = [e.offsetX, e.offsetY];
+// });
+
+
+
+canvas.addEventListener('mousemove', draw);
+
+canvas.addEventListener('mouseup', () => isDrawing = false)
+// this is if you leave the canvas window.  If you hold down the mouse and leave the window and then let go and come back it will never have triggered a mouseup event.  
+canvas.addEventListener('mouseout', () => isDrawing = false)
+
 </script>
 
 <style>
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..e7035e7319 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -19,28 +19,77 @@
 
     // Regular
 
+    console.log('Hi!');
+
     // Interpolated
 
+    console.log('Hello I am a %s string!', 'poopy')
+
     // Styled
 
+    // console.log('%c styled text? what is that?', 'font-size:30px');
+
     // warning!
 
+    console.warn('whoopsie');
+
     // Error :|
 
+    console.error('this is really bad')
+
     // Info
 
+    console.info('birds fly so high')
+
     // Testing
 
+    // displays when the first argument passed is not true.
+
+    const para = document.querySelector('p');
+
+    console.assert(para.classList.contains('big-class'), 'Whoops no big-class found')
+
     // clearing
 
+    // console.clear(); 
+
     // Viewing DOM Elements
+    // this lets you view the dom element
+    console.log(para);
+    // console.dir lets you open up the element to view it's properties.
+    console.dir(para);
 
     // Grouping together
 
+    dogs.forEach(dog => {
+      //
+      // console.groupCollapsed(dog.name);
+      console.group(dog.name)
+      console.log('dog name is', dog.name);
+      console.log('dog age is', dog.age, 'dog name is', dog.name)
+      console.groupEnd(dog.name);
+    })
+
     // counting
+    // will count how many times something is called
+    console.count('Joey')
+    console.count('Joey')
+    console.count('Joey')
+    console.count('Joey')
+    console.count('Arvin')
+    console.count('Arvin')
+
 
     // timing
 
+    console.time('fetching data');
+    fetch('https://api.github.com/users/josamuel')
+    .then(data => data.json())
+    .then(data => {
+      console.timeEnd('fetching data')
+      console.log(data);
+    })
+
   </script>
 </body>
 </html>