From 94702156cd87ad5ea1cdf3882d991d7e8c40b390 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Mon, 19 Dec 2016 12:37:58 -0500
Subject: [PATCH 01/25] added keydown function and able to log out each key
 press

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..2172511c9a 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -9,7 +9,7 @@
 
 
   <div class="keys">
-    <div data-key="65" class="key">
+    <div data-key="65" class="key" onkeypress="keyPress(event)">
       <kbd>A</kbd>
       <span class="sound">clap</span>
     </div>
@@ -58,6 +58,19 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  document.onkeydown = function(event) {
+    var key = event.keyCode;
+    var elements = document.getElementsByClassName('key');
+
+    for(var i = 0; i < elements.length; i++) {
+
+      if(elements[i].dataset.key == key) {
+        console.log(key);
+      }
+    }
+
+
+  }
 
 </script>
 

From 36bbb5c6fd79bfbca7037dc47d504395faaf5b60 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Mon, 19 Dec 2016 14:35:37 -0500
Subject: [PATCH 02/25] added playing css class when key is pressed and set
 setTimeout to be removed quickly

---
 01 - JavaScript Drum Kit/index-START.html | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 2172511c9a..bae66aae34 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -9,7 +9,7 @@
 
 
   <div class="keys">
-    <div data-key="65" class="key" onkeypress="keyPress(event)">
+    <div data-key="65" class="key">
       <kbd>A</kbd>
       <span class="sound">clap</span>
     </div>
@@ -59,17 +59,22 @@
 
 <script>
   document.onkeydown = function(event) {
-    var key = event.keyCode;
     var elements = document.getElementsByClassName('key');
+    var key = event.keyCode;
 
     for(var i = 0; i < elements.length; i++) {
-
       if(elements[i].dataset.key == key) {
-        console.log(key);
-      }
-    }
+        var currentElement = elements[i];
+        currentElement.classList.add('playing');
 
+        (function(element) {
+          setTimeout(function() {
+            element.classList.remove('playing');
+          }, 100);
+        })(currentElement);
 
+      }
+    }
   }
 
 </script>

From 5925408dcc9b552eda8c0ceccc8e4cf4a3b56fc3 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Mon, 19 Dec 2016 14:57:06 -0500
Subject: [PATCH 03/25] added sound function and added play sound if specific
 key is pressed

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index bae66aae34..49ca623585 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,21 +58,42 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  /*************************************
+  When user presses down on one of the keys:
+    1. function will loop through all keys
+  *************************************/
   document.onkeydown = function(event) {
     var elements = document.getElementsByClassName('key');
     var key = event.keyCode;
 
     for(var i = 0; i < elements.length; i++) {
+      /*************************************
+      2. if key pressed equals one of the given keys then add 'playing' class
+      *************************************/
       if(elements[i].dataset.key == key) {
         var currentElement = elements[i];
         currentElement.classList.add('playing');
-
+        /*************************************
+        3. find matching sound key and play
+        *************************************/
+        sound(key);
+        /*************************************
+        4. then after .1 of a second, remove the 'playing' class
+        *************************************/
         (function(element) {
           setTimeout(function() {
             element.classList.remove('playing');
           }, 100);
         })(currentElement);
+      }
+    }
+  }
 
+  function sound(key) {
+    var elements = document.querySelectorAll('audio');
+    for(var i = 0; i < elements.length; i++) {
+      if(elements[i].dataset.key == key) {
+        elements[i].play();
       }
     }
   }

From d8bc2f6da8dfdf7fdc2a81cecf46bf58ade84b1f Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Mon, 19 Dec 2016 18:19:21 -0500
Subject: [PATCH 04/25] modified and simplified code

