From 3ff5e06cd0779e76b2db2ef0f4981d1f0e9227ac Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Wed, 6 Jun 2018 19:16:58 -0700
Subject: [PATCH 01/17] first commit, and just about done with this first
 exercise

---
 01 - JavaScript Drum Kit/index-START.html | 25 +++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..0d2012ef4b 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,32 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  window.addEventListener('keydown', (event) => {
+    console.log('keydown event: ', event);
+    console.log('keycode: ', event.keyCode);
+    const audio = document
+    .querySelector(`audio[data-key='${event.keyCode}']`);
+    const key = document
+    .querySelector(`.key[data-key='${event.keyCode}']`);
+    console.log('audio: ', audio);
+    console.log('key: ', key);
+    if (!audio) return; // stop the function from running all together
+    audio.currentTime = 0; // rewind to the start
+    audio.play();
+    key.classList.add('playing');
+  });
+  const removeTransition = function (event) {
+    console.log('removeTransition event: ', event);
+    if (event.propertyName !== 'transform') return; // skip it if its not a transform
+    console.log('event.propertyName: ', event.propertyName);
+    console.log('this: ', this);
+    this.classList.remove('playing');
+  };
 
+  const keys = document.querySelectorAll('.key');
+  console.log('keys: ', keys);
+  keys.forEach(key => key
+  .addEventListener('transitionend', removeTransition));
 </script>
 
 

From 38f92de39b14fcbd7820c2d4c43c02898408a96b Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Wed, 6 Jun 2018 19:37:10 -0700
Subject: [PATCH 02/17] ok finished this one

---
 01 - JavaScript Drum Kit/index-START.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 0d2012ef4b..72bd58ad88 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,7 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-  window.addEventListener('keydown', (event) => {
+  const playSound = (event) => {
     console.log('keydown event: ', event);
     console.log('keycode: ', event.keyCode);
     const audio = document
@@ -71,7 +71,7 @@
     audio.currentTime = 0; // rewind to the start
     audio.play();
     key.classList.add('playing');
-  });
+  };
   const removeTransition = function (event) {
     console.log('removeTransition event: ', event);
     if (event.propertyName !== 'transform') return; // skip it if its not a transform
@@ -84,6 +84,7 @@
   console.log('keys: ', keys);
   keys.forEach(key => key
   .addEventListener('transitionend', removeTransition));
+  window.addEventListener('keydown', playSound);
 </script>
 
 

From 302ec4eb6f62a914c1f89da8228281c7cf3ca957 Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Thu, 7 Jun 2018 18:08:28 -0700
Subject: [PATCH 03/17] heres da clock

---
 02 - JS and CSS Clock/index-START.html | 28 ++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index ee7eaefb1f..a2f77be08f 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -62,13 +62,41 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
 
   </style>
 
   <script>
+    const setDate = () => {
+      const secondHand = document.querySelector('.second-hand');
+      const minsHand = document.querySelector('.min-hand');
+      const hourHand = document.querySelector('.hour-hand');
+      const now = new Date();
+      const seconds = now.getSeconds();
+      // example if its 60 seconds
+      // (60 / 60) * 360 would be 360 degrees
+      // const secondsDegrees = (seconds / 60) * 360;
+      // then we have to add 90 degrees to counter the
+      // css transform to move the hand where we need it
+      const secondsDegrees = ((seconds / 60) * 360) + 90;
+      const mins = now.getMinutes();
+      const minsDegrees = ((mins / 60) * 360) + 90;
+      const hours = now.getHours();
+      const hoursDegrees = ((hours / 12) * 360) + 90;
 
 
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+      minsHand.style.transform = `rotate(${minsDegrees}deg)`;
+      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+      console.log('secondsDegrees: ', secondsDegrees);
+      console.log('seconds: ', seconds);
+    };
+    setInterval(setDate, 1000);
+
   </script>
 </body>
 </html>

From 5b855e9c985c052aacfa16b3977b3898f5d429de Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Thu, 7 Jun 2018 19:21:45 -0700
Subject: [PATCH 04/17] this is cleaner

---
 02 - JS and CSS Clock/index-START.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index a2f77be08f..1c7d85c915 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -77,23 +77,23 @@
       const hourHand = document.querySelector('.hour-hand');
       const now = new Date();
       const seconds = now.getSeconds();
+      const mins = now.getMinutes();
+      const hours = now.getHours();
       // example if its 60 seconds
       // (60 / 60) * 360 would be 360 degrees
       // const secondsDegrees = (seconds / 60) * 360;
       // then we have to add 90 degrees to counter the
       // css transform to move the hand where we need it
       const secondsDegrees = ((seconds / 60) * 360) + 90;
-      const mins = now.getMinutes();
       const minsDegrees = ((mins / 60) * 360) + 90;
-      const hours = now.getHours();
       const hoursDegrees = ((hours / 12) * 360) + 90;
 
 
       secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
       minsHand.style.transform = `rotate(${minsDegrees}deg)`;
       hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
-      console.log('secondsDegrees: ', secondsDegrees);
-      console.log('seconds: ', seconds);
+      // console.log('secondsDegrees: ', secondsDegrees);
+      // console.log('seconds: ', seconds);
     };
     setInterval(setDate, 1000);
 

