From c830e5f30f2088144d01b0e5fc103ef755b15d3d Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Wed, 15 Feb 2017 20:37:35 -0800
Subject: [PATCH 01/33] Finished Exercise 1

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..6e77081ad3 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,7 +58,29 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-
+  function playSound(e) {
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
+    if (!audio) {
+      return;
+    }
+    audio.currentTime = 0;
+    audio.play();
+    // console.log(key);
+    key.classList.add('playing');
+  }
+  function removeTransition(e) {
+    if (e.propertyName !== 'transform') {
+      return;
+    }
+    console.log(e.propertyName);
+    this.classList.remove('playing');
+  }
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => {
+    key.addEventListener('transitionend', removeTransition);
+  });
+  window.addEventListener('keydown', playSound);
 </script>
 
 

From 585339555462f5b46d6e9108788cad487415177c Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Sat, 18 Feb 2017 16:19:53 -0800
Subject: [PATCH 02/33] Finished Clock!

---
 01 - JavaScript Drum Kit/index-START.html |  2 +-
 02 - JS and CSS Clock/index-START.html    | 25 ++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 6e77081ad3..c84e7109a3 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -66,13 +66,13 @@
     }
     audio.currentTime = 0;
     audio.play();
-    // console.log(key);
     key.classList.add('playing');
   }
   function removeTransition(e) {
     if (e.propertyName !== 'transform') {
       return;
     }
+    
     console.log(e.propertyName);
     this.classList.remove('playing');
   }
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 2712384201..4da1b5b954 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -61,12 +61,35 @@
       background:black;
       position: absolute;
       top:50%;
+      transform-origin: 100%;
+      transform: rotate(90deg);
+      transition: all 0.05s;
+      transition-timing-function: cubic-bezier(0.15, 2.59, 0.46, -2.15)
     }
 
   </style>
-
   <script>
+    const hourHand   = document.querySelector('.hour-hand');
+    console.log('hourHand', hourHand);
+    const minuteHand = document.querySelector('.min-hand');
+    const secondHand = document.querySelector('.second-hand');
+
+    function setDate() {
+      const now = new Date();
+      const hours = now.getHours();
+      const minutes = now.getMinutes();
+      const seconds = now.getSeconds();
+      // console.log(hours, minutes, seconds);      
+      
+      const hourDegrees = hours / 12 * 360 + 90;
+      const minuteDegrees = minutes / 60 * 360 + 90;
+      const secondDegrees = seconds / 60 * 360 + 90;
 
+      hourHand.style.transform = `rotate(${hourDegrees}deg)`; 
+      minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
+      secondHand.style.transform = `rotate(${secondDegrees}deg)`;
+    }
+    setInterval(setDate, 1000);
 
   </script>
 </body>

From 3a56b938e75a48c27a0ed6084fd71ceeb8881a87 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Sun, 19 Feb 2017 10:37:17 -0800
Subject: [PATCH 03/33] Finished CSS Variables

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index ca2b59d077..ab72daf780 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -22,6 +22,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <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
     */
@@ -48,6 +63,18 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    var controls = document.querySelectorAll('.controls input');
+  
+    function handleUpdate() {
+      const suffix = this.dataset.sizing || '';
+      console.log(this.name);
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix  );
+    }
+
+    controls.forEach(control => {
+      control.addEventListener('change', handleUpdate);
+      control.addEventListener('mousemove', handleUpdate);
+    });
   </script>
 
 </body>

From 1643691dfec8e1bbe0729efe73a2be8c456c9593 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Thu, 23 Feb 2017 21:40:06 -0800
Subject: [PATCH 04/33] Working on Array Cardio 1

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..425c384992 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,16 +31,32 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
-
+    var results1500 = inventors.filter( (person) => {
+      return person.year >= 1500 && person.year < 1600;
+    });
+    // console.log(results1500);
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
-
+    var firstLast = inventors.map( (inventor) => {
+      return {
+        first: inventor.first,
+        last: inventor.last
+      };
+    })
+    // console.log(firstLast);
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
-
+    var sorted = inventors.sort( (a, b) => {
+      return a.year - b.year; 
+    });
+    // console.log(sorted);
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
-
+    var total = inventors.reduce((acc, val) => {
+      acc = acc + val.passed - val.year; 
+      return acc;
+    }, 0); 
+    console.log(total);
     // 5. Sort the inventors by years lived
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name

From a0e36b91b0f4f2bcec120bbdf34d2cff863bab0c Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Thu, 23 Feb 2017 22:10:52 -0800
Subject: [PATCH 05/33] Working on sorting people function

---
 04 - Array Cardio Day 1/index-START.html | 72 +++++++++++++++++++-----
 boulevards.txt                           | 33 +++++++++++
 formatBoule.js                           |  8 +++
 output.txt                               |  1 +
 4 files changed, 101 insertions(+), 13 deletions(-)
 create mode 100644 boulevards.txt
 create mode 100644 formatBoule.js
 create mode 100644 output.txt

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 425c384992..63ac37294b 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Array Cardio 💪</title>
 </head>
+
 <body>
   <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
   <script>