---
 01 - JavaScript Drum Kit/index-START.html | 51 +++++++++++------------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 49ca623585..1dad5c2244 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -59,42 +59,39 @@
 
 <script>
   /*************************************
-  When user presses down on one of the keys:
-    1. function will loop through all keys
+  1. When user presses down on one of the keys, function will run
   *************************************/
   document.onkeydown = function(event) {
-    var elements = document.getElementsByClassName('key');
     var key = event.keyCode;
-
-    for(var i = 0; i < elements.length; i++) {
+    var element = document.querySelector(`div[data-key="${key}"]`);
+    /*************************************
+    2. If key pressed equals one of the given keys then add 'playing' class
+    *************************************/
+    if(element) {
+      element.classList.add('playing');
+      /*************************************
+      3. Find matching sound key and play
+      *************************************/
+      sound(key);
       /*************************************
-      2. if key pressed equals one of the given keys then add 'playing' class
+      4. Then remove the 'playing' class
       *************************************/
-      if(elements[i].dataset.key == key) {
-        var currentElement = elements[i];
-        currentElement.classList.add('playing');
-        /*************************************
-        3. find matching sound key and play
-        *************************************/
-        sound(key);
-        /*************************************
-        4. then after .1 of a second, remove the 'playing' class
-        *************************************/
-        (function(element) {
-          setTimeout(function() {
-            element.classList.remove('playing');
-          }, 100);
-        })(currentElement);
-      }
+      var keys = document.querySelectorAll('.key');
+      keys.forEach(key => key.addEventListener('transitionend', removeClass));
     }
   }
 
+  function removeClass(event) {
+    if(event.propertyName !== 'transform') return; // skip if not a transform
+    this.classList.remove('playing');
+  }
+
   function sound(key) {
-    var elements = document.querySelectorAll('audio');
-    for(var i = 0; i < elements.length; i++) {
-      if(elements[i].dataset.key == key) {
-        elements[i].play();
-      }
+    var element = document.querySelector(`audio[data-key="${key}"]`);
+
+    if(element) {
+      element.currentTime = 0; // rewinds to the start if user continously presses key
+      element.play();
     }
   }
 

From 46f72f2153641aaf4ce0b307a671b3c68bf555ab Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Tue, 20 Dec 2016 09:32:39 -0500
Subject: [PATCH 05/25] added clock css animation

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

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..2a9d852ef4 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -61,12 +61,18 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.02, 2.54, 0.58, 1);
     }
 
   </style>
 
   <script>
-
+    function clock() {
+      var time = new Date();
+    }
 
   </script>
 </body>

From 68ff292f1ceb74232795e1e7023cc6324fa8e6ac Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Tue, 20 Dec 2016 09:53:46 -0500
Subject: [PATCH 06/25] added JS knowledge to make clock hands rotate

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

diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2a9d852ef4..9829779353 100644
--- a/02 - JS + CSS Clock/index-START.html	
+++ b/02 - JS + CSS Clock/index-START.html	
@@ -70,10 +70,35 @@
   </style>
 
   <script>
-    function clock() {
-      var time = new Date();
-    }
+    const secondHand = document.querySelector('.second-hand');
+    const minHand = document.querySelector('.min-hand');
+    const hourHand = document.querySelector('.hour-hand');
 