From 88266557668f4a371ffb9b620145feb6b8b35cda Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Tue, 12 Jun 2018 19:12:23 -0700
Subject: [PATCH 05/17] that was a fun and informative css variables example,
 coolio

---
 03 - CSS Variables/index-START.html | 78 ++++++++++++++++++++---------
 1 file changed, 55 insertions(+), 23 deletions(-)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 8a4f0d556e..f3f0969746 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -3,6 +3,45 @@
 <head>
   <meta charset="UTF-8">
   <title>Scoped CSS Variables and JS</title>
+  <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
+      */
+  
+      body {
+        text-align: center;
+        background: #193549;
+        color: white;
+        font-family: 'helvetica neue', sans-serif;
+        font-weight: 100;
+        font-size: 50px;
+      }
+  
+      .controls {
+        margin-bottom: 50px;
+      }
+  
+      input {
+        width:100px;
+      }
+    </style>
 </head>
 <body>
   <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
@@ -18,33 +57,26 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     <input id="base" type="color" name="base" value="#ffc600">
   </div>
 
-  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
-
-  <style>
-
-    /*
-      misc styles, nothing to do with CSS variables
-    */
-
-    body {
-      text-align: center;
-      background: #193549;
-      color: white;
-      font-family: 'helvetica neue', sans-serif;
-      font-weight: 100;
-      font-size: 50px;
-    }
+  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500" />
 
-    .controls {
-      margin-bottom: 50px;
-    }
 
-    input {
-      width:100px;
-    }
-  </style>
 
   <script>
+    const inputs = document.querySelectorAll('.controls input');
+    console.log('inputs: ', inputs);
+    function handleUpdate () {
+      // console.log(this.dataset);
+      // use the or so we dont end up appending
+      // 'undefined'
+      const suffix = this.dataset.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+      // console.log('suffix: ', suffix);
+      // console.log('name: ', this.name);
+    };
+    inputs.forEach(input => {
+      input.addEventListener('change', handleUpdate);
+      input.addEventListener('mousemove', handleUpdate);
+    });
   </script>
 
 </body>

From 38d698313ed446d13df1dfdcb5c669540282d1fe Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Tue, 12 Jun 2018 19:25:42 -0700
Subject: [PATCH 06/17] interesting, i tried to apply the inline style to
 controls div instead of the html element and it doesnt work, you can see the
 values changing like it does on the html elmeent but it doesnt change the
 rendering at all

---
 03 - CSS Variables/index-START.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index f3f0969746..e168d26b7f 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -62,6 +62,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
 
   <script>
+    const controls = document.querySelector('.controls')
     const inputs = document.querySelectorAll('.controls input');
     console.log('inputs: ', inputs);
     function handleUpdate () {
@@ -70,6 +71,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       // 'undefined'
       const suffix = this.dataset.sizing || '';
       document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+      controls.style.setProperty(`--${this.name}`, this.value + suffix);
       // console.log('suffix: ', suffix);
       // console.log('name: ', this.name);
     };