@@ -31,13 +33,13 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
-    var results1500 = inventors.filter( (person) => {
+    var results1500 = inventors.filter((person) => {
       return person.year >= 1500 && person.year < 1600;
     });
     // console.log(results1500);
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
-    var firstLast = inventors.map( (inventor) => {
+    var firstLast = inventors.map((inventor) => {
       return {
         first: inventor.first,
         last: inventor.last
@@ -46,30 +48,74 @@
     // console.log(firstLast);
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
-    var sorted = inventors.sort( (a, b) => {
-      return a.year - b.year; 
+    var sorted = inventors.sort((a, b) => {
+      return a.year - b.year;
     });
     // console.log(sorted);
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
     var total = inventors.reduce((acc, val) => {
-      acc = acc + val.passed - val.year; 
+      acc = acc + val.passed - val.year;
       return acc;
-    }, 0); 
-    console.log(total);
+    }, 0);
+    // console.log(total);
     // 5. Sort the inventors by years lived
+    var yearsSorted = inventors.sort((a, b) => {
+      return (a.passed - a.year) - (b.passed - b.year);
+    });
+    // console.log(yearsSorted);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
-
-
+    var boulevards = [
+      'Boulevards of Paris',
+      'City walls of Paris',
+      'Thiers wall',
+      'Wall of Charles V',
+      'Wall of Philip II Augustus',
+      'City gates of Paris',
+      'Haussmann\'s renovation of Paris',
+      'Boulevards of the Marshals',
+      'Boulevard Auguste-Blanqui',
+      'Boulevard Barbès',
+      'Boulevard Beaumarchais',
+      'Boulevard de l\'Amiral- Bruix',
+      'Boulevard des Capucines',
+      'Boulevard de la Chapelle',
+      'Boulevard de Clichy',
+      'Boulevard du Crime',
+      'Boulevard Haussmann',
+      'Boulevard de l\'Hôpital',
+      'Boulevard des Italiens',
+      'Boulevard de la Madeleine',
+      'Boulevard de Magenta',
+      'Boulevard Montmartre',
+      'Boulevard du Montparnasse',
+      'Boulevard Raspail',
+      'Boulevard Richard-Lenoir',
+      'Boulevard de Rochechouart',
+      'Boulevard Saint-Germain',
+      'Boulevard Saint-Michel',
+      'Boulevard de Sébastopol',
+      'Boulevard de Strasbourg',
+      'Boulevard du Temple',
+      'Boulevard Voltaire',
+      'Boulevard de la Zone'
+    ];
+    var filterDE = boulevards.filter( boul => {
+      return boul.indexOf('de') > 0;
+    }); 
+    // console.log(filterDE);
     // 7. sort Exercise
     // Sort the people alphabetically by last name
-
+    var sortedPeople = people.sort( (a, b) => {
+      return b.toLowerCase() < a.toLowerCase(); 
+    });
+    console.log(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' ];
-
+    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];
   </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/boulevards.txt b/boulevards.txt
new file mode 100644
index 0000000000..d325eaf4ed
--- /dev/null
+++ b/boulevards.txt
@@ -0,0 +1,33 @@
+Boulevards of Paris
+City walls of Paris
+Thiers wall
+Wall of Charles V
+Wall of Philip II Augustus
+City gates of Paris
+Haussmann's renovation of Paris
+Boulevards of the Marshals
+Boulevard Auguste-Blanqui
+Boulevard Barbès
+Boulevard Beaumarchais
+Boulevard de l'Amiral-Bruix
+Boulevard des Capucines
+Boulevard de la Chapelle
+Boulevard de Clichy
+Boulevard du Crime
+Boulevard Haussmann
+Boulevard de l'Hôpital
+Boulevard des Italiens
+Boulevard de la Madeleine
+Boulevard de Magenta
+Boulevard Montmartre
+Boulevard du Montparnasse
+Boulevard Raspail
+Boulevard Richard-Lenoir
+Boulevard de Rochechouart
+Boulevard Saint-Germain
+Boulevard Saint-Michel
+Boulevard de Sébastopol
+Boulevard de Strasbourg
+Boulevard du Temple
+Boulevard Voltaire
+Boulevard de la Zone
\ No newline at end of file
diff --git a/formatBoule.js b/formatBoule.js
new file mode 100644
index 0000000000..8f55a0ea98
--- /dev/null
+++ b/formatBoule.js
@@ -0,0 +1,8 @@
+var fs = require('fs');
+
+fs.readFile('boulevards.txt', 'utf-8', (err, data) => {
+  var formatted = data.split('\n').map( boul => {
+    return '\'' + boul + '\'' + '\r';
+  });
+  fs.writeFile('output.txt', formatted);
+});
\ No newline at end of file
diff --git a/output.txt b/output.txt
new file mode 100644
index 0000000000..f83635b74c
--- /dev/null
+++ b/output.txt
@@ -0,0 +1 @@
+'Boulevards of Paris'
,'City walls of Paris'
,'Thiers wall'
,'Wall of Charles V'
,'Wall of Philip II Augustus'
,'City gates of Paris'
,'Haussmann's renovation of Paris'
,'Boulevards of the Marshals'
,'Boulevard Auguste-Blanqui'
,'Boulevard Barbès'
,'Boulevard Beaumarchais'
,'Boulevard de l'Amiral-Bruix'
,'Boulevard des Capucines'
,'Boulevard de la Chapelle'
,'Boulevard de Clichy'
,'Boulevard du Crime'
,'Boulevard Haussmann'
,'Boulevard de l'Hôpital'
,'Boulevard des Italiens'
,'Boulevard de la Madeleine'
,'Boulevard de Magenta'
,'Boulevard Montmartre'
,'Boulevard du Montparnasse'
,'Boulevard Raspail'
,'Boulevard Richard-Lenoir'
,'Boulevard de Rochechouart'
,'Boulevard Saint-Germain'
,'Boulevard Saint-Michel'
,'Boulevard de Sébastopol'
,'Boulevard de Strasbourg'
,'Boulevard du Temple'
,'Boulevard Voltaire'
,'Boulevard de la Zone'
\ No newline at end of file

From 1b2e8005476e60aaaaebea7c33ff97780a110242 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Thu, 23 Feb 2017 22:18:26 -0800
Subject: [PATCH 06/33] Finished Array Cardio 1

---
 04 - Array Cardio Day 1/index-START.html | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 63ac37294b..284a604acf 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -108,13 +108,30 @@
     // console.log(filterDE);
     // 7. sort Exercise
     // Sort the people alphabetically by last name
-    var sortedPeople = people.sort( (a, b) => {
-      return b.toLowerCase() < a.toLowerCase(); 
+    var peopleFirstLast = people.map( person => {
+      var temp = person.split(',');
+      return {
+        first: temp[1],
+        last: temp[0]
+      }
     });
-    console.log(sortedPeople);
+
+    var sortedPeopleFirstLast = peopleFirstLast.sort( (a, b) => {
+      return a.last > b.last;
+    }) 
+    // console.log(sortedPeopleFirstLast);
     // 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'];
+    var instance = data.reduce( (acc, next) => {
+      if (acc[next] === undefined) {
+        acc[next] = 1;
+      } else {
+        acc[next]++;
+      }
+      return acc;
+    }, {});
+    console.log(instance);
   </script>
 </body>
 

From d79924e2f3bf1a55d7bda75a625e5813b9f5321c Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Tue, 7 Mar 2017 23:20:49 -0800
Subject: [PATCH 07/33] Finished 5

---
 05 - Flex Panel Gallery/index-START.html | 46 ++++++++++++++++++++++++
 output.txt                               | 34 +++++++++++++++++-
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..31e099b84f 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,6 +42,11 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
     }
 
 
@@ -50,12 +56,33 @@
     .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;
+      border: 1px solid red;
+      display: flex;
+      flex: 1 0 auto;
+      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 {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -68,6 +95,7 @@
 
     .panel.open {
       font-size:40px;
+      flex: 5;
     }
 
     .cta {
@@ -107,6 +135,24 @@
   </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>
 
diff --git a/output.txt b/output.txt
index f83635b74c..5212373e19 100644
--- a/output.txt
+++ b/output.txt
@@ -1 +1,33 @@
-'Boulevards of Paris'
,'City walls of Paris'
,'Thiers wall'
,'Wall of Charles V'
,'Wall of Philip II Augustus'
,'City gates of Paris'
,'Haussmann's renovation of Paris'
,'Boulevards of the Marshals'
,'Boulevard Auguste-Blanqui'
,'Boulevard Barbès'
,'Boulevard Beaumarchais'
,'Boulevard de l'Amiral-Bruix'
,'Boulevard des Capucines'
,'Boulevard de la Chapelle'
,'Boulevard de Clichy'
,'Boulevard du Crime'
,'Boulevard Haussmann'
,'Boulevard de l'Hôpital'
,'Boulevard des Italiens'
,'Boulevard de la Madeleine'
,'Boulevard de Magenta'
,'Boulevard Montmartre'
,'Boulevard du Montparnasse'
,'Boulevard Raspail'
,'Boulevard Richard-Lenoir'
,'Boulevard de Rochechouart'
,'Boulevard Saint-Germain'
,'Boulevard Saint-Michel'
,'Boulevard de Sébastopol'
,'Boulevard de Strasbourg'
,'Boulevard du Temple'
,'Boulevard Voltaire'
,'Boulevard de la Zone'
\ No newline at end of file
+'Boulevards of Paris'
+'City walls of Paris',
+'Thiers wall',
+'Wall of Charles V',
+'Wall of Philip II Augustus',
+'City gates of Paris',
+'Haussmann's renovation of Paris',
+'Boulevards of the Marshals',
+'Boulevard Auguste-Blanqui',
+'Boulevard Barbès',
+'Boulevard Beaumarchais',
+'Boulevard de l'Amiral-Bruix',
+'Boulevard des Capucines',
+'Boulevard de la Chapelle',
+'Boulevard de Clichy',
+'Boulevard du Crime',
+'Boulevard Haussmann',
+'Boulevard de l'Hôpital',
+'Boulevard des Italiens',
+'Boulevard de la Madeleine',
+'Boulevard de Magenta',
+'Boulevard Montmartre',
+'Boulevard du Montparnasse',
+'Boulevard Raspail',
+'Boulevard Richard-Lenoir',
+'Boulevard de Rochechouart',
+'Boulevard Saint-Germain',
+'Boulevard Saint-Michel',
+'Boulevard de Sébastopol',
+'Boulevard de Strasbourg',
+'Boulevard du Temple',
+'Boulevard Voltaire',
+'Boulevard de la Zone'

From 85b86b122fbda5ecad2c27dd727c557c4385af22 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Wed, 8 Mar 2017 10:02:59 -0800
Subject: [PATCH 08/33] 6 in progress

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

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..5f6eb1ec7f 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Type Ahead 👀</title>
   <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
 
   <form class="search-form">
@@ -14,9 +16,21 @@
       <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';
+
+    const cities = [];
+
+    fetch(endpoint)
+      .then(blob => {
+        blob.json();
+      })
+      .then(data => {
+        cities = data;
+        console.log(cities  );
+        });
+
+  </script>
+</body>
 
-</script>
-  </body>
-</html>
+</html>
\ No newline at end of file

From 5c1ecb4e9fe5393be29cae695ab7e447f1516c8f Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Fri, 17 Mar 2017 22:55:19 -0700
Subject: [PATCH 09/33] In progress

---
 06 - Type Ahead/index-START.html | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 5f6eb1ec7f..345a9cda9f 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -22,14 +22,12 @@
     const cities = [];
 
     fetch(endpoint)
-      .then(blob => {
-        blob.json();
-      })
-      .then(data => {
-        cities = data;
-        console.log(cities  );
-        });
-
+      .then(blob => blob.json())
+      .then(data => cities.push(...data));
+      
+    function findMatches(wordToMatch, cities) {
+      return cities.
+    }
   </script>
 </body>
 

From d39fa339038dd7bc5dc01385a3bd51b80961256a Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Sun, 19 Mar 2017 14:34:35 -0700
Subject: [PATCH 10/33] Finished Num 06

---
 06 - Type Ahead/index-START.html | 36 ++++++++++++++++++++++++++++++--
 06 - Type Ahead/style.css        |  2 +-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 345a9cda9f..96f66c5f55 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -24,10 +24,42 @@
     fetch(endpoint)
       .then(blob => blob.json())
       .then(data => cities.push(...data));
-      
+
     function findMatches(wordToMatch, cities) {
-      return cities.
+      return cities.filter(place => {
+
+        const regex = new RegExp(wordToMatch, 'gi');
+        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 => {
+        console.log('city', place.city, 'population', place.population);
+        const regex = new RegExp(this.value, 'gi');
+        const cityName = place.city.replace(regex, `<span class="highlight" style="color:blue;">${this.value}</span>`);
+        const stateName = place.state.replace(regex, `<span class="highlight">${this.value}</span>`);
+        const formattedPop = numberWithCommas(place.population);
+        return `
+          <li>
+             <span class="name">${cityName}, ${stateName}</span>
+             <span class="population">${formattedPop}</span>
+          </li>
+        `
+      }).join('');
+      suggestions.innerHTML = html;
+      console.log('value', matchArray);
+    }
+    const searchInput = document.querySelector('.search');
+    const suggestions = document.querySelector('.suggestions');
+
+    searchInput.addEventListener('change', displayMatches);
+    searchInput.addEventListener('keyup', displayMatches);
   </script>
 </body>
 
diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css
index 36dc55f30e..cf69a28b87 100644
--- a/06 - Type Ahead/style.css	
+++ b/06 - Type Ahead/style.css	
@@ -72,7 +72,7 @@
       font-size: 15px;
     }
 
-    .hl {
+    .hl, .highlight {
       background:#ffc600;
     }
 

From 9479e8d89f5d915299628e8e2d2b8d0a9cf66155 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Mon, 15 May 2017 14:46:49 -0700
Subject: [PATCH 11/33] Finished 07

---
 07 - Array Cardio Day 2/index-START.html | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..81a023560e 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Array Cardio 💪💪</title>
 </head>
+
 <body>
   <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
   <script>
@@ -26,16 +28,35 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+    const older19 = people.some(person => {
+      return 2017 - person.year > 0;
+    });
+    console.log('older19', older19);
     // Array.prototype.every() // is everyone 19 or older?
+    const every19 = people.every(person => {
+      return 2017 - person.year > 0;
+    });
 
+    console.log('every', every19);
     // 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 certainID = comments.find(comment => {
+      return comment.id === 823423;
+    });
+
+    console.log('certainID', certainID);
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    comments.splice(comments.find(comment => {
+      return comment.id === 823423;
+    }), 1);
 
+    console.log('comments', comments);
+    
   </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file

From 7c8496be74b51a93d3c6c15cf1b86bdf454dcb0e Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Mon, 15 May 2017 14:59:57 -0700
Subject: [PATCH 12/33] 08 in progress

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

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..728087ae1b 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -1,19 +1,40 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>HTML5 Canvas</title>
 </head>
+
 <body>
-<canvas id="draw" width="800" height="800"></canvas>
-<script>
-</script>
+  <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.lineCap = 'round';
+
+    let isDrawing = false;
+    let lastX = 0;
+    let lastY = 0;
 
-<style>
-  html, body {
-    margin:0;
-  }
-</style>
+    function draw(e) {
+      console.log('e', e);
+    }
+
+    canvas.addEventListener('mousemove', draw);
+  </script>
+
+  <style>
+    html,
+    body {
+      margin: 0;
+    }
+  </style>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file

From debdd36041987cca65520ad26fe00b7da630cc6f Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Mon, 29 May 2017 21:25:03 -0700
Subject: [PATCH 13/33] Finished 08

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

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 728087ae1b..a8e3a62e9c 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -15,17 +15,53 @@
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     ctx.strokeStyle = '#BADA55';
+    ctx.lineJoin = 'round';
     ctx.lineCap = 'round';
+    ctx.lineWidth = 100;
+    ctx.globalCompositeOperation = 'screen';
 
     let isDrawing = false;
+    let direction = true; 
     let lastX = 0;
     let lastY = 0;
+    let hue = 0;
 
     function draw(e) {
-      console.log('e', e);
+      if (!isDrawing) {
+        return;
+      }
+      ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+      ctx.beginPath();
+      // start from: 
+      ctx.moveTo(lastX, lastY);
+      // go to: 
+      ctx.lineTo(e.offsetX, e.offsetY);
+      ctx.stroke();
+      [lastX, lastY] = [e.offsetX, e.offsetY];
+      if (hue > 360) hue = 0;
+      hue += 7;
+
+      if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+        direction = !direction;
+      }
+
+      if (direction) {
+        ctx.lineWidth+= 3;
+      } else {
+        ctx.lineWidth-= 3;
+      }
+
     }
 
+    canvas.addEventListener('mousedown', (e) => {
+      isDrawing = true
+      console.log('*', e);
+      [lastX, lastY] = [e.offsetX, e.offsetY];
+      console.log('x, y', lastX, lastY);
+    });
     canvas.addEventListener('mousemove', draw);
+    canvas.addEventListener('mouseup', () => isDrawing = false);
+    canvas.addEventListener('mouseout', () => isDrawing = false);
   </script>
 
   <style>

From 520025c2fe441104d9fa9ad17a241add9acafd0e Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Sun, 4 Jun 2017 19:51:05 -0700
Subject: [PATCH 14/33] Working on extra credit for 15 29:50 in video)

---
 15 - LocalStorage/index-START.html | 39 +++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..72e39161cc 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -28,8 +28,45 @@ <h2>LOCAL TAPAS</h2>
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  const items = JSON.parse(localStorage.getItem('items')) || [];
 
+  function addItem(e) {
+    e.preventDefault(); 
+    const text = (this.querySelector('[name=item]')).value;
+    const item = {
+      text,
+      done: false
+    };
+    console.log(item);
+    items.push(item);
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList);
+    this.reset();
+  }
+  
+  function populateList(plates = [], plateList) {
+    plateList.innerHTML = plates.map((plate, i) => {
+      return `
+        <li>
+          <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
+          <label for="item${i}">${plate.text}</label>
+        </li>
+      `;
+    }).join(''); 
+  }
+  function toggleDone(e) {
+    if (!e.target.matches('input')) return;
+    const el = e.target;
+    const index = el.dataset.index; 
+    items[index].done = !items[index].done;
+    localStorage.setItem('items', JSON.stringify(items));
+    populateList(items, itemsList); 
+  }
+
+  addItems.addEventListener('submit', addItem);
+  itemsList.addEventListener('click', toggleDone);
+
+  populateList(items, itemsList);
 </script>
 
 

From 35882b97be549a26753a89359ca9431893d87ebd Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Sun, 4 Jun 2017 21:37:17 -0700
Subject: [PATCH 15/33] Completed uncheckAll, checkAll, and deleteAll

---
 15 - LocalStorage/index-START.html | 41 +++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index 72e39161cc..bb7b608cd6 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -23,12 +23,20 @@ <h2>LOCAL TAPAS</h2>
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
     </form>
+    <button id="check-all">Check All</button>
+    <button id="uncheck-all">UnCheck All</button>
+    <button id="delete-all">Delete All</button>
+
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = JSON.parse(localStorage.getItem('items')) || [];
+  const checkAllButton = document.querySelector('#check-all');
+  const uncheckAllButton = document.querySelector('#uncheck-all');
+  const deleteAllButton = document.querySelector('#delete-all');
+  
+  let items = JSON.parse(localStorage.getItem('items')) || [];
 
   function addItem(e) {
     e.preventDefault(); 
@@ -37,13 +45,38 @@ <h2>LOCAL TAPAS</h2>
       text,
       done: false
     };
-    console.log(item);
     items.push(item);
+    console.log('items', items);
     localStorage.setItem('items', JSON.stringify(items));
     populateList(items, itemsList);
     this.reset();
   }
   
+  function checkAll(e){
+    e.preventDefault();
+    items.forEach(item => {
+      console.log('item done', item.done);
+      item.done = true;
+    });
+    populateList(items, itemsList);
+  }
+
+  function uncheckAll(e){
+    e.preventDefault();
+    items.forEach(item => {
+      console.log('item done', item.done);
+      item.done = false;
+    });
+    populateList(items, itemsList);
+  }
+  
+  function deleteAll(e) {
+    e.preventDefault();
+    localStorage.removeItem('items');
+    items = JSON.parse(localStorage.getItem('items')) || [];
+    populateList(items, itemsList);
+  }
+
   function populateList(plates = [], plateList) {
     plateList.innerHTML = plates.map((plate, i) => {
       return `
@@ -65,7 +98,9 @@ <h2>LOCAL TAPAS</h2>
 
   addItems.addEventListener('submit', addItem);
   itemsList.addEventListener('click', toggleDone);
-
+  checkAllButton.addEventListener('click', checkAll);
+  uncheckAllButton.addEventListener('click', uncheckAll);
+  deleteAllButton.addEventListener('click', deleteAll);
   populateList(items, itemsList);
 </script>
 

From dfdcb52f8239dfe43ee6ac2a413a24beede0840e Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Thu, 27 Jul 2017 14:57:05 -0700
Subject: [PATCH 16/33] Finished 9

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

diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..3334f4bc28 100644
--- a/09 - Dev Tools Domination/index-START.html	
+++ b/09 - Dev Tools Domination/index-START.html	
@@ -10,6 +10,7 @@
 
   <script>
     const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
+    const dogs2 = [{ name: 'Snickers', age: 2 , penis: true}, { name: 'hugo', age: 8 }];
 
     function makeGreen() {
       const p = document.querySelector('p');
@@ -40,7 +41,8 @@
     // counting
 
     // timing
-
+    console.table(dogs);
+    console.table(dogs2);
   </script>
 </body>
 </html>

From 9c7b7b5427bd38a6a4dac29dac76f2c3c7a7dc9f Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Thu, 27 Jul 2017 14:57:13 -0700
Subject: [PATCH 17/33] Finished 10

---
 .../index-START.html                          | 76 +++++++++++++------
 1 file changed, 52 insertions(+), 24 deletions(-)

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index b6a1cc32ec..32e16b35f3 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -1,51 +1,52 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Hold Shift to Check Multiple Checkboxes</title>
 </head>
+
 <body>
   <style>
-
     html {
       font-family: sans-serif;
-      background:#ffc600;
+      background: #ffc600;
     }
 
     .inbox {
-      max-width:400px;
-      margin:50px auto;
-      background:white;
-      border-radius:5px;
-      box-shadow:10px 10px 0 rgba(0,0,0,0.1);
+      max-width: 400px;
+      margin: 50px auto;
+      background: white;
+      border-radius: 5px;
+      box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
     }
 
     .item {
-      display:flex;
-      align-items:center;
+      display: flex;
+      align-items: center;
       border-bottom: 1px solid #F1F1F1;
     }
 
     .item:last-child {
-      border-bottom:0;
+      border-bottom: 0;
     }
 
 
-    input:checked + p {
-      background:#F9F9F9;
+    input:checked+p {
+      background: #F9F9F9;
       text-decoration: line-through;
     }
 
     input[type="checkbox"] {
-      margin:20px;
+      margin: 20px;
     }
 
     p {
-      margin:0;
-      padding:20px;
-      transition:background 0.2s;
-      flex:1;
-      font-family:'helvetica neue';
+      margin: 0;
+      padding: 20px;
+      transition: background 0.2s;
+      flex: 1;
+      font-family: 'helvetica neue';
       font-size: 20px;
       font-weight: 200;
       border-left: 1px solid #D1E2FF;
@@ -55,10 +56,8 @@
       text-align: center;
       font-size: 15px;
     }
-
-
   </style>
-   <!--
+  <!--
    The following is a common layout you would see in an email client.
 
    When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
@@ -103,7 +102,36 @@
     </div>
   </div>
 
-<script>
-</script>
+  <script>
+    var items = document.querySelectorAll("input");
+    var checkboxes = document.getElementsByTagName("input");
+    console.log('checkboxes', checkboxes, checkboxes[3].checked);
+    var lastChecked = null;
+    for (var i = 0; i < checkboxes.length; i++) {
+      checkboxes[i].onclick = doSomething;
+      checkboxes[i].index = i;
+    };
+    function doSomething(e) {
+      var index = this.index;
+      if (e.shiftKey && this.checked) {
+        console.log('ere')
+        if (lastChecked !== null) {
+          // if lastChecked less than index, iterate up
+          console.log('ereasdfd')
+          if (lastChecked < index) {
+            for (var i = lastChecked + 1; i < index; i++) {
+              checkboxes[i].checked = true;
+            }
+          } else {
+            for (i = lastChecked - 1; i > index; i--) {
+              checkboxes[i].checked = true;
+            }
+          }
+        }
+      }
+      lastChecked = index;
+    };
+  </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file

From 8a6a73f5563df89bac45089ac00208bdc8372a35 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Thu, 27 Jul 2017 14:57:22 -0700
Subject: [PATCH 18/33] Finished 11

---
 11 - Custom Video Player/index.html |  1 +
 11 - Custom Video Player/scripts.js | 92 +++++++++++++++++++++++++++++
 2 files changed, 93 insertions(+)

diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index 281a15eaa8..80d56755c2 100644
--- a/11 - Custom Video Player/index.html	
+++ b/11 - Custom Video Player/index.html	
@@ -19,6 +19,7 @@
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
+       <button id="full" class="player__button">full</button>
      </div>
    </div>
 
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..00ae333d06 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,92 @@
+// Get elements
+const player = document.querySelector('.player');
+const video = player.querySelector('.viewer');
+const allVideos = player.querySelectorAll('.viewer');
+const video2 = player.getElementsByClassName('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');
+const fullScreenButton = document.getElementById('full');
+
+console.log(video, video2[0], allVideos);
+// Build out functions
+function togglePlay() {
+  const method = video.paused ? 'play' : 'pause';
+  video[method]();
+}
+
+function updateButton() {
+  const icon = this.paused ? '►' : '❚ ❚';
+  console.log(icon);
+  toggle.textContent = icon;
+}
+
+function skip() {
+  video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function handleRange() {
+  video[this.name] = this.value;
+}
+
+function handleProgress() {
+  let percent = video.currentTime / video.duration * 100;
+  progressBar.style.flexBasis = `${percent}%`;
+}
+
+function scrub(e) {
+  const percent = e.offsetX / progress.offsetWidth * video.duration;
+  video.currentTime = percent;
+}
+
+function toggleFullScreen() {
+  video.webkitRequestFullscreen();
+}
+
+// Hook up listeners
+video.addEventListener('click', togglePlay);
+toggle.addEventListener('click', togglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+
+skipButtons.forEach(element => {
+  element.addEventListener('click', skip);
+});
+
+ranges.forEach(range => range.addEventListener('click', handleRange));
+ranges.forEach(range => range.addEventListener('mousemove', handleRange));
+
+let mousedown = false;
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
+progress.addEventListener('mousedown', () => mousedown = true);
+progress.addEventListener('mouseup', () => mousedown = false);
+
+// Note that the API is still vendor-prefixed in browsers implementing it
+document.addEventListener("fullscreenchange", function (event) {
+
+  // The event object doesn't carry information about the fullscreen state of the browser,
+  // but it is possible to retrieve it through the fullscreen API
+  if (document.fullscreen) {
+
+    // The target of the event is always the document,
+    // but it is possible to retrieve the fullscreen element through the API
+    document.fullscreenElement;
+    console.log('hhhhhhhhhhhhhhhhhhh');
+  }
+
+});
+
+// Note that the API is still vendor-prefixed in browsers implementing it
+document.addEventListener("fullscreenerror", function (event) {
+
+  // The event object doesn't carry information about the fullscreen state of the browser,
+  // but it is possible to retrieve it through the fullscreen API
+  console.log('even', event);
+});
+
+
+fullScreenButton.addEventListener('click', toggleFullScreen);
\ No newline at end of file

From 306056b20b05d4ccac665d725f5bd98115be1ae2 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Thu, 27 Jul 2017 14:57:29 -0700
Subject: [PATCH 19/33] Finished 12

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

diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..942f3d6172 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -7,6 +7,20 @@
 </head>
 <body>
 <script>
+  const secretCode = 'jj';
+  let keys = [];
+  document.addEventListener('keyup', (e) => {
+    keys.push(e.key);
+    if (keys.length > secretCode.length) {
+      keys.shift();
+    }
+    if (keys.join('') === secretCode) {
+      console.log('aaaayyyyyy');
+      cornify_add();
+    }
+    console.log('key', keys);
+
+  })
 </script>
 </body>
 </html>

From d5ccd9ef6474a3ee5fe472a7070c34077fbe102f Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Thu, 27 Jul 2017 14:57:35 -0700
Subject: [PATCH 20/33] Finished 13

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

diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8fccb..6f1b337d83 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -1,41 +1,134 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Document</title>
 </head>
+
 <body>
 
   <div class="site-wrap">
 
     <h1>Slide in on Scroll</h1>
 
-    <p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.</p>
-    <p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
+    <p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem
+      dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora
+      in aspernatur pariaturlores sunt esse magni, ut, dignissimos.</p>
+    <p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
+      asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
+      esse magni, ut, dignissimos.</p>
     <p>Adipisicing elit. Tempore tempora rerum..</p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui
+      libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas
+      laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui
+      libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas
+      laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui
+      libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas
+      laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
 
     <img src="http://unsplash.it/400/400" class="align-left slide-in">
 
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur
+      est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni
+      illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam,
+      reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem,
+      suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae
+      sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam
+      aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p>
 
     <img src="http://unsplash.it/400/401" class="align-right slide-in">
 
-    <p> at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.</p>
+    <p> at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam,
+      illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus
+      voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita,
+      ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore
+      itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias
+      facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates
+      cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam
+      beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem!
+      Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus
+      modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa?
+      Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi
+      soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio
+      accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque
+      fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque
+      suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint
+      quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique,
+      voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id
+      velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate
+      doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.</p>
 
     <img src="http://unsplash.it/200/500" class="align-left slide-in">
 
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet <img src="http://unsplash.it/200/200" class="align-right slide-in"> temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis</p>
-
-
-    <p>laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero
+      placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero
+      perferendis, deserunt et incidunt eveniet <img src="http://unsplash.it/200/200" class="align-right slide-in"> temporibus
+      doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt
+      laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos
+      distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus
+      atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus
+      aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam
+      est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui
+      rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis</p>
+
+
+    <p>laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit
+      ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic
+      quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa
+      debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt
+      eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet,
+      provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis
+      iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus
+      distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas
+      odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate
+      saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere
+      ducimus accusantium eos veritatis neque.</p>
 
     <img src="http://unsplash.it/400/400" class="align-right slide-in">
 
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero
+      placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero
+      perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore!
+      Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore
+      iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium,
+      rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel
+      non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita
+      in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi.
+      Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione.
+      Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita,
+      laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda
+      natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos
+      dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro
+      saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo,
+      ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus
+      quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores
+      quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam,
+      quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus,
+      odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore
+      non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero
+      placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero
+      perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore!
+      Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore
+      iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium,
+      rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel
+      non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita
+      in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi.
+      Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione.
+      Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita,
+      laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda
+      natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos
+      dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro
+      saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo,
+      ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus
+      quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores
+      quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam,
+      quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus,
+      odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore
+      non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
 
 
 
@@ -45,9 +138,9 @@ <h1>Slide in on Scroll</h1>
   <script>
     function debounce(func, wait = 20, immediate = true) {
       var timeout;
-      return function() {
+      return function () {
         var context = this, args = arguments;
-        var later = function() {
+        var later = function () {
           timeout = null;
           if (!immediate) func.apply(context, args);
         };
@@ -56,22 +149,46 @@ <h1>Slide in on Scroll</h1>
         timeout = setTimeout(later, wait);
         if (callNow) func.apply(context, args);
       };
-    }
 
+    }
+    const sliderImages = document.querySelectorAll('.slide-in');
+    function checkSlide(e) {
+      sliderImages.forEach(image => {
+        // Halfway through the image
+        console.log('Y', window.scrollY);
+        const slideInAt = window.scrollY + window.innerHeight - image.height / 2;
+        console.log(slideInAt);
+        // Bottom of the image
+        const imageBottom = image.offsetTop + image.height;
+        const isHalfShown = slideInAt > image.offsetTop;
+        const isNotScrolledPast = window.scrollY < imageBottom;
+        if (isHalfShown && isNotScrolledPast) {
+          image.classList.add('active');
+        } else {
+          image.classList.remove('active');
+        }
+
+      });
+    }
+    window.addEventListener('scroll', debounce(checkSlide));
   </script>
 
   <style>
     html {
       box-sizing: border-box;
-      background:#ffc600;
-      font-family:'helvetica neue';
+      background: #ffc600;
+      font-family: 'helvetica neue';
       font-size: 20px;
       font-weight: 200;
     }
+
     body {
       margin: 0;
     }
-    *, *:before, *:after {
+
+    *,
+    *:before,
+    *:after {
       box-sizing: inherit;
     }
 
@@ -82,39 +199,40 @@ <h1>Slide in on Scroll</h1>
     .site-wrap {
       max-width: 700px;
       margin: 100px auto;
-      background:white;
-      padding:40px;
+      background: white;
+      padding: 40px;
       text-align: justify;
     }
 
     .align-left {
-      float:left;
-      margin-right:20px;
+      float: left;
+      margin-right: 20px;
     }
 
     .align-right {
-      float:right;
-      margin-left:20px;
+      float: right;
+      margin-left: 20px;
     }
 
     .slide-in {
-      opacity:0;
-      transition:all .5s;
+      opacity: 0;
+      transition: all .5s;
     }
 
     .align-left.slide-in {
-      transform:translateX(-30%) scale(0.95);
+      transform: translateX(-30%) scale(0.95);
     }
+
     .align-right.slide-in {
-      transform:translateX(30%) scale(0.95);
+      transform: translateX(30%) scale(0.95);
     }
 
     .slide-in.active {
-      opacity:1;
-      transform:translateX(0%) scale(1);
+      opacity: 1;
+      transform: translateX(0%) scale(1);
     }
-
   </style>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file

From 257348a0c4eb66a7eb09a1fbb240d8dc89c54114 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Thu, 27 Jul 2017 20:11:16 -0700
Subject: [PATCH 21/33] Review Local Storage

---
 15 - LocalStorage/index-START.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index bb7b608cd6..c9c13bdc22 100644
--- a/15 - LocalStorage/index-START.html	
+++ b/15 - LocalStorage/index-START.html	
@@ -35,7 +35,7 @@ <h2>LOCAL TAPAS</h2>
   const checkAllButton = document.querySelector('#check-all');
   const uncheckAllButton = document.querySelector('#uncheck-all');
   const deleteAllButton = document.querySelector('#delete-all');
-  
+  console.log('itemsLIst', itemsList); 
   let items = JSON.parse(localStorage.getItem('items')) || [];
 
   function addItem(e) {
@@ -73,7 +73,8 @@ <h2>LOCAL TAPAS</h2>
   function deleteAll(e) {
     e.preventDefault();
     localStorage.removeItem('items');
-    items = JSON.parse(localStorage.getItem('items')) || [];
+    // items = JSON.parse(localStorage.getItem('items')) || [];
+    items = [];
     populateList(items, itemsList);
   }
 
@@ -90,6 +91,7 @@ <h2>LOCAL TAPAS</h2>
   function toggleDone(e) {
     if (!e.target.matches('input')) return;
     const el = e.target;
+    console.log('target', el);
     const index = el.dataset.index; 
     items[index].done = !items[index].done;
     localStorage.setItem('items', JSON.stringify(items));

From 8c148ddcba695cc60756aabf9a37a2acb4c2cf89 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Thu, 27 Jul 2017 20:11:29 -0700
Subject: [PATCH 22/33] Finished #16 mouse move

---
 16 - Mouse Move Shadow/index-start.html | 65 +++++++++++++++++--------
 1 file changed, 45 insertions(+), 20 deletions(-)

diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html
index 58a9bba861..38b73299b7 100644
--- a/16 - Mouse Move Shadow/index-start.html	
+++ b/16 - Mouse Move Shadow/index-start.html	
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Mouse Shadow</title>
 </head>
+
 <body>
 
   <div class="hero">
@@ -11,26 +13,49 @@ <h1 contenteditable>🔥WOAH!</h1>
   </div>
 
   <style>
-  html {
-    color:black;
-    font-family: sans-serif;
-  }
-
-  .hero {
-    min-height: 100vh;
-    display:flex;
-    justify-content: center;
-    align-items: center;
-    color:black;
-  }
-
-  h1 {
-    text-shadow: 10px 10px 0 rgba(0,0,0,1);
-    font-size: 100px;
-  }
+    html {
+      color: black;
+      font-family: sans-serif;
+    }
+
+    .hero {
+      min-height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: black;
+    }
+
+    h1 {
+      text-shadow: 10px 10px 30px rgba(0, 0, 0, 1);
+      font-size: 100px;
+    }
   </style>
 
-<script>
-</script>
+  <script>
+    const hero = document.querySelector('.hero');
+    const text = document.querySelector('h1');
+    const walk = 100;
+
+    function shadow(e) {
+      const { offsetWidth: width, offsetHeight: height } = hero;
+      let { offsetX: x, offsetY: y } = e;
+
+      if (this !== e.target) {
+        x += e.target.offsetLeft;
+        y += e.target.offsetTop;
+      }
+
+      const xWalk = (x / width * 100) - (walk / 2);
+      const yWalk = (y / height * 100) - (walk / 2);
+
+      text.style.textShadow = `${xWalk}px ${yWalk}px 30px rgba(0,140,0,1)`;
+      console.log(xWalk, yWalk);
+    }
+
+    hero.addEventListener('mousemove', shadow);
+
+  </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file

From 0657e1ba06ce1831e733175555445ab48d8df79f Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Thu, 27 Jul 2017 20:56:46 -0700
Subject: [PATCH 23/33] Finished #17

---
 17 - Sort Without Articles/index-START.html | 30 ++++++++++++++++-----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..cd2833ce76 100644
--- a/17 - Sort Without Articles/index-START.html	
+++ b/17 - Sort Without Articles/index-START.html	
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Sort Without Articles</title>
 </head>
+
 <body>
 
   <style>
@@ -25,10 +27,12 @@
       padding: 0;
       box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
     }
+
     #bands li {
       border-bottom: 1px solid #efefef;
       padding: 20px;
     }
+
     #bands li:last-child {
       border-bottom: 0;
     }
@@ -37,16 +41,30 @@
       color: #ffc600;
       text-decoration: none;
     }
-
   </style>
 
   <ul id="bands"></ul>
 
-<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'];
-
+  <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 removeArticle(word) {
+      const splitWord = word.split(' ');
+      const firstWord = splitWord[0];
+      if (firstWord === 'The' || firstWord === 'A' || firstWord === 'An') {
+        return splitWord.slice(1).join(' ');
+      }
+      return splitWord.join(' ');
+    }
+    const sortedBands = bands.sort((a, b) => removeArticle(a) < removeArticle(b) ? -1 : 1);
 
-</script>
+    console.log(sortedBands);
+    let bandText = sortedBands.map(band => {
+      return `<li>${band}</li>`
+    }).join('');
+    const bandEl = document.getElementById('bands');
+    bandEl.innerHTML = bandText;
+  </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file

From 623fc90f9546f5d9a41fbaf41fd32a598644a9b1 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Thu, 27 Jul 2017 21:29:04 -0700
Subject: [PATCH 24/33] Crushed Number 18!!!

---
 18 - Adding Up Times with Reduce/index-START.html | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index abdf4c91af..afe6f8dea7 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -182,6 +182,19 @@
     </li>
   </ul>
 <script>
-</script>
+  console.clear();
+  let videos = document.querySelectorAll('[data-time]');
+  let videosArr = [...videos];
+  let totalSeconds = videosArr.reduce((accum, videoEl) => {
+    let timeArr = videoEl.dataset.time.split(':');
+    let [minutes, seconds] = [parseInt(timeArr[0]), parseInt(timeArr[1])]; 
+    return accum + minutes * 60 + seconds;
+  }, 0)
+  let totalHour = Math.floor(totalSeconds / 3600);
+  let totalMin =  Math.floor(totalSeconds / 60) % 60
+  let totalSec = totalSeconds % 60;
+  console.log(totalSeconds,'hour', totalHour, 'min', totalMin, 'sec', totalSec);
+
+</script
 </body>
 </html>

From e057559f4e9fa263b6825f6fb6a6d48e796c5d26 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Sat, 12 Aug 2017 20:04:16 -0700
Subject: [PATCH 25/33] finished #18

---
 18 - Adding Up Times with Reduce/index-START.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index afe6f8dea7..1b5cab30e3 100644
--- a/18 - Adding Up Times with Reduce/index-START.html	
+++ b/18 - Adding Up Times with Reduce/index-START.html	
@@ -184,8 +184,9 @@
 <script>
   console.clear();
   let videos = document.querySelectorAll('[data-time]');
-  let videosArr = [...videos];
-  let totalSeconds = videosArr.reduce((accum, videoEl) => {
+  // let videosArr = [...videos];
+  // let totalSeconds = videosArr.reduce((accum, videoEl) => {
+    let totalSeconds = Array.prototype.reduce.call(videos, (accum, videoEl) => {
     let timeArr = videoEl.dataset.time.split(':');
     let [minutes, seconds] = [parseInt(timeArr[0]), parseInt(timeArr[1])]; 
     return accum + minutes * 60 + seconds;

From b25b7d6d2089d483677fabf233eb8cac52d5ea7c Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Sun, 13 Aug 2017 20:43:20 -0700
Subject: [PATCH 26/33] Finished 19

---
 19 - Webcam Fun/index.html |  4 +-
 19 - Webcam Fun/scripts.js | 97 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 99 insertions(+), 2 deletions(-)

diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html
index d4ffc4dc2a..cb2d1b18a4 100755
--- a/19 - Webcam Fun/index.html	
+++ b/19 - Webcam Fun/index.html	
@@ -10,7 +10,7 @@
   <div class="photobooth">
     <div class="controls">
       <button onClick="takePhoto()">Take Photo</button>
-<!--       <div class="rgb">
+      <div class="rgb">
         <label for="rmin">Red Min:</label>
         <input type="range" min=0 max=255 name="rmin">
         <label for="rmax">Red Max:</label>
@@ -29,7 +29,7 @@
         <input type="range" min=0 max=255 name="bmin">
         <label for="bmax">Blue Max:</label>
         <input type="range" min=0 max=255 name="bmax">
-      </div> -->
+      </div>
     </div>
 
     <canvas class="photo"></canvas>
diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js
index 00355f5a9c..d54c80a3bd 100644
--- a/19 - Webcam Fun/scripts.js	
+++ b/19 - Webcam Fun/scripts.js	
@@ -3,3 +3,100 @@ const canvas = document.querySelector('.photo');
 const ctx = canvas.getContext('2d');
 const strip = document.querySelector('.strip');
 const snap = document.querySelector('.snap');
+
+function getVideo() {
+  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+    .then(localMediaStream => {
+      console.log(localMediaStream);
+      video.src = window.URL.createObjectURL(localMediaStream);
+      video.play();
+    })
+    .catch(err => {
+      console.error('error message', err);
+    });
+}
+
+function paintToCanvas() {
+  const width = video.videoWidth;
+  const height = video.videoHeight;
+  canvas.width = width;
+  canvas.height = height;
+
+  return setInterval(() => {
+    ctx.drawImage(video, 0, 0, width, height);
+    // Take the pixels out
+    let pixels = ctx.getImageData(0, 0, width, height);
+    // Alter pixels
+    // pixels = redEffect(pixels);
+    pixels = rgbSplit(pixels);
+    // pixels = greenScreen(pixels);
+    ctx.globalAlpha = 0.2;
+    // Put pixels back
+    ctx.putImageData(pixels, 0, 0);
+
+  }, 16);
+}
+
+function takePhoto() {
+  setTimeout(() => {
+
+    snap.currentTime = 0;
+    snap.play();
+
+    const data = canvas.toDataURL('/image/jpeg');
+    const link = document.createElement('a');
+    link.href = data;
+    link.setAttribute('download', 'handsome');
+    link.innerHTML = `<img src=${data} alt='Handsome Smooth!'/>`;
+    strip.insertBefore(link, strip.firstChild);
+
+  }, 1000);
+}
+
+function redEffect(pixels) {
+  for (let i = 0; i < pixels.data.length; i += 4) {
+    pixels.data[i] *= 1.2; // Red
+    pixels.data[i + 1] += 50; // Green
+    pixels.data[i + 2] *= 1.4; // Blue
+  }
+  return pixels;
+}
+
+function rgbSplit(pixels) {
+  for (let i = 0; i < pixels.data.length; i += 4) {
+    pixels.data[i - 200] = pixels.data[i]; // Red
+    pixels.data[i + 80] = pixels.data[i + 1]; // Green
+    pixels.data[i - 50] = pixels.data[i + 2]; // Blue
+  }
+  return pixels;
+}
+
+function greenScreen(pixels) {
+  const levels = {};
+
+  document.querySelectorAll('.rgb input').forEach((input) => {
+    levels[input.name] = input.value;
+  });
+
+  for (i = 0; i < pixels.data.length; i = i + 4) {
+    red = pixels.data[i + 0];
+    green = pixels.data[i + 1];
+    blue = pixels.data[i + 2];
+    alpha = pixels.data[i + 3];
+
+    if (red >= levels.rmin
+      && green >= levels.gmin
+      && blue >= levels.bmin
+      && red <= levels.rmax
+      && green <= levels.gmax
+      && blue <= levels.bmax) {
+      // take it out!
+      pixels.data[i + 3] = 0;
+    }
+  }
+
+  return pixels; 
+}
+getVideo();
+
+video.addEventListener('canplay', paintToCanvas);
\ No newline at end of file

From f8167dc259c752c22b248070f29051cc327293d3 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Sun, 13 Aug 2017 21:31:08 -0700
Subject: [PATCH 27/33] Probably the most fun exercise yet...#20 speech
 recognition complete!

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

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

From b422f7c5d743ac68c6ecacf58596d8b18e88eaf5 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Mon, 14 Aug 2017 15:18:55 -0700
Subject: [PATCH 28/33] #22 finished

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

diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..db2b25b1a6 100644
--- a/22 - Follow Along Link Highlighter/index-START.html	
+++ b/22 - Follow Along Link Highlighter/index-START.html	
@@ -26,7 +26,28 @@
     </div>
 
   <script>
-    // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+    const triggers = document.querySelectorAll('a');
+
+    const highlight = document.createElement('span');
+    highlight.classList.add('highlight');
+    document.body.append(highlight);
+
+    function hightlightLink() {
+      const linkCoords = this.getBoundingClientRect();
+
+      const coords = {
+        width: linkCoords.width,
+        height: linkCoords.height,
+        top: linkCoords.top + window.scrollY,
+        left: linkCoords.left + window.scrollX 
+      }
+      highlight.style.width = `${coords.width}px`;
+      highlight.style.height = `${coords.height}px`;
+      highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
+    }
+
+    triggers.forEach(a => a.addEventListener('mouseenter', hightlightLink));
+
   </script>
 </body>
 </html>

From 6a360be6a81d6e9ed3ee00ef0730b48e43c5f614 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Sat, 26 Aug 2017 11:08:47 -0700
Subject: [PATCH 29/33] Finished 23 and 25

---
 23 - Speech Synthesis/index-START.html        | 73 ++++++++++++++-----
 .../index-START.html                          |  9 +++
 2 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e890008d36..818c8c3016 100644
--- a/23 - Speech Synthesis/index-START.html	
+++ b/23 - Speech Synthesis/index-START.html	
@@ -1,41 +1,74 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Speech Synthesis</title>
   <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
 
-    <div class="voiceinator">
+  <div class="voiceinator">
 
-      <h1>The Voiceinator 5000</h1>
+    <h1>The Voiceinator 5000</h1>
 
-      <select name="voice" id="voices">
+    <select name="voice" id="voices">
         <option value="">Select A Voice</option>
       </select>
 
-      <label for="rate">Rate:</label>
-      <input name="rate" type="range" min="0" max="3" value="1" step="0.1">
+    <label for="rate">Rate:</label>
+    <input name="rate" type="range" min="0" max="3" value="1" step="0.1">
+
+    <label for="pitch">Pitch:</label>
+
+    <input name="pitch" type="range" min="0" max="2" step="0.1">
+    <textarea name="text">Hello! I love JavaScript 👍</textarea>
+    <button id="stop">Stop!</button>
+    <button id="speak">Speak</button>
 
-      <label for="pitch">Pitch:</label>
+  </div>
 
-      <input name="pitch" type="range" min="0" max="2" step="0.1">
-      <textarea name="text">Hello! I love JavaScript 👍</textarea>
-      <button id="stop">Stop!</button>
-      <button id="speak">Speak</button>
+  <script>
+    const msg = new SpeechSynthesisUtterance();
+    let voices = [];
+    const voicesDropdown = document.querySelector('[name="voice"]');
+    const options = document.querySelectorAll('[type="range"], [name="text"]');
+    const speakButton = document.querySelector('#speak');
+    const stopButton = document.querySelector('#stop');
+    msg.text = document.querySelector('[name="text"]').value;
 
-    </div>
+    function populateVoices() {
+      voices = this.getVoices();
+      voicesDropdown.innerHTML = voices.map(voice => `<option value=${voice.name}>${voice.name} (${voice.name})</option>`);
+    }
 
-<script>
-  const msg = new SpeechSynthesisUtterance();
-  let voices = [];
-  const voicesDropdown = document.querySelector('[name="voice"]');
-  const options = document.querySelectorAll('[type="range"], [name="text"]');
-  const speakButton = document.querySelector('#speak');
-  const stopButton = document.querySelector('#stop');
-</script>
+    function setVoice() {
+      msg.voice = voices.find(voice => voice.name === this.value);
+      toggle();
+    }
+
+    function toggle(startOver = true) {
+      speechSynthesis.cancel();
+      if (startOver) {
+        speechSynthesis.speak(msg);
+      }
+    }
+
+    function setOption() {
+      console.log(this.name, this.value);
+      msg[this.name] = this.value;
+      toggle();
+    }
+
+    speechSynthesis.addEventListener('voiceschanged', populateVoices);
+    voicesDropdown.addEventListener('change', setVoice);
+    options.forEach(option => option.addEventListener('change', setOption));
+    speakButton.addEventListener('click', toggle);
+    stopButton.addEventListener('click', () => toggle(false));
+  </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html
index 98f5e070c4..e8b44891eb 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
@@ -39,7 +39,16 @@
 
 <button></button>
 <script>
+  const divs = document.querySelectorAll('div');
 
+  function log(e) {
+    console.log(this.classList.value);
+    // e.stopPropagation();  
+  }
+  divs.forEach(div => div.addEventListener('click', log, {
+    capture: false,
+    once: true 
+  }));
 </script>
 </body>
 </html>

From 0c88a2d8bd7bdaed02eff5bac1730b47b732a478 Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Sun, 27 Aug 2017 14:24:11 -0700
Subject: [PATCH 30/33] 24 finished

---
 24 - Sticky Nav/index-START.html | 16 +++++++++++++++-
 24 - Sticky Nav/style-START.css  | 12 ++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..5e37f799e1 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -54,7 +54,21 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
-
+  const nav = document.querySelector('#main');
+  const topOfNav = nav.offsetTop;
+
+  function fixNav() {
+    console.log('topOfNav', topOfNav, window.scrollY);
+    if (window.scrollY >= topOfNav) {
+      document.body.style.paddingTop = nav.offsetHeight + 'px';
+      document.body.classList.add('fixed-nav');
+    } else {
+      document.body.style.paddingTop = 0;
+      document.body.classList.remove('fixed-nav');
+    }
+  }
+
+  window.addEventListener('scroll', fixNav);
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index c6d59a31b3..0b17ea59da 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -23,6 +23,9 @@ body {
   transition: transform 0.5s;
 }
 
+.fixed-nav .site-wrap {
+  transform: scale(1);
+}
 header {
   text-align: center;
   height:50vh;
@@ -48,6 +51,11 @@ nav {
   z-index: 1;
 }
 
+.fixed-nav nav {
+  position: fixed;
+  box-shadow: 0 5px rgba(0, 0, 0, 0.1);
+}
+
 nav ul {
   margin: 0;
   padding:0;
@@ -72,6 +80,10 @@ li.logo {
   font-size: 30px;
 }
 
+.fixed-nav li.logo {
+  max-width: 500px;   
+}
+
 li.logo a {
   color:black;
 }

From 103a59a46e00021d58abe8791415ac801d21a9ea Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Sun, 27 Aug 2017 17:57:33 -0700
Subject: [PATCH 31/33] finished 26

---
 26 - Stripe Follow Along Nav/index-START.html | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
index 23808e118a..cb9801f8d8 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -134,8 +134,6 @@ <h2>Cool</h2>
     opacity: 1;
   }
 
-
-
   .dropdownBackground {
     width:100px;
     height:100px;
@@ -208,6 +206,36 @@ <h2>Cool</h2>
 </style>
 
 <script>
+  const triggers = document.querySelectorAll('.cool > li');
+  const background = document.querySelector('.dropdownBackground');
+  const nav = document.querySelector('.top');
+  
+  function handleEnter() {
+    this.classList.add('trigger-enter');
+    setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active') , 150);
+    background.classList.add('open');
+    const dropdown = this.querySelector('.dropdown');
+    const dropdownCoords = dropdown.getBoundingClientRect();
+    const navCoords = nav.getBoundingClientRect();
+    
+    const coords = {
+      height: dropdownCoords.height,
+      width: dropdownCoords.width,
+      top: dropdownCoords.top - navCoords.top,
+      left: dropdownCoords.left - navCoords.left
+    };
+
+    background.style.setProperty('height', `${coords.height}px`);
+    background.style.setProperty('width', `${coords.width}px`);
+    background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
+  }
+
+  function handleLeave() {
+    this.classList.remove('trigger-enter', 'trigger-enter-remove');
+  }
+
+  triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
+  triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
 </script>
 
 </body>

From 0967462e2ecbf5bf30db61f8883910ca41ebb19c Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Sun, 27 Aug 2017 18:22:01 -0700
Subject: [PATCH 32/33] 27 finished

---
 27 - Click and Drag/index-START.html | 41 +++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html
index b8609315f7..2678828243 100644
--- a/27 - Click and Drag/index-START.html	
+++ b/27 - Click and Drag/index-START.html	
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Click and Drag</title>
   <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
   <div class="items">
     <div class="item item1">01</div>
@@ -34,8 +36,39 @@
     <div class="item item25">25</div>
   </div>
 
-<script>
-</script>
+  <script>
+    const slider = document.querySelector('.items');
+    let isDown = false;
+    let startX;
+    let scrollLeft;
+
+    slider.addEventListener('mousedown', (e) => {
+      isDown = true;
+      slider.classList.add('active');
+      startX = e.pageX - slider.offsetLeft;
+      scrollLeft = slider.scrollLeft;
+    });
+    
+    slider.addEventListener('mouseleave', () => {
+      isDown = false;
+      slider.classList.remove('active');
+    });
+
+    slider.addEventListener('mouseup', () => {
+      isDown = false;
+      slider.classList.remove('active');
+    });
+
+    slider.addEventListener('mousemove', (e) => {
+      if (!isDown) return;
+      e.preventDefault();
+      const x = e.pageX - slider.offsetLeft;
+      console.log({x, startX});
+      const walk = (x - startX) * 6.8;
+      slider.scrollLeft = scrollLeft - walk;
+    });
+  </script>
+
+</body>
 
-  </body>
-</html>
+</html>
\ No newline at end of file

From a7baacc7e96f3b45a9b65359eaf0825bdb47b33d Mon Sep 17 00:00:00 2001
From: jdlawrence <jamil.lawrence@gmail.com>
Date: Tue, 29 Aug 2017 13:56:23 -0700
Subject: [PATCH 33/33] All finished!!

---
 28 - Video Speed Controller/index-START.html | 18 ++++++-
 29 - Countdown Timer/index.html              |  3 +-
 29 - Countdown Timer/scripts-START.js        | 56 ++++++++++++++++++++
 30 - Whack A Mole/index-FINISHED.html        |  2 +-
 30 - Whack A Mole/index-START.html           |  5 +-
 30 - Whack A Mole/script.js                  | 54 +++++++++++++++++++
 6 files changed, 131 insertions(+), 7 deletions(-)
 create mode 100644 30 - Whack A Mole/script.js

diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html
index c4cbd4259a..c1bbf0ea18 100644
--- a/28 - Video Speed Controller/index-START.html	
+++ b/28 - Video Speed Controller/index-START.html	
@@ -8,13 +8,29 @@
 <body>
 
   <div class="wrapper">
-    <video class="flex" width="765" height="430" src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1" loop controls></video>
+    <video class="flex" width="765" height="430" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164" loop controls></video>
     <div class="speed">
       <div class="speed-bar">1×</div>
     </div>
   </div>
 
 <script>
+  const speed = document.querySelector('.speed');
+  const bar = document.querySelector('.speed-bar');
+  const video = document.querySelector('.flex');
+
+  speed.addEventListener('mousemove', function(e) {
+    const y = e.pageY - this.offsetTop;
+    const percent = y / this.offsetHeight;
+    const min = 0.3;
+    const max = 4;
+    const height = Math.round(percent * 100) + '%';
+    bar.style.height = height;
+    const playbackRate = percent * (max - min) + min;
+    bar.textContent = playbackRate.toFixed(2) + 'x';
+    video.playbackRate = playbackRate;
+    console.log({height, playbackRate});
+  })
 </script>
 </body>
 </html>
diff --git a/29 - Countdown Timer/index.html b/29 - Countdown Timer/index.html
index d54f447dd9..29d2e699a4 100644
--- a/29 - Countdown Timer/index.html	
+++ b/29 - Countdown Timer/index.html	
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Countdown Timer</title>
-  <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
+  <!-- <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'> -->
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -25,5 +25,6 @@ <h1 class="display__time-left"></h1>
   </div>
 
   <script src="scripts-START.js"></script>
+  <!-- <script src="scripts-FINISHED.js"></script> -->
 </body>
 </html>
diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js
index e69de29bb2..4b2a0d4966 100644
--- a/29 - Countdown Timer/scripts-START.js	
+++ b/29 - Countdown Timer/scripts-START.js	
@@ -0,0 +1,56 @@
+const buttons = document.querySelectorAll('.timer__button');
+const customTime = document.querySelector('[name="customForm"]');
+
+function buttonClick() {
+  startCount(this.dataset.time);
+}
+
+function handleCustomTime(e) {
+  e.preventDefault();
+  const mins = document.querySelector('[name="minutes"]').value;
+  startCount(mins * 60);
+}
+
+buttons.forEach(button => {
+  button.addEventListener('click', buttonClick);
+});
+customTime.addEventListener('submit', handleCustomTime);
+
+let timeLeft = document.querySelector('.display__time-left');
+let timeEnd = document.querySelector('.display__end-time');
+
+
+let countDown;
+function startCount(timeInSeconds) {
+  // Remove old timers
+  clearInterval(countDown);
+  timeLeft.textContent = formatTime(timeInSeconds);
+
+  // Format the future time for the end of the timer
+  let endTime = new Date(Date.now() + timeInSeconds * 1000);
+  let endHours = padZeros(endTime.getHours());
+  let endMinutes = padZeros(endTime.getMinutes()); 
+  timeEnd.textContent = `Be back at ${endHours}:${endMinutes}`;
+
+  countDown = setInterval(() => {
+    timeInSeconds--;
+    timeLeft.textContent = formatTime(timeInSeconds);
+    if (timeInSeconds <= 0) {
+      clearInterval(countDown);
+    }
+  }, 1000);
+}
+
+function formatTime(timeInSeconds) {
+  let mins = padZeros(Math.floor(timeInSeconds / 60));
+  let seconds = padZeros(timeInSeconds % 60);
+  return `${mins}:${seconds}`;
+}
+
+function padZeros(num) {
+  num = num.toString();
+  while (num.length < 2) {
+    num = '0' + num;
+  }
+  return num;
+}
\ No newline at end of file
diff --git a/30 - Whack A Mole/index-FINISHED.html b/30 - Whack A Mole/index-FINISHED.html
index 8d741d5bf0..dd2a47a12c 100644
--- a/30 - Whack A Mole/index-FINISHED.html	
+++ b/30 - Whack A Mole/index-FINISHED.html	
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Whack A Mole!</title>
-  <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
+  <!-- <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'> -->
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
index 2014ff458c..7654c564a9 100644
--- a/30 - Whack A Mole/index-START.html	
+++ b/30 - Whack A Mole/index-START.html	
@@ -32,10 +32,7 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
     </div>
   </div>
 
-<script>
-  const holes = document.querySelectorAll('.hole');
-  const scoreBoard = document.querySelector('.score');
-  const moles = document.querySelectorAll('.mole');
+  <script src="script.js"></script>
 
 </script>
 </body>
diff --git a/30 - Whack A Mole/script.js b/30 - Whack A Mole/script.js
new file mode 100644
index 0000000000..cf129d0a19
--- /dev/null
+++ b/30 - Whack A Mole/script.js	
@@ -0,0 +1,54 @@
+const holes = document.querySelectorAll('.hole');
+const scoreBoard = document.querySelector('.score');
+const moles = document.querySelectorAll('.mole');
+let lastHole;
+let timeUp;
+let score = 0;
+
+function randomTime(min, max) {
+  return Math.round(Math.random() * (max - min) + min);
+}
+
+function randomHole(holes) {
+  const index = Math.floor(Math.random() * holes.length);
+  const hole = holes[index];
+  if (hole === lastHole) {
+    return randomHole(holes);
+  }
+  lastHole = hole;
+  return hole;
+}
+
+function peep() {
+  const time = randomTime(200, 1000);
+  const hole = randomHole(holes);
+  hole.classList.add('up');
+  setTimeout(() => {
+    hole.classList.remove('up');
+    if (!timeUp) {
+      peep();
+    }
+  }, time);
+}
+
+function startGame() {
+  score = 0;
+  scoreBoard.textContent = score;
+  timeUp = false;
+  peep();
+  setTimeout(function () {
+    timeUp = true;
+  }, 10000);
+}
+
+function bonk(e) {
+  console.log(e);
+  if (!e.isTrusted) return; // cheater!
+  score++;
+  scoreBoard.textContent = score;
+  this.classList.remove('up');
+}
+
+moles.forEach(mole => {
+  mole.addEventListener('click', bonk);
+});
\ No newline at end of file