+    function setDate() {
+      const now = new Date();
+      /*************************************
+      Seconds
+      *************************************/
+      const seconds = now.getSeconds();
+      const secondsDegrees = ((seconds / 60) * 360) + 90; // added 90 to set default to top of clock
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`
+      /*************************************
+      Minutes
+      *************************************/
+      const minutes = now.getMinutes();
+      const minDegrees = ((minutes / 60) * 360) + 90;
+      minHand.style.transform = `rotate(${minDegrees}deg)`
+      /*************************************
+      Hours
+      *************************************/
+      const hours = now.getHours();
+      const hourDegrees = ((hours / 12) * 360) + 90;
+      hourHand.style.transform = `rotate(${hourDegrees}deg)`
+    }
+    /*************************************
+    Funtion will run every second
+    *************************************/
+    setInterval(setDate, 1000);
   </script>
 </body>
 </html>

From 88cd26bc123795b45fd8280cd83c30d510b35f76 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Mon, 26 Dec 2016 13:56:58 -0500
Subject: [PATCH 07/25] added CSS variables and changed variables through JS

---
 03 - CSS Variables/index-START.html | 30 ++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..3feb3e7654 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -21,10 +21,24 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    /**********************
+    Globally set variables
+    **********************/
+    :root {
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img {
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
 
-    /*
-      misc styles, nothing to do with CSS variables
-    */
+    .hl {
+      color: var(--base);
+    }
 
     body {
       text-align: center;
@@ -48,6 +62,16 @@ <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.sizing || '';
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
+    }
+
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+
   </script>
 
 </body>

From cd0c6ce8fd5aa016c6407e95c0cd098f7ac4c298 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Wed, 4 Jan 2017 10:14:26 -0500
Subject: [PATCH 08/25] created filter method for inventors

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce339..816d2f442e 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -33,6 +33,16 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+      // filter will loop over array and give us 'inventor'
+
+      // const fifteen = inventors.filter(function(inventor) {
+      //   if(inventor.year >= 1500 && inventor.year < 1600) {
+      //     return true; // keep it!
+      //   }
+      // });
+
+    const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
+    console.table(fifteen);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names

From 4f5826ee96b18324cacad61b17eb03730d96985f Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Wed, 4 Jan 2017 10:19:24 -0500
Subject: [PATCH 09/25] created inventors.map array of first and last name

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 816d2f442e..82522927db 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -46,6 +46,10 @@
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+      // will always return same amout of items as you give it
+
+    const fullName = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
+    console.log(fullName);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest

From dbafd40c5b427604ffe7090d942067a702792212 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Wed, 4 Jan 2017 10:27:49 -0500
Subject: [PATCH 10/25] created inventors.sort and sorted youngest to oldest

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 82522927db..63c90d67ca 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -54,6 +54,18 @@
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
 
+      // const ordered = inventors.sort(function(firstPerson, lastPerson) {
+      //   if(firstPerson.year > lastPerson.year) {
+      //     // this moves people up and down in array
+      //     return 1;
+      //   } else {
+      //     return -1;
+      //   }
+      // });
+
+    const ordered = inventors.sort((firstPerson, lastPerson) => firstPerson.year > lastPerson.year ? 1 : -1)
+    console.table(ordered);
+
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
 

From e9cd9f75002181e254e4effd3fe28a113591ac01 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Wed, 4 Jan 2017 10:34:03 -0500
Subject: [PATCH 11/25] created inventors.reduce - how many years did all the
 inventors live

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 63c90d67ca..70dec20c03 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -68,6 +68,13 @@
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+      // reduce is returning what was previously returned before
+      // setting 'total' to 0
+
+    const totalYears = inventors.reduce((total, inventor) => {
+      return total + (inventor.passed - inventor.year);
+    }, 0);
+    console.log(totalYears);
 
     // 5. Sort the inventors by years lived
 

From 694e8bc3c50bdc327183abd7a32502e7f343d9ba Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Wed, 4 Jan 2017 11:15:01 -0500
Subject: [PATCH 12/25] created reduce and sort exercises

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 70dec20c03..25b049ed41 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -78,17 +78,51 @@
 
     // 5. Sort the inventors by years lived
 
+    const oldest = inventors.sort(function(a, b) {
+      const lastGuy = a.passed - a.year;
+      const nextGuy = b.passed - b.year;
+      return lastGuy > nextGuy ? -1 : 1;
+      // if(lastGuy > nextGuy) {
+      //   return -1;
+      // } else {
+      //   return 1
+      // }
+    });
+    console.table(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
+      // Array.from converts nodelist into an array
 
+    // const category = document.querySelector('.mw-category');
+    // const links = Array.from(category.querySelectorAll('a'));
+    //
+    // const de = links
+    //               .map(link => link.textContent)
+    //               .filter(streetName => streetName.includes('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(', ');
+      return alast > blast ? 1 : -1;
+    });
+
+    console.log(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' ];
 
+    const transportation = data.reduce((obj, item) => {
+      if(!obj[item]) {
+        obj[item] = 0;
+      }
+      obj[item]++;
+      return obj;
+    }, {} );
+    console.log(transportation);
   </script>
 </body>
 </html>

From 50649160600a6bc56bec6bd95c266840ff0d1f37 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Mon, 9 Jan 2017 15:03:53 -0500
Subject: [PATCH 13/25] added flex panel transitions to panels

---
 05 - Flex Panel Gallery/index-START.html | 42 +++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..9bdd0aec63 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -24,6 +24,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
@@ -41,19 +42,44 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1; /* Distributes each panel evenly across screen */
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
     }
 
-
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
     .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
     .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
     .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;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .panel > *:first-child {
+      transform: translateY(-100%);
+    }
+
+    .panel.open-active > *:first-child {
+      transform: translateY(0);
+    }
+
+    .panel > *:last-child {
+      transform: translateY(100%);
+    }
+
+    .panel.open-active > *:last-child {
+      transform: translateY(0);
     }
 
     .panel p {
@@ -68,6 +94,7 @@
 
     .panel.open {
       font-size:40px;
+      flex: 5; /* takes 5 times the extra room verses evenly distributing */
     }
 
     .cta {
@@ -107,7 +134,20 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel');
+
+    function toggleOpen() {
+      this.classList.toggle('open');
+    }
+
+    function toggleActive(e) {
+      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>
 
 

From 727fa9d08e682b4855a11bc1d13ea367861dd2dc Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Mon, 9 Jan 2017 15:36:05 -0500
Subject: [PATCH 14/25] added fetch endpoint

---
 06 - Type Ahead/index-START.html | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..f3e1c4e8fb 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -16,7 +16,24 @@
   </form>
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+const cities = [];
 
+// Fetch will return a promise - no need for callback
+fetch(endpoint)
+  .then(blob => blob.json()) // it doesn't know it's a JSON file being called
+  .then(data => cities.push(...data)); // ES6's new way of pushing individual elements of an array into another array
+
+function findMatches(wordToMatch, cities) {
+  return cities.filter(place => {
+    const regex = new RegExp(wordToMatch, 'gi') // gi = global and insensitive: searches for uppercase and lowercase
+
+    return place.city.match(regex) || place.state.match(regex);
+  })
+}
+
+function displayMatches() {
+  
+}
 </script>
   </body>
 </html>

From 6af1a484c062070fc6bb4e65812fe655181f3dc4 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Wed, 11 Jan 2017 14:54:28 -0500
Subject: [PATCH 15/25] added displayMatches function

---
 06 - Type Ahead/index-START.html | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index f3e1c4e8fb..c62aa634d7 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -21,19 +21,40 @@
 // Fetch will return a promise - no need for callback
 fetch(endpoint)
   .then(blob => blob.json()) // it doesn't know it's a JSON file being called
-  .then(data => cities.push(...data)); // ES6's new way of pushing individual elements of an array into another array
+  .then(data => cities.push(...data)); // (spreading) ES6's new way of pushing individual elements of an array into another array
 
 function findMatches(wordToMatch, cities) {
   return cities.filter(place => {
     const regex = new RegExp(wordToMatch, 'gi') // gi = global and insensitive: searches for uppercase and lowercase
-
     return place.city.match(regex) || place.state.match(regex);
   })
 }
 
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
 function displayMatches() {
-  
+  const matchArray = findMatches(this.value, cities);
+  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 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(''); // turns array into string
+  suggestions.innerHTML = html;
 }
+
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+searchInput.addEventListener('change', displayMatches)
+searchInput.addEventListener('keyup', displayMatches)
 </script>
   </body>
 </html>

From c96002caacfc078a5eda7c3480aea21c9c111b17 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Fri, 3 Feb 2017 08:00:22 -0500
Subject: [PATCH 16/25] completed canvas exercise

---
 07 - Array Cardio Day 2/index-START.html    | 14 ++++++-
 08 - Fun with HTML5 Canvas/index-START.html | 42 +++++++++++++++++++++
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 206ec31aa0..ba375feb04 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,25 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19?
+    const isAdult = people.some(person => {
+      const currentYear = (new Date()).getFullYear();
+      return currentYear - person.year >= 19;
+    });
+    console.log({isAdult});
     // Array.prototype.every() // is everyone 19?
-
+    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 findComment = comments.find(comment => comment.id === 823423);
+    console.log({findComment});
     // 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);
+    comments.splice(index, 1);
+    console.table(comments);
 
   </script>
 </body>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..ac95e17974 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,6 +7,48 @@
 <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';
+  ctx.lineWidth = 100;
+
+  let isDrawing = false;
+  // where you start the line drawn and where you end it
+  let lastX = 0;
+  let lastY = 0;
+  let hue = 0;
+  let direction = true;
+
+  function draw(e) {
+    if(!isDrawing) return; // stop the fn from running when they are not moused down
+
+    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+    ctx.beginPath();
+    ctx.moveTo(lastX, lastY);
+    ctx.lineTo(e.offsetX, e.offsetY);
+    ctx.stroke();
+    // Destructuring an Array
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+
+    hue++;
+    if(hue >= 360) hue = 0;
+
+    if(ctx.lineWidth >= 100 || ctx.lineWidth <= 1) direction = !direction;
+    direction ? ctx.lineWidth++ : ctx.lineWidth--;
+  }
+
+  canvas.addEventListener('mousemove', draw);
+  canvas.addEventListener('mousedown', (e) => {
+    isDrawing = true;
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+  });
+  canvas.addEventListener('mouseup', () => isDrawing = false);
+  canvas.addEventListener('mouseout', () => isDrawing = false);
 </script>
 
 <style>

From 4573a8b2c4df62b6518621720cbe630fa518e9bd Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Fri, 3 Feb 2017 08:26:11 -0500
Subject: [PATCH 17/25] learning new console tricks

---
 09 - Dev Tools Domination/index-START.html | 33 +++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..1a2e9b16cc 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -18,29 +18,60 @@
     }
 
     // Regular
+    console.log('Hey there.');
 
     // Interpolated
+    const obj = 'Dino';
+    console.log('I am a %s', 'CAT');
+    console.log(`Wow, look at the ${obj}`);
 
     // Styled
+    console.log('%c I am some awesome text', 'font-size:20px; font-weight:bold');
 
     // warning!
+    console.warn('NOOO');
 
     // Error :|
+    console.error('Theres an error')
 
     // Info
+    console.info('I am 3/4 French.');
 
     // Testing
+    console.assert(1 === 2, 'That is WRONG');
 
     // clearing
+    // console.clear();
 
     // Viewing DOM Elements
+    const p = document.querySelector('p');
+    console.dir(p);
 
     // Grouping together
+    dogs.forEach(dog => {
+      console.group(`${dog.name}`);
+        console.log(`This is ${dog.name}`);
+        console.log(`${dog.name} is ${dog.age} years old`);
+        console.log(`${dog.name} is ${dog.age * 7} years old`);
+      console.groupEnd(`${dog.name}`);
+    });
 
     // counting
+    console.count('Chloe');
+    console.count('Chloe');
+    console.count('Chloe');
+    console.count('Chloe');
 
     // timing
-
+    // console.time('fetching data');
+    //   fetch('url')
+    //     .then(data => data.json())
+    //     .then(data => {
+    //       console.timeEnd('fetching data');
+    //       console.log(data);
+    //     })
+
+    console.table(dogs);
   </script>
 </body>
 </html>

From d1158c1d8bf0af06f8e05c42434118e03efadbe0 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Wed, 8 Feb 2017 09:12:21 -0500
Subject: [PATCH 18/25] completed shift key checkbox

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

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index eb7ed310bb..3ad25721e3 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -104,6 +104,31 @@
   </div>
 
 <script>
+  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+  let lastChecked;
+  let inBetween = false;
+
+  function handleCheck(e) {
+    // Check if they had the shift key down
+    // AND check if they are checking it
+    if(e.shiftKey && this.checked) {
+      // Loop over every single checkbox
+      checkboxes.forEach(checkbox => {
+        console.log(checkbox);
+        if(checkbox === this || checkbox === lastChecked) {
+          inBetween = !inBetween;
+          console.log('starting to check inBetween');
+        }
+
+        if(inBetween) {
+          checkbox.checked = true;
+        }
+      });
+    }
+    lastChecked = this;
+  }
+
+  checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
 </script>
 </body>
 </html>

From da4287d067e4358f69a640e0243d76f677416008 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Mon, 20 Feb 2017 09:29:37 -0500
Subject: [PATCH 19/25] completed movie player exercise

---
 11 - Custom Video Player/scripts.js | 56 +++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..fdf72876f5 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,56 @@
+// Get our elements
+const player = document.querySelector('.player');
+const video = player.querySelector('.viewer');
+const progress = player.querySelector('.progress');
+const progressBar = player.querySelector('.progress__filled');
+const toggle = player.querySelector('.toggle');
+const skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+
+// Build out functins
+function togglePlay() {
+  const method = video.paused ? 'play' : 'pause';
+  video[method]();
+}
+
+function updateButton() {
+  const icon = this.paused ? '►' : '❚ ❚';
+  toggle.textContent = icon;
+}
+
+function skip() {
+  video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function handleRangeUpdate() {
+  video[this.name] = this.value;
+  console.log(this.value);
+}
+
+function handleProgress() {
+  const percent = (video.currentTime / video.duration) * 100;
+  progressBar.style.flexBasis = `${percent}%`
+}
+
+function scrub(e) {
+  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+  video.currentTime = scrubTime;
+}
+
+// Hook up event listeners
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+
+toggle.addEventListener('click', togglePlay);
+skipButtons.forEach(button => button.addEventListener('click', skip));
+
+ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
+ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
+
+let mousedown = false;
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); //mousedown needs to be true to move on
+progress.addEventListener('mousedown', () => mousedown = true);
+progress.addEventListener('mouseup', () => mousedown = false);

From 12dec57a9d75b61d9247960e44648505f6592a66 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Tue, 14 Mar 2017 16:11:44 -0400
Subject: [PATCH 20/25] added cornify eastereggs to key detection

---
 12 - Key Sequence Detection/index-START.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..b79ec5ef74 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,18 @@
 </head>
 <body>
 <script>
+const pressed = [];
+const secretCode = 'chloe';
+
+window.addEventListener('keyup', (e) => {
+  pressed.push(e.key);
+  pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
+  console.log(pressed);
+  if(pressed.join('').includes(secretCode)) {
+    console.log('DING DING!');
+    cornify_add();
+  }
+})
 </script>
 </body>
 </html>

From b399662d82084bdc6b023c7c7617001fa85bd37a Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Tue, 14 Mar 2017 16:42:24 -0400
Subject: [PATCH 21/25] added slider images with window.scrollY and debounce

---
 13 - Slide in on Scroll/index-START.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8fccb..72ec6025ca 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -58,6 +58,28 @@ <h1>Slide in on Scroll</h1>
       };
     }
 
+    const sliderImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+      sliderImages.forEach(sliderImg => {
+        // Halfway through the image
+        const slideInAt = (window.scrollY + window.innerHeight) - sliderImg.height / 2;
+        console.log(slideInAt);
+        // Bottom of the image
+        const imageBottom = sliderImg.offsetTop + sliderImg.height;
+        const isHalfShown = slideInAt > sliderImg.offsetTop;
+        const isNotScrolledPast = window.scrollY < imageBottom;
+
+        if(isHalfShown && isNotScrolledPast) {
+          sliderImg.classList.add('active');
+        } else {
+          sliderImg.classList.remove('active');
+        }
+      })
+    }
+
+    window.addEventListener('scroll', debounce(checkSlide))
+
   </script>
 
   <style>

From f103a785f02c797ee2ae2db40e7ecb9fff231ff4 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Mon, 10 Apr 2017 16:49:01 -0400
Subject: [PATCH 22/25] created mouseover box-shadow effect

---
 .../index-START.html                          | 30 +++++++++++++++----
 16 - Mouse Move Shadow/index-start.html       | 23 ++++++++++++++
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index 4da1bac2ea..17b0bc3e3b 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -8,11 +8,23 @@
 
   <script>
     // start with strings, numbers and booleans
+    var age = 100;
+    var age2 = 200;
+    console.log(age, age2);
+    age = 200;
+    console.log(age, age2)
+
+    let name = 'Chloe';
+    let name2 = name;
+    console.log(name, name2);
+    name = 'Collier'
+    console.log(name, name2);
 
     // Let's say we have an array
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
     // and we want to make a copy of it.
+    //const team = players;
 
     // You might think we can just do something like this:
 
@@ -23,27 +35,35 @@
     // oh no - we have edited the original array too!
 
     // Why? It's because that is an array reference, not an array copy. They both point to the same array!
-
+    const team = players.slice() // ****** this creates a copy
+    team[3] = 'Lux';
     // So, how do we fix this? We take a copy instead!
 
     // one day
 
     // or create a new array and concat the old one in
-
+    const team2 = [].concat(players)
     // or use the new ES6 Spread
+    const team3 = [...players]
 
+    const team4 = Array.from(players)
     // now when we update it, the original one isn't changed
 
     // The same thing goes for objects, let's say we have a person object
 
     // with Objects
+    var person = {
+      name: 'Chloe',
+      age: 27
+    }
 
     // and think we make a copy:
-
+    const person2 = person;
+    person2.gender = 'female';
     // how do we take a copy instead?
-
+    const person3 = Object.assign({}, person, {number: 99})
     // We will hopefully soon see the object ...spread
-
+    const person4 = {...person};
     // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
 
   </script>
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
index 58a9bba861..68b8d7d266 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -31,6 +31,29 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+  const hero = document.querySelector('.hero');
+  const text = hero.querySelector('h1');
+  const walk = 100;
+
+  function shadow(e) {
+    const height = hero.offsetHeight;
+    const width = hero.offsetWidth;
+    let x = e.offsetX;
+    let y = e.offsetY;
+    //const {offsetWidth: width, offsetHeight: height} = hero;
+
+    if(this !== e.target) {
+      x = x + e.target.offsetLeft;
+      y = y + e.target.offsetTop;
+    }
+
+    const xWalk = Math.round((x / width * walk) - (walk / 2));
+    const yWalk = Math.round((y / height * walk) - (walk / 2));
+
+    text.style.textShadow = `${xWalk}px ${yWalk}px 0 red`;
+  }
+
+  hero.addEventListener('mousemove', shadow)
 </script>
 </body>
 </html>

From 5207e0fa4512a97ebd8986fdc88ebb818e6c1318 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Tue, 11 Apr 2017 13:15:55 -0400
Subject: [PATCH 23/25] sorted band array and displayed on DOM

---
 17 - Sort Without Articles/index-START.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..d0d2ff8a19 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -45,6 +45,14 @@
 <script>
 const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
 
+function strip(bandName) {
+  return bandName.replace(/^(a |the |an )/i, '').trim(); // ^ means 'starts with' in regex & i means insensitive
+}
+
+const sortedBands = bands.sort((first, second) => strip(first) > strip(second) ? 1 : -1);
+
+document.querySelector('#bands').innerHTML = sortedBands.map(band => `<li>${band}</li>`).join('');
+// it will return an array, that's why we want to join it
 
 </script>
 

From ced72fca6daa22735115e727297b37f57b61f99e Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Thu, 26 Oct 2017 19:17:29 -0700
Subject: [PATCH 24/25] Finished times using map and reduce

---
 .../index-START.html                          | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index 3eaee0f3ef..19e627c721 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,26 @@
     </li>
 
 <script>
+  const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
+
+  //adds all data-time values to one value total
+  const seconds = timeNodes
+    .map(node => node.dataset.time)
+    .map(timeCode => {
+      const [mins, secs] = timeCode.split(':').map(parseFloat);
+      return (mins * 60) + secs;
+    })
+    .reduce((total, secs) => total + secs);
+
+  // time to break down hours, mins, secs
+  let secondsLeft = seconds;
+  const hours = Math.floor(secondsLeft / 3600);
+  secondsLeft = secondsLeft % 3600;
+
+  const mins = Math.floor(secondsLeft / 60);
+  secondsLeft = secondsLeft % 60;
+
+  console.log(hours, mins, secondsLeft);
 </script>
 </body>
 </html>

From d9f2002051f074188b776f4dc50eaf2301fb4296 Mon Sep 17 00:00:00 2001
From: Chloe Collier <achloecollier@gmail.com>
Date: Fri, 3 Nov 2017 14:51:24 -0700
Subject: [PATCH 25/25] speech detection

---
 20 - Speech Detection/index-START.html | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index d3395cca35..9fdfbb60da 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -12,6 +12,30 @@
 <script>
   window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
+  const recognition = new SpeechRecognition();
+  recognition.interimResults = true;
+
+  let p = document.createElement('p');
+  const words = document.querySelector('.words');
+  words.appendChild(p);
+
+  recognition.addEventListener('result', e => {
+    const transcript = Array.from(e.results)
+      .map(result => result[0])
+      .map(result => result.transcript)
+      .join('');
+
+    p.textContent = transcript;
+    if (e.results[0].isFinal) {
+      p = document.createElement('p');
+      words.appendChild(p);
+    }
+    console.log(transcript);
+  });
+
+  recognition.addEventListener('end', recognition.start);
+
+  recognition.start();
 
 </script>