From 2d75437049a2f183d568167ef119e704f57cf0b9 Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Wed, 13 Jun 2018 17:50:28 -0700
Subject: [PATCH 07/17] jammin on array cardio takin it slow tho

---
 04 - Array Cardio Day 1/index-START.html | 40 +++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..86ec71cff8 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,13 +31,51 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    /* pass filter a function, and that function will loop over every single
+      item in our array. and it will give us our inventor and for each
+      inventor we can decide whether we want to keep it or not. 
+    */
+
+    // const fifteen = inventors.filter(inventor => {
+    //   if (inventor.year >= 1500 && inventor.year < 1600) {
+    //     // note im used to return inventor; but wes used true,
+    //     // both seem to return the same information
+    //     return true; // keep it!
+    //   }
+    // });
+    // console.table('fifteen: ', fifteen);
+    // shorter version
+    const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
+    console.table('fifteen 15: ', fifteen);
+
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    /* 
+      map takes in an array, does something with that array and then
+      returns a _new_ array of the same length. map will always return
+      the same amount of items as you give it.
+    */
+    const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
+    console.log('full names: ', fullNames);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
-
+    /* 
+      sort takes 2 items and allows you to compare them
+      here we will return 1 and -1 and what that does is controls
+      the order of items in the array
+    */
+    // const ordered = inventors.sort((firstPerson, secondPerson) => {
+    //   if (firstPerson.year > secondPerson.year) {
+    //     return 1;
+    //   } else {
+    //     return -1;
+    //   }
+    // });
+    // shorter version
+    const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
+    console.log('ordered: ', ordered);
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
 

From 616976c4723cbb18f70b4bf69095f3f990948487 Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Wed, 13 Jun 2018 17:52:06 -0700
Subject: [PATCH 08/17] housekeeping

---
 04 - Array Cardio Day 1/index-START.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 86ec71cff8..640c6be591 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -46,7 +46,7 @@
     // console.table('fifteen: ', fifteen);
     // shorter version
     const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600);
-    console.table('fifteen 15: ', fifteen);
+    console.table('fifteen: ', fifteen);
 
 
     // Array.prototype.map()

From b9b6ef039dc4674855c863ae720bad211b8c48f2 Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Thu, 14 Jun 2018 19:57:50 -0700
Subject: [PATCH 09/17] whew. array cardio is awesome and i think i need to
 pause here and just work with arrays and these methods till i know what they
 do and when to use them

---
 04 - Array Cardio Day 1/index-START.html | 77 ++++++++++++++++++++++--
 1 file changed, 73 insertions(+), 4 deletions(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 640c6be591..0b66a908d0 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -78,20 +78,89 @@
     console.log('ordered: ', ordered);
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    /*
+      like the other array methods, reduce loops over every
+      item in our array.
+      the first argument of reduce represents what you returned
+      from the function last time (accumulator), we can call that total
+      and it is also going to give you the inventor (currentValue)
+     */
+    // const totalYears = inventors.reduce((total, inventor) => {
+    //   return total + (inventor.passed - inventor.year);
+    // });
+    /*
+      at this point in our code we are almost there but if you
+      look at this log we get back [object Object]7859843780508967907681
+      this is because the first time reduce loops we dont have a total
+      and its equal to undefined. so what we need to do is use the second
+      argument (initialValue) to reduce with the value 0. this means reduce
+      will use 0 as the initial value so we will not get undefined anymore
+      and our years will properly add up.
+    */
+    const totalYears = inventors.reduce((total, inventor) => {
+      return total + (inventor.passed - inventor.year);
+    }, 0);
+
+    console.log('totalYears: ', totalYears);
 
     // 5. Sort the inventors by years lived
 
+    const oldest = inventors.sort((a, b) => {
+      const lastGuy = a.passed - a.year;
+      const nextGuy = b.passed - b.year;
+      return lastGuy > nextGuy ? -1 : 1;
+    });
+    console.log('oldest: ', oldest);
+
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
-
-
+    // use this js in the console of the wiki page
+    
+    // const links = category.querySelectorAll('a');
+    // qSA returns a nodelist but only forEach is available
+    // on nodeLists so lets turn it into an array so we can run
+    // map on it, first, wrap it in an array then we can use es6 
+    // spread operator to spread each item into the array
+    // into the array.
+    // we can also simply wrap it in Array.from(category.quer...)
+    // i like using es6 so im using that one, even tho Array.from
+    // reads better
+    // const category = document.querySelector('.mw-category');
+    // const links = [...category.querySelectorAll('a')];
+    // const de = links
+    //   .map(link => link.textContent)
+    //   .filter(streetName => streetName.includes('de'));
+    // console.log('de: ', de);
     // 7. sort Exercise
     // Sort the people alphabetically by last name
-
+    const alpha = people.sort((lastOne, nextOne) => {
+      const [aLast, aFirst] = lastOne.split(', ');
+      const [bLast, bFirst] = nextOne.split(', ');
+      console.log('aLast, aFirst: ', aLast, aFirst);
+      console.log('bLast, bFirst: ', bLast, bFirst);
+      return aLast > bLast ? 1 : -1;
+      // console.log('lastOne: ', lastOne);
+      // console.log('nextOne: ', nextOne);
+    });
+    console.log('alpha: ', alpha);
     // 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' ];
-
+    // start our reduce with an empty object that we add to
+    // as seen in second argument in the reduce method
+    const transportation = data.reduce((obj, item) => {
+      // console.log('transportation item: ', item);
+      // what we want to do is to increment our object key
+      // so we can tally how many instances of the key there are
+      // we need to check first if there is an item of an obj or not
+      // if it doesnt we can set it to 0 and increment and return it
+      if (!obj[item]) {
+        obj[item] = 0;
+      }
+      obj[item]++;
+      return obj;
+    }, {});
+  console.log('transportation: ', transportation);
   </script>
 </body>
 </html>

From b650930b9001247b0e533bfab51ee4bd3b3fb573 Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Sat, 16 Jun 2018 11:32:55 -0700
Subject: [PATCH 10/17] flex gallerying, animation and transforming here is
 cool

---
 05 - Flex Panel Gallery/index-START.html | 54 ++++++++++++++++++++----
 1 file changed, 46 insertions(+), 8 deletions(-)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index c6509bed02..7e271d800a 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -22,16 +22,17 @@
     }
 
     .panels {
+      display: flex;
       min-height:100vh;
       overflow: hidden;
     }
 
     .panel {
-      background:#6B0F9C;
-      box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
-      color:white;
-      text-align: center;
-      align-items:center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
       /* Safari transitionend event.propertyName === flex */
       /* Chrome + FF transitionend event.propertyName === flex-grow */
       transition:
@@ -39,8 +40,12 @@
         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;
+      text-align: center;
+      background-size: cover;
+      background-position: center;
+      background: #6B0F9C;
+      box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
+      color: white;
     }
 
 
@@ -51,25 +56,47 @@
     .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
 
     .panel > * {
+      display: flex;
+      flex: 1 0 auto;
+      justify-content: center;
+      align-items: center;
       margin:0;
       width: 100%;
       transition:transform 0.5s;
     }
 
+    .panel > *:first-child {
+      transform: translateY(-100%);
+    }
+
+    .panel > *:last-child {
+      transform: translateY(100%);
+    }
+
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
       text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
       font-size: 2em;
     }
+    
     .panel p:nth-child(2) {
       font-size: 4em;
     }
 
     .panel.open {
+      flex: 5;
       font-size:40px;
     }
 
+    .panel.open-active > *:first-child {
+      transform: translateY(0);
+    }
+
+    .panel.open-active > *:last-child {
+      transform: translateY(0);
+    }
+
   </style>
 
 
@@ -102,7 +129,18 @@
   </div>
 
   <script>
-
+    const panels = document.querySelectorAll('.panel');
+    function toggleOpen () {
+      this.classList.toggle('open');
+    }
+    function toggleActive (event) {
+      if (event.propertyName.includes('flex')) {
+        this.classList.toggle('open-active');
+      }
+      console.log('event property name: ', event.propertyName);
+    }
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
   </script>
 
 

From 756d8ce01531fd9c7ec528f8d0f9c9b2ec1a612b Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Sun, 17 Jun 2018 12:21:35 -0700
Subject: [PATCH 11/17] man some really really useful stuff in this one, from
 fetching data to working with it on the user end to redisplay it, so much to
 learn here take this one slow, mad real world here!

---
 06 - Type Ahead/index-START.html | 130 +++++++++++++++++++++++++++++--
 1 file changed, 125 insertions(+), 5 deletions(-)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..149e3bbccf 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -6,7 +6,6 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-
   <form class="search-form">
     <input type="text" class="search" placeholder="City or State">
     <ul class="suggestions">
@@ -14,9 +13,130 @@
       <li>or a state</li>
     </ul>
   </form>
-<script>
-const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+  <script>
+    const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+    // lets create an empty array to hold our cities
+    const cities = [];
+    
+    fetch(endpoint)
+    .then(
+      data => {
+      /* if you check the log at this point you
+        will see that its a Response and a 200 status
+        looks good but beyond that its weird looking and where
+        actually is our data? (this is why wes calls this var 'blob')
+        because we dont know what type of data this is coming back yet:
+        html, video, image, audio, document etc. we know that it IS json
+        so the raw data needs to be converted TO json. if you look in the
+        log under Response prototype you will see a json: json() method
+        so if we call data.json() (wes uses blob) that will return another
+        promise containing our data in json format
+      */
+      data.json()
+      /* 
+        ok cool so now how do we get our data into our cities[] array?
+        since its a const we cant just assign cites = data, you could use let
+        but if you want to keep your variable as const you can push the data
+        items into the cities array
+        .then(data => cities.push(data));
+        if you do this then you are nesting your data and you'll be placing an array
+        inside the cities array. (probably not what we want)
+        notice that every time you push something to the cities array it adds a new
+        item in the cities array. so the way that we can change this array into 
+        individual arguments is we _spread into it_ via the es6 spread operator! 
+      */
+    .then(data => cities.push(...data));
+    });
+    /* next when someone types into the text input we want to write
+    a function (findMatches()) that takes this massive cites array and 
+    filters it down into a subset where you can then listen for it
+    findMatches will define the wordToMatch and it will also take in our
+    cities array as the functions data that its going to filter. from that
+    we are going to return the cities array and call filter on it which
+    will chisle it down
+    */
+    const findMatches = (wordToMatch, cities) => {
+      return cities.filter(place => {
+        /* 
+          here we need to figure out if the city or state matches
+          what was searched (our `wordToMatch`)
+          we are going to need a regular expression here.
+          we need to put a variable `wordToMatch`
+          in a regular expression and then pass in any flags we want.
+          `g` is for global - meaning its going to look thru the entire
+          string for that specific one, `i` is insensitve meaning its case
+          insensitive and will match on either uppercase or lowercase.
+          then we call .match and pass in our regex and return if either
+          a city or state from `wordToMatch` matches  
+        */
+        const regex = new RegExp(wordToMatch, 'gi');
+        return place.city.match(regex) || place.state.match(regex);
+      });
+    };
+    /*
+    now we need to create a displayMatches function
+    that is going to be called every time someone
+    changes the value
+    */
+    const searchInput = document.querySelector('.search');
+    const suggestions = document.querySelector('.suggestions');
+    // wes didnt explain this function just that it formats a string into
+    // commented one and just grabbed it from the internet
+    const numberWithCommas = (x) => {
+      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    };
 
-</script>
-  </body>
+    const displayMatches = () => {
+      // console.log('this value in displayMatches: ', searchInput.value);
+      // console.log('this value in displayMatches: ', this.value);
+      // note if you are not using an arrow function use this which refers
+      // to the searchInput
+      // so in here we are going to use findMatches:
+      const matchArray = findMatches(searchInput.value, cities);
+      // console.log('matchArray: ', matchArray);
+      // when we map over each place the map method will return an
+      // array, when we really want one string, so we can call a quick
+      // .join on the end and that will turn it from an array with 
+      // multiple items, into one big string
+      const html = matchArray.map(place => {
+        // const regex = new RegExp(this.value, 'gi');
+        // const cityName = place.city.replace(
+        //   regex, 
+        //   `<span class="hl">${this.value}</span>`
+        // );
+        const regex = new RegExp(searchInput.value, 'gi');
+        const cityName = place.city.replace(
+          regex, 
+          `<span class="hl">${searchInput.value}</span>`
+        );
+        const stateName = place.state.replace(
+          regex, 
+          `<span class="hl">${searchInput.value}</span>`
+        );
+        return `
+          <li>
+            <span class="name">${cityName}, ${stateName}</span>
+            <span class="population">${numberWithCommas(place.population)}</span>
+          </li>
+        `;
+      })
+      .join('');
+      suggestions.innerHTML = html;
+    };
+    
+    searchInput.addEventListener('change', displayMatches);
+    // at this point we only listen for change which happens when
+    // a user focuses off the input, not when they type something different
+    // so lets add another listener and run displayMatches on keyup
+    searchInput.addEventListener('keyup', displayMatches);
+    /*
+      couple last things we need to do here is to format the population
+      value as well as highlighting the input value if it matches
+      lets go back to our displayMatches map function and before that return lets
+      create a regex that will match the city name and then we'll use
+      that regex to replace the word that it matches with a span with
+      a class of `hl` and the word that it matches
+    */
+  </script>
+</body>
 </html>

From af80a2e5073d165f2cf620aeacc7ad7243aec79e Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Mon, 18 Jun 2018 20:13:43 -0700
Subject: [PATCH 12/17] updating some comments and moved some code around to
 make it read better

---
 06 - Type Ahead/index-START.html | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 149e3bbccf..c61a5c7e16 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -21,7 +21,7 @@
     fetch(endpoint)
     .then(
       data => {
-      /* if you check the log at this point you
+      /* if you check console.log(data) at this point you
         will see that its a Response and a 200 status
         looks good but beyond that its weird looking and where
         actually is our data? (this is why wes calls this var 'blob')
@@ -66,8 +66,8 @@
           `g` is for global - meaning its going to look thru the entire
           string for that specific one, `i` is insensitve meaning its case
           insensitive and will match on either uppercase or lowercase.
-          then we call .match and pass in our regex and return if either
-          a city or state from `wordToMatch` matches  
+          then we call .match and pass in the value of our regex wordToMatch
+          and return if either a city or state from `wordToMatch` matches  
         */
         const regex = new RegExp(wordToMatch, 'gi');
         return place.city.match(regex) || place.state.match(regex);
@@ -76,15 +76,10 @@
     /*
     now we need to create a displayMatches function
     that is going to be called every time someone
-    changes the value
+    changes the value in our search input
     */
     const searchInput = document.querySelector('.search');
     const suggestions = document.querySelector('.suggestions');
-    // wes didnt explain this function just that it formats a string into
-    // commented one and just grabbed it from the internet
-    const numberWithCommas = (x) => {
-      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    };
 
     const displayMatches = () => {
       // console.log('this value in displayMatches: ', searchInput.value);
@@ -123,7 +118,14 @@
       .join('');
       suggestions.innerHTML = html;
     };
+
+    // wes didnt explain this function just that it formats a string into
+    // commented one and just grabbed it from the internet
+    const numberWithCommas = (x) => {
+      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    };
     
+    console.log('cites: ', cities);
     searchInput.addEventListener('change', displayMatches);
     // at this point we only listen for change which happens when
     // a user focuses off the input, not when they type something different

From d2a4573dbdc7e102847de275ef342aa378afdad6 Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Wed, 20 Jun 2018 20:33:58 -0700
Subject: [PATCH 13/17] housekeeping

---
 06 - Type Ahead/index-START.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index c61a5c7e16..d661443076 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -45,7 +45,7 @@
         item in the cities array. so the way that we can change this array into 
         individual arguments is we _spread into it_ via the es6 spread operator! 
       */
-    .then(data => cities.push(...data));
+      .then(data => cities.push(...data));
     });
     /* next when someone types into the text input we want to write
     a function (findMatches()) that takes this massive cites array and 

From 22de835015a41e2a80c74b25626cd6b69d667ac3 Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Mon, 9 Jul 2018 18:31:46 -0700
Subject: [PATCH 14/17] array cardio day 2 donez0

---
 07 - Array Cardio Day 2/index-START.html | 69 +++++++++++++++++++++++-
 1 file changed, 67 insertions(+), 2 deletions(-)

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..866199d266 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,80 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+    // const isAdult = people.some((person) => {
+    //   const currentYear = (new Date()).getFullYear();
+    //   if (currentYear - person.year >= 19) {
+    //     return true;
+    //   }
+    // });
+    // we can rewrite the above with a simpler return:
+    // const isAdult = people.some((person) => {
+    //   const currentYear = (new Date()).getFullYear();
+    //   console.log({currentYear});
+    //   return currentYear - person.year >= 19;
+    // });
+    // heres the HOT SHOT version:
+    const isAdult = people.some(
+      person => ( (new Date()).
+      getFullYear() ) - person.year >= 19
+    );
+    console.log({isAdult});
     // Array.prototype.every() // is everyone 19 or older?
-
+    const allAdults = people.every(
+      person => ( (new Date()).
+      getFullYear() ) - 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(
+    //   (comment) => {
+    //     if (comment.id === 823423) {
+    //       return true;
+    //     }
+    //   }
+    // );
+    // console.log({comment});
+    // heres the hotshot version -
+    // we dont need the if statement
+    // because our return is going to be
+    // either true or false:
+    const comment = comments.find(
+      comment => comment.id === 823423
+    );
+    console.log({comment});
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const index = comments.findIndex(comment => comment.id === 823423);
+    console.log({index});
+    // to delete it we can do that a couple of ways:
+    // comments.splice(index, 1);
+    console.table(comments);
+    /* 
+      wes didnt do this but i think if i was going to
+      use splice id assign it to a var so i wasnt changing
+      the actual array... 
+    */
+    const splicedComments = comments.splice(index, 1);
+    console.log({splicedComments});
+    // you can see now that the super good comment is gone
+    // you can also do it by creating a new array of updated comments:
+    // const newComments = [
+    //   comments.slice(0, index),
+    //   comments.slice(index + 1)
+    // ];
+    // console.log({newComments});
+    // oops notice in the log that we have arrays in the 
+    // array? thats because we didnt spread into the array:
+    const newComments = [
+      ...comments.slice(0, index),
+      ...comments.slice(index + 1)
+    ];
+    console.log({newComments});
+
+
 
   </script>
 </body>

From 40828a0e607297c93a0883c19480d8d80492a82e Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Mon, 9 Jul 2018 19:30:00 -0700
Subject: [PATCH 15/17] committing about halfway thru, this is a really cool
 canvas example for drawing and using events

---
 08 - Fun with HTML5 Canvas/index-START.html | 58 +++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..aac38b96c1 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,64 @@
 <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';
+  /*  
+    we need a flag here that we set to false,
+    then when the user clicks down we set it to true,
+    lastly, when you click up, when you let go of the button
+    we set it to false, this flag tells us should we actually
+    draw to this canvas or is someone just moving their mouse around.
+  */
+  let isDrawing = false;
+  /*
+  in order to draw a line you need a starting x, y and an ending
+  x, y. you cant just say draw a line at 100, 100.
+  so we need two vars to keep track of where we start and stop
+  our lines from
+  */
+  let lastX = 0;
+  let lastY = 0;
+  // now we are going to create a function that will be called
+  // every time a user moves their mouse over the canvas
+  function draw(event) {
+    // console.log({event});
+    // so this runs draw every time someone moves
+    // their mouse which we dont want so lets start
+    // our check and return early if they are not moused down
+    if (!isDrawing) return;
+    ctx.beginPath();
+    // start from
+    ctx.moveTo(lastX, lastY);
+    // go to
+    ctx.lineTo(event.offsetX, event.offsetY);
+    ctx.stroke();
+    // now we need to update our lastX and lastY vars to the new coords
+    // lastX = event.offsetX;
+    // lastY = event.offsetY;
+    // we can do this in one line with es6 destructuring assignment:
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+    [lastX, lastY] = [event.offsetX, event.offsetY];
+  }
+  canvas.addEventListener('mousedown', (event) => {
+    /*
+      as soon as the user clicks their mouse down to start
+      and before we do a mousemove (because mousedown event happens
+      before the mousemove event) then we are going to update lastY and 
+      lastY
+     */
+    isDrawing = true;
+    [lastX, lastY] = [event.offsetX, event.offsetY];
+  });
+  canvas.addEventListener('mousemove', draw);
+  canvas.addEventListener('mouseup', () => isDrawing = false);
+  canvas.addEventListener('mouseout', () => isDrawing = false);
+  // console.log({canvas});
 </script>
 
 <style>

From d6e51fd1c19c63fa86216eb21d2bd52679cb9b91 Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Wed, 18 Jul 2018 19:08:07 -0700
Subject: [PATCH 16/17] some comment housekeeping

---
 08 - Fun with HTML5 Canvas/index-START.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index aac38b96c1..1714868a30 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -18,13 +18,13 @@
     we need a flag here that we set to false,
     then when the user clicks down we set it to true,
     lastly, when you click up, when you let go of the button
-    we set it to false, this flag tells us should we actually
+    we set it to false, this flag tells us if we should actually
     draw to this canvas or is someone just moving their mouse around.
   */
   let isDrawing = false;
   /*
-  in order to draw a line you need a starting x, y and an ending
-  x, y. you cant just say draw a line at 100, 100.
+  in order to draw a line you need a starting x, y point and an ending
+  x, y. point. you cant just say draw a line at 100, 100.
   so we need two vars to keep track of where we start and stop
   our lines from
   */

From 9d300ca52e95d49d215907a0aaaf5304c91fbde7 Mon Sep 17 00:00:00 2001
From: Clint Fisher <clintfisher.is@gmail.com>
Date: Wed, 18 Jul 2018 21:02:36 -0700
Subject: [PATCH 17/17] ok finished this canvas exercise, i think we should
 build this into our alpha app, it would be fun

---
 08 - Fun with HTML5 Canvas/index-START.html | 35 ++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 1714868a30..28a848f9f2 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -14,6 +14,12 @@
   ctx.strokeStyle = '#BADA55';
   ctx.lineJoin = 'round';
   ctx.lineCap = 'round';
+  ctx.lineWidth = 5;
+  /* you can also use blend modes:
+    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
+  */
+  ctx.globalCompositeOperation = 'multiply';
+  
   /*  
     we need a flag here that we set to false,
     then when the user clicks down we set it to true,
@@ -30,18 +36,28 @@
   */
   let lastX = 0;
   let lastY = 0;
+  /* 
+  hue of hsl is determined by degrees - 0 is red as is 359
+  lets start at red
+  */ 
+  let hue = 0;
+  // true means we are building up
+  let direction = true;
   // now we are going to create a function that will be called
   // every time a user moves their mouse over the canvas
-  function draw(event) {
+  const draw = (event) => {
     // console.log({event});
     // so this runs draw every time someone moves
     // their mouse which we dont want so lets start
     // our check and return early if they are not moused down
     if (!isDrawing) return;
+    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+    // ctx.lineWidth = hue;
     ctx.beginPath();
     // start from
     ctx.moveTo(lastX, lastY);
     // go to
+    // offsetX and offSetY you can see in the even log
     ctx.lineTo(event.offsetX, event.offsetY);
     ctx.stroke();
     // now we need to update our lastX and lastY vars to the new coords
@@ -50,6 +66,23 @@
     // we can do this in one line with es6 destructuring assignment:
     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
     [lastX, lastY] = [event.offsetX, event.offsetY];
+    // increment our hue each time we draw to change
+    // the color of the strokeStyle
+    hue++;
+    // if we rotate past 360 just set it back  to 0
+    if (hue >= 360) {
+      hue = 0;
+    }
+    // our initial lineWidth is 0 so we go from 0 to 100 then flip
+    // and when we decrement once we hit 0 we flip our direction
+
+    if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+      // flip the direction
+      direction = !direction;
+    }
+    // anytime the direction is true we want to make our 
+    // drawing line wider otherise we  make it narrower
+    direction ? ctx.lineWidth++ : ctx.lineWidth--;  
   }
   canvas.addEventListener('mousedown', (event) => {
     /*