From 12344542d637effd32cbfc6a2f1f0ce897289466 Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Thu, 26 Dec 2019 11:12:51 -0600
Subject: [PATCH 01/16] Completed lesson 1

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

diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..74bb6d84ce 100644
--- a/01 - JavaScript Drum Kit/index-START.html	
+++ b/01 - JavaScript Drum Kit/index-START.html	
@@ -58,9 +58,46 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  window.addEventListener('keydown', playSound);
 
-</script>
+  const keys = document.querySelectorAll('.key');
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+  function playSound(e) {
+    // Use  template strings to dynamically build selectors
+    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);     
+    if(!audio) return; // ignore if we don't find an audio file
+
+    // API for <audio> elements
+    audio.currentTime = 0;
+    audio.play();
 
+    // Native interface for adding and removing CSS classes on an element.
+    // key.classList.remove()
+    // key.classList.toggle('class')
+    // key.classList.toggle('class', i < 10) // add conditional
+    // key.classList.contains('class')
+    key.classList.add('playing');
+  }
 
+  function removeTransition(e) {
+    // Events are fired for every property that is being transformed
+    if(e.propertyName !== 'transform') return;
+
+    // Target the end transform events
+    // Interesting use of this. My first inclination is to use e.target
+    this.classList.remove('playing');
+  }
+
+  /**
+   * The Document method querySelector() returns the first Element within the document 
+   * that matches the specified selector, or group of selectors. If no matches are found, 
+   * null is returned. 
+   * 
+   * The Document method querySelectorAll() returns a static (not live) NodeList representing 
+   * a list of the document's elements that match the specified group of selectors.
+  **/
+</script>
 </body>
 </html>

From f3c934bab4714c732fd3bf185950306cb97ed6b1 Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Thu, 26 Dec 2019 13:49:41 -0600
Subject: [PATCH 02/16] Completed lesson 02

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

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 12f721b183..2d6e3b4bf4 100644
--- a/02 - JS and CSS Clock/index-START.html	
+++ b/02 - JS and CSS Clock/index-START.html	
@@ -53,7 +53,9 @@
       position: relative;
       width: 100%;
       height: 100%;
-      transform: translateY(-3px); /* account for the height of the clock hands */
+
+      /* account for the height of the clock hands */
+      transform: translateY(-3px); 
     }
 
     .hand {
@@ -62,13 +64,42 @@
       background: black;
       position: absolute;
       top: 50%;
+
+      /* Transform the hand from the right-most point */
+      transform-origin: 100%;
+
+      /* Start the hand from the 12 o'clock position */
+      transform: rotate(90deg);
+      transition: all 0.5s;
+
+      /* Timing function built in dev tools & transferred to CSS */
+      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
     }
 
   </style>
 
   <script>
+    const hourHand = document.querySelector('.hour-hand');
+    const minuteHand = document.querySelector('.min-hand');
+    const secondHand = document.querySelector('.second-hand');
 
+    function setDate() {
+      const now = new Date();
+      
+      const seconds = now.getSeconds();
+      const secondsDegrees = ((seconds / 60) * 360) + 90;
+      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+
+      const minutes = now.getMinutes();
+      const minuteDegrees = ((minutes / 60) * 360) + 90;
+      minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
+
+      const hours = now.getHours();
+      const hourDegrees = ((hours / 12) * 360) + 90;
+      hourHand.style.transform = `rotate(${hourDegrees}deg)`;
+    }
 
+    setInterval(setDate, 1000);
   </script>
 </body>
 </html>

From e5e0bea03c8daddd03c51784a1cefa669e0c83c4 Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Thu, 26 Dec 2019 14:54:32 -0600
Subject: [PATCH 03/16] Completed lesson 03

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

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 6b9b539c09..beeb89e70a 100644
--- a/03 - CSS Variables/index-START.html	
+++ b/03 - CSS Variables/index-START.html	
@@ -9,7 +9,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
   <div class="controls">
     <label for="spacing">Spacing:</label>
-    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+    <input id="spacing" type="range" name="spacing" min="10" max="50" value="10" data-sizing="px">
 
     <label for="blur">Blur:</label>
     <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
@@ -21,6 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <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
@@ -45,7 +60,26 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
-  </script>
 
+    // Wes used document.documentElement
+    const root = document.querySelector(':root');
+
+    // Returns an object of type NodeList
+    const inputs = document.querySelectorAll('.controls input');
+
+    // forEach was later added to NodeList
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+
+    // Watch mouseover to provide better realtime feedback
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+
+    function handleUpdate(e) {
+      // Use dataset to access data- attributes
+      const suffix = this.dataset.sizing || '';
+
+      // style attribute provides access to the inline styles of the element
+      root.style.setProperty(`--${this.name}`, this.value + suffix);
+    }
+  </script>
 </body>
 </html>

From f56173d0743c3c1a3873be5733e7dff0e85fd63f Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Sun, 29 Dec 2019 08:06:11 -0600
Subject: [PATCH 04/16] Completed lesson 04

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

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index eec0ffc31d..f79b7c2e93 100644
--- a/04 - Array Cardio Day 1/index-START.html	
+++ b/04 - Array Cardio Day 1/index-START.html	
@@ -31,29 +31,77 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    let sixteenthCentury = inventors.filter(i => i.year > 1499 && i.year < 1600);
+    // console.table(sixteenthCentury);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    let firstLast = inventors.map(i => `${i.first} ${i.last}`);
+    // console.log(firstLast);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    inventors.sort((a, b) => b.year - a.year);
+    // console.log('Oldest to youngest');
+    // console.table(inventors);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    let totalYears =inventors.reduce((total, i) => (total + (i.passed - i.year)), 0);
+    // console.log('Total years', totalYears);
+
+    // Wes' solution
+    // const totalYears = inventors.reduce((total, inventor) => {
+    //   return total + (inventor.passed - inventor.year);
+    // }, 0);
+    // console.log('Total years:', totalYears);
 
     // 5. Sort the inventors by years lived
+    console.log('Sort by years lived');
+    inventors.forEach(i => i.age = (i.passed - i.year)); 
+    inventors.sort((a, b) => b.age - a.age);
+    console.table(inventors);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 
+    // Have to run this code against the Wikipedia page
+    // let category = document.querySelector('.mw-category');
+
+    // // querySelectorAll returns a NodeList, not an array
+    // let links = Array.from(category.querySelectorAll('a'));
+
+    // let de = links
+    //   .map(link => link.textContent)
+    //   .filter(link => link.includes(' de '));
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    people.sort((lastOne, nextOne) => {
+      let [aLast, aFirst] = lastOne.split(', ');
+      let [bLast, bFirst] = nextOne.split(', ');
+
+      if(aLast < bLast) return -1;
+      else if (aLast === bLast) return 0;
+      else return 1;
+    });
+    // console.log(people);
 
     // 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' ];
 
+    let transportation = data.reduce((obj, item) => {
+      if(!obj[item]) { 
+        obj[item] = 0; 
+      }
+      
+      obj[item]++
+      return obj;
+    }, {});
+
+    console.table(transportation);
+
   </script>
 </body>
 </html>

From f85f0f053f07be4f9dd6921fcaf911d15e0a79e1 Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Mon, 6 Jan 2020 05:58:44 -0600
Subject: [PATCH 05/16] Completed lesson 05

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

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index 71d1c26f00..887f940d7e 100644
--- a/05 - Flex Panel Gallery/index-START.html	
+++ b/05 - Flex Panel Gallery/index-START.html	
@@ -26,6 +26,7 @@
     .panels {
       min-height: 100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
@@ -43,6 +44,11 @@
       font-size: 20px;
       background-size: cover;
       background-position: center;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
     }
 
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
@@ -56,8 +62,18 @@
       margin: 0;
       width: 100%;
       transition: transform 0.5s;
+      flex: 1 0 auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
+    .panel > *:first-child { transform: translateY(-100%);}
+    .panel > *:last-child { transform: translateY(100%);}
+    
+    .panel.panel.open-active > *:last-child { transform: translateY(0); }
+    .panel.open-active > *:first-child { transform: translateY(0); }
+
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
@@ -71,6 +87,7 @@
 
     .panel.open {
       font-size: 40px;
+      flex: 5;
     }
 
   </style>
@@ -105,10 +122,22 @@
   </div>
 
   <script>
+    function toggleOpen() {
+      this.classList.toggle('open');
+    }
 
-  </script>
+    function toggleActive(e) {
+      // Safari uses flex instead of flex-grow
+      if(e.propertyName.includes('flex')) {
+        this.classList.toggle('open-active');
+      }
+    }
 
+    const panels = document.querySelectorAll('.panel');
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
 
+  </script>
 
 </body>
 </html>

From b921efc97d0537ecb065226f99cc5afc0465b9cd Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Tue, 7 Jan 2020 05:58:11 -0600
Subject: [PATCH 06/16] Completed lesson 06

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

diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 109c90fb36..f84f882eef 100644
--- a/06 - Type Ahead/index-START.html	
+++ b/06 - Type Ahead/index-START.html	
@@ -16,6 +16,48 @@
   </form>
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+const cities = [];
+
+fetch(endpoint)
+  .then(blob => blob.json())
+  .then(data => cities.push(...data));
+
+function findMatches(wordToMatch, cities) {
+  return cities.filter(place => {
+    // figure out if the city or state matches
+    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 => {
+    const regex = new RegExp(this.value, 'gi');
+    const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
+    const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
+
+    return `
+      <li>
+        <span class="name">${cityName}, ${stateName}</span>
+        <span class="population">${numberWithCommas(place.population)}</span>
+      <li>
+    `;
+  }).join('');
+
+  suggestions.innerHTML = html;
+}
+
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+searchInput.addEventListener('change', displayMatches);
+searchInput.addEventListener('keyup', displayMatches);
 
 </script>
 </body>

From c9cf6687ca8c4e133e04294c58f1d82702dc28b8 Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Wed, 8 Jan 2020 06:05:46 -0600
Subject: [PATCH 07/16] Completed lesson 07

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

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..54cb560ada 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -26,15 +26,42 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+    const isAdult = people.some(person => {
+      const currentYear = (new Date()).getFullYear();
+      return currentYear - person.year >= 19;
+    })
+
+    console.log({isAdult});
+
     // Array.prototype.every() // is everyone 19 or older?
+    const everyAdult = people.every(person => {
+      const currentYear = (new Date()).getFullYear();
+      return currentYear - person.year >= 19;
+    })
+
+    console.log({everyAdult});
 
     // 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 target = comments.find(comment => comment.id === 823423);
+    console.log('Target', target);
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const index = comments.findIndex(comment => comment.id === 823423);
+    console.log('Index', index);
+    
+    comments.splice(index, 1);
+    console.table(comments);
+
+    const newComments = [
+      ...comments.slice(0, index),
+      ...comments.slice(index)
+    ];
+
+    console.table(newComments);
 
   </script>
 </body>

From 88aee0f47f5b3507fcd0b4dbc73aac4cdad14b60 Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Fri, 10 Jan 2020 07:13:12 -0600
Subject: [PATCH 08/16] Addendum to lesson 07

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

diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 54cb560ada..a6e4d05859 100644
--- a/07 - Array Cardio Day 2/index-START.html	
+++ b/07 - Array Cardio Day 2/index-START.html	
@@ -56,6 +56,8 @@
     comments.splice(index, 1);
     console.table(comments);
 
+    // Popular in Redux, Non-destructive
+    // spread operator inside delimeters
     const newComments = [
       ...comments.slice(0, index),
       ...comments.slice(index)

From 9ff04485a053cf21c0fecd7a8bf6b2f93e0f30c1 Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Fri, 10 Jan 2020 07:13:30 -0600
Subject: [PATCH 09/16] Completed lesson 10

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

diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index 4fd2936ddc..2088610161 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html	
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html	
@@ -96,6 +96,30 @@
   </div>
 
 <script>
+  const checkboxes = Array.from(document.querySelectorAll('.inbox input[type="checkbox"]'));
+  checkboxes.forEach(check => check.addEventListener('click', handleCheck));
+
+  let lastChecked = null;
+
+  function handleCheck(e) {
+
+    if(lastChecked != null && e.shiftKey) {
+      const lastIndex = checkboxes.findIndex(check => check === lastChecked);    
+      const currentIndex = checkboxes.findIndex(check => check === this);
+
+      // Wes loops through all the checkboxes every time
+      // Here we sort the indices and slice the checkboxes to get the set we want
+      const range = [lastIndex, currentIndex].sort();
+      const targets = checkboxes.slice(range[0], range[1]+1);
+
+      // Wes is only allowing bulk check. We allow for bulk uncheck as well.
+      targets.forEach(target => target.checked = lastChecked.checked);
+    }
+
+    lastChecked = this;
+  }
 </script>
+
+
 </body>
 </html>

From 7aa28814e6393713c663d108f31468f058e31951 Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Sun, 12 Jan 2020 06:49:17 -0600
Subject: [PATCH 10/16] Completed lesson 08

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

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 9da9b5b3c5..d812c27364 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html	
+++ b/08 - Fun with HTML5 Canvas/index-START.html	
@@ -7,8 +7,55 @@
 <body>
 <canvas id="draw" width="800" height="800"></canvas>
 <script>
-</script>
+ const canvas = document.querySelector('#draw');
+ const ctx = canvas.getContext('2d');
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ ctx.strokeStyle = '#BADA55';
+ ctx.lineJoin = 'round';
+ ctx.lineCap = 'round';
+ ctx.lineWidth = 22;
+ ctx.globalCompositeOperation = 'multiply';
 
+ let isDrawing = false;
+ let lastX = 0;
+ let lastY = 0;
+ let hue = 0;
+ let direction = 10;
+
+ function draw(e) {
+   if(!isDrawing) return;
+   console.log('draw', e);
+   ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+   ctx.beginPath();
+   ctx.moveTo(lastX, lastY);
+   ctx.lineTo(e.offsetX, e.offsetY);
+  //  ctx.lineWidth = 22;
+   ctx.stroke();
+   [lastX, lastY] = [e.offsetX, e.offsetY];
+   hue++;
+   if(hue >= 360) hue = 0;
+
+  if(ctx.lineWidth >= 47 || ctx.lineWidth <= 1) {
+    direction = !direction;
+  }
+
+  if(direction) ctx.lineWidth++;
+  else ctx.lineWidth--;
+ }
+
+ canvas.addEventListener('mousedown', (e) => {
+   isDrawing = true;
+   [lastX, lastY] = [e.offsetX, e.offsetY];
+ });
+
+ canvas.addEventListener('mousemove', draw);
+ canvas.addEventListener('mouseup', () => isDrawing = false);
+ canvas.addEventListener('mouseout', () => isDrawing = false);
+
+</script>
 <style>
   html, body {
     margin: 0;

From bd57117032d425c8b1d2c3f56d16f702d4f96500 Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Mon, 20 Jan 2020 05:21:54 -0600
Subject: [PATCH 11/16] Completed lesson 12

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

diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index dc53c4e9e1..aeee2740f4 100644
--- a/12 - Key Sequence Detection/index-START.html	
+++ b/12 - Key Sequence Detection/index-START.html	
@@ -6,7 +6,20 @@
   <script type="text/javascript" src="https://www.cornify.com/js/cornify.js"></script>
 </head>
 <body>
-<script>
-</script>
-</body>
+  <script>
+    let pressed = [];
+    const code = 'denny';
+  
+    window.addEventListener('keyup', (e) => {
+      pressed.push(e.key);
+      pressed.splice(-code.length - 1, pressed.length - code.length);
+      console.log(pressed);
+  
+      if(pressed.join('').includes(code)) {
+        console.log('ding ding');
+        cornify_add();
+      }
+    });
+  </script>
+  </body>
 </html>

From c8e5e2a5d64cb4df5df5e05fd8f054fc2b33364a Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Mon, 20 Jan 2020 06:27:35 -0600
Subject: [PATCH 12/16] Completed lesson 13

---
 13 - Slide in on Scroll/index-START.html      |  30 +++
 .../jd-debounce-explained.js                  | 183 ++++++++++++++++++
 2 files changed, 213 insertions(+)
 create mode 100644 13 - Slide in on Scroll/jd-debounce-explained.js

diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index ad2f0e580a..9bdf48ab51 100644
--- a/13 - Slide in on Scroll/index-START.html	
+++ b/13 - Slide in on Scroll/index-START.html	
@@ -43,21 +43,51 @@ <h1>Slide in on Scroll</h1>
   </div>
 
   <script>
+    // See explainer script in the directory
     function debounce(func, wait = 20, immediate = true) {
       var timeout;
+      
       return function() {
         var context = this, args = arguments;
+        
         var later = function() {
           timeout = null;
           if (!immediate) func.apply(context, args);
         };
+        
         var callNow = immediate && !timeout;
+        
         clearTimeout(timeout);
         timeout = setTimeout(later, wait);
+        
         if (callNow) func.apply(context, args);
       };
     }
 
+    const sliderImages = document.querySelectorAll('.slide-in');
+
+    function checkSlide(e) {
+
+      sliderImages.forEach(sliderImage => {
+        // half-way through the image
+        let slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
+
+        // bottom of the image
+        let imageBottom = sliderImage.offsetTop + sliderImage.height;
+
+        let isHalfShown = slideInAt > sliderImage.offsetTop;
+        let isNotScrolledPast = window.scrollY < imageBottom;
+
+        if(isHalfShown && isNotScrolledPast) {
+          sliderImage.classList.add('active');
+        } else {
+          sliderImage.classList.remove('active');
+        }
+        console.log(slideInAt);
+      });
+    }
+
+    window.addEventListener('scroll', debounce(checkSlide));
   </script>
 
   <style>
diff --git a/13 - Slide in on Scroll/jd-debounce-explained.js b/13 - Slide in on Scroll/jd-debounce-explained.js
new file mode 100644
index 0000000000..8078670b95
--- /dev/null
+++ b/13 - Slide in on Scroll/jd-debounce-explained.js	
@@ -0,0 +1,183 @@
+// From: https://john-dugan.com/javascript-debounce/
+
+// Create JD Object
+// ----------------
+/*
+    It's a good idea to attach helper methods like `debounce` to your own 
+    custom object. That way, you don't pollute the global space by 
+    attaching methods to the `window` object and potentially run in to
+    conflicts.
+*/
+var JD = {};
+
+// Debounce Method
+// ---------------
+/*
+    Return a function, that, as long as it continues to be invoked, will
+    not be triggered. The function will be called after it stops being 
+    called for `wait` milliseconds. If `immediate` is passed, trigger the 
+    function on the leading edge, instead of the trailing.
+*/
+JD.debounce = function(func, wait, immediate) {
+    /*
+        Declare a variable named `timeout` variable that we will later use 
+        to store the *timeout ID returned by the `setTimeout` function.
+
+        *When setTimeout is called, it retuns a numeric ID. This unique ID
+        can be used in conjunction with JavaScript's `clearTimeout` method 
+        to prevent the code passed in the first argument of the `setTimout`
+        function from being called. Note, this prevention will only occur
+        if `clearTimeout` is called before the specified number of 
+        milliseconds passed in the second argument of setTimeout have been
+        met.
+    */
+    var timeout;
+
+    /*
+        Return an anomymous function that has access to the `func`
+        argument of our `debounce` method through the process of closure.
+    */
+    return function() {
+
+        /*
+            1) Assign `this` to a variable named `context` so that the 
+               `func` argument passed to our `debounce` method can be 
+               called in the proper context.
+
+            2) Assign all *arugments passed in the `func` argument of our
+               `debounce` method to a variable named `args`.
+
+            *JavaScript natively makes all arguments passed to a function
+            accessible inside of the function in an array-like variable 
+            named `arguments`. Assinging `arguments` to `args` combines 
+            all arguments passed in the `func` argument of our `debounce` 
+            method in a single variable.
+        */
+        var context = this,   /* 1 */
+            args = arguments; /* 2 */
+
+        /*
+            Assign an anonymous function to a variable named `later`.
+            This function will be passed in the first argument of the
+            `setTimeout` function below.
+        */
+        var later = function() {
+            
+            /*      
+                When the `later` function is called, remove the numeric ID 
+                that was assigned to it by the `setTimeout` function.
+
+                Note, by the time the `later` function is called, the
+                `setTimeout` function will have returned a numeric ID to 
+                the `timeout` variable. That numeric ID is removed by 
+                assiging `null` to `timeout`.
+            */
+            timeout = null;
+
+            /*
+                If the boolean value passed in the `immediate` argument 
+                of our `debouce` method is falsy, then invoke the 
+                function passed in the `func` argument of our `debouce`
+                method using JavaScript's *`apply` method.
+
+                *The `apply` method allows you to call a function in an
+                explicit context. The first argument defines what `this`
+                should be. The second argument is passed as an array 
+                containing all the arguments that should be passed to 
+                `func` when it is called. Previously, we assigned `this` 
+                to the `context` variable, and we assigned all arguments 
+                passed in `func` to the `args` variable.
+            */
+            if ( !immediate ) {
+                func.apply(context, args);
+            }
+        };
+
+        /*
+            If the value passed in the `immediate` argument of our 
+            `debounce` method is truthy and the value assigned to `timeout`
+            is falsy, then assign `true` to the `callNow` variable.
+            Otherwise, assign `false` to the `callNow` variable.
+        */
+        var callNow = immediate && !timeout;
+
+        /*
+            As long as the event that our `debounce` method is bound to is 
+            still firing within the `wait` period, remove the numerical ID  
+            (returned to the `timeout` vaiable by `setTimeout`) from 
+            JavaScript's execution queue. This prevents the function passed 
+            in the `setTimeout` function from being invoked.
+
+            Remember, the `debounce` method is intended for use on events
+            that rapidly fire, ie: a window resize or scroll. The *first* 
+            time the event fires, the `timeout` variable has been declared, 
+            but no value has been assigned to it - it is `undefined`. 
+            Therefore, nothing is removed from JavaScript's execution queue 
+            because nothing has been placed in the queue - there is nothing 
+            to clear.
+
+            Below, the `timeout` variable is assigned the numerical ID 
+            returned by the `setTimeout` function. So long as *subsequent* 
+            events are fired before the `wait` is met, `timeout` will be 
+            cleared, resulting in the function passed in the `setTimeout` 
+            function being removed from the execution queue. As soon as the 
+            `wait` is met, the function passed in the `setTimeout` function 
+            will execute.
+        */
+        clearTimeout(timeout);
+
+        /*
+            Assign a `setTimout` function to the `timeout` variable we 
+            previously declared. Pass the function assigned to the `later` 
+            variable to the `setTimeout` function, along with the numerical 
+            value assigned to the `wait` argument in our `debounce` method. 
+            If no value is passed to the `wait` argument in our `debounce` 
+            method, pass a value of 200 milliseconds to the `setTimeout` 
+            function.  
+        */
+        timeout = setTimeout(later, wait || 200);
+
+        /*
+            Typically, you want the function passed in the `func` argument
+            of our `debounce` method to execute once *after* the `wait` 
+            period has been met for the event that our `debounce` method is 
+            bound to (the trailing side). However, if you want the function 
+            to execute once *before* the event has finished (on the leading 
+            side), you can pass `true` in the `immediate` argument of our 
+            `debounce` method.
+
+            If `true` is passed in the `immediate` argument of our 
+            `debounce` method, the value assigned to the `callNow` variable 
+            declared above will be `true` only after the *first* time the 
+            event that our `debounce` method is bound to has fired.
+
+            After the first time the event is fired, the `timeout` variable
+            will contain a falsey value. Therfore, the result of the 
+            expression that gets assigned to the `callNow` variable is 
+            `true` and the function passed in the `func` argument of our
+            `debounce` method is exected in the line of code below.
+
+            Every subsequent time the event that our `debounce` method is 
+            bound to fires within the `wait` period, the `timeout` variable 
+            holds the numerical ID returned from the `setTimout` function 
+            assigned to it when the previous event was fired, and the 
+            `debounce` method was executed.
+
+            This means that for all subsequent events within the `wait`
+            period, the `timeout` variable holds a truthy value, and the
+            result of the expression that gets assigned to the `callNow`
+            variable is `false`. Therefore, the function passed in the 
+            `func` argument of our `debounce` method will not be executed.  
+
+            Lastly, when the `wait` period is met and the `later` function
+            that is passed in the `setTimeout` function executes, the 
+            result is that it just assigns `null` to the `timeout` 
+            variable. The `func` argument passed in our `debounce` method 
+            will not be executed because the `if` condition inside the 
+            `later` function fails. 
+        */
+        if ( callNow ) { 
+            func.apply(context, args);
+        }
+    };
+};

From 1d9f8c26c841fe1880b792f5c2ac171447247444 Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Mon, 20 Jan 2020 07:01:59 -0600
Subject: [PATCH 13/16] Completed lessor 14

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

diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index f978b7446f..3ed498cf09 100644
--- a/14 - JavaScript References VS Copying/index-START.html	
+++ b/14 - JavaScript References VS Copying/index-START.html	
@@ -8,11 +8,42 @@
 
   <script>
     // start with strings, numbers and booleans
+    // let age = 100;
+    // let age2 = age;
+    // console.log(age, age2);
+    // age = 200;
+    // console.log(age, age2);
+
+    // let name = 'Wes';
+    // let name2 = name;
+    // console.log(name, name2);
+    // name = 'wesley';
+    // console.log(name, name2);
 
     // Let's say we have an array
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
 
+    const team = players;
+
+    console.log(players, team);
+    // team[3] = 'Lux';
+    // console.log(players, team);
+
     // and we want to make a copy of it.
+    let team2 = players.slice();
+    team2[3] = 'Lux';
+    // console.log(players, team2);
+
+
+    let team3 = [].concat(players);
+
+    // ES6 way - spread operator
+    // spread spreads out the elements in players and puts them
+    // in the new array
+    let team4 = [...players];
+
+    // Also a modern technique
+    let team5 = Array.from(players);
 
     // You might think we can just do something like this:
 
@@ -43,13 +74,35 @@
     };
 
     // and think we make a copy:
+    let captain = person;
+    captain.age = 99;
 
     // how do we take a copy instead?
+    let cap2 = Object.assign({}, person, {number: 100, age: 12});
 
     // We will hopefully soon see the object ...spread
+    // spread out attributes in person into a new object
+    let cap3 = {...person};
 
     // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
+    let wes = {
+      name: 'Wes',
+      age: 100,
+      social: {
+        twitter: '@wesbos',
+        facebook: 'wesbox.developer'
+      }
+    };
+
+    let dev = {...wes};
+    //let dev = Object.assign({}, wes);
+    //dev.social.facebook = 'wesbos.developer';
+
+    let dev2 = JSON.parse(JSON.stringify(wes));
+    dev2.social.facebook = 'wesbos.developer';
 
+    console.clear();
+    console.log(wes, dev2);
   </script>
 
 </body>

From ba3a928d561385e6b5df358e35a47deb10a66455 Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Wed, 29 Jan 2020 06:02:40 -0600
Subject: [PATCH 14/16] Completed lesson 24

---
 24 - Sticky Nav/index-START.html | 17 ++++++++++++++++-
 24 - Sticky Nav/style-START.css  | 13 +++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..230aa65a4d 100644
--- a/24 - Sticky Nav/index-START.html	
+++ b/24 - Sticky Nav/index-START.html	
@@ -54,7 +54,22 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
-
+  let nav = document.querySelector('#main');
+  let topOfNav = nav.offsetTop;
+
+  function fixNav() {
+    console.log(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 b83b9c01ae..d15698ca2f 100644
--- a/24 - Sticky Nav/style-START.css	
+++ b/24 - Sticky Nav/style-START.css	
@@ -25,6 +25,10 @@ body {
   transition: transform 0.5s;
 }
 
+.fixed-nav .site-wrap {
+  transform: scale(1.0);
+}
+
 header {
   text-align: center;
   height: 50vh;
@@ -50,6 +54,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;
@@ -74,6 +83,10 @@ li.logo {
   font-size: 30px;
 }
 
+.fixed-nav li.logo {
+  max-width: 500px;
+}
+
 li.logo a {
   color: black;
 }

From 7f457dcd2ebcf29cea02dad7f73ac25a7a91c06f Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Wed, 29 Jan 2020 12:52:38 -0600
Subject: [PATCH 15/16] Completed lesson 25

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

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 7bd5931e01..5cedc95f1a 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html	
@@ -42,7 +42,16 @@
 
 <button></button>
 <script>
+  let divs = document.querySelectorAll('div');
 
+  function logText(e) {
+    console.log(this.classList.value);
+    console.log(this);
+    // e.stopPropagation();
+  }
+
+  divs.forEach(div => div.addEventListener('click', logText, { capture: false, once: true }));
+  // document.body.addEventListener('click', logText);
 </script>
 </body>
 </html>

From a5e4a7c21b1ee35168740123113c9a310b413d12 Mon Sep 17 00:00:00 2001
From: Denny Crall <dennis-crall@uiowa.edu>
Date: Thu, 30 Jan 2020 05:55:18 -0600
Subject: [PATCH 16/16] Completed lesson 26

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

diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
index 608d0a6716..a09fc831de 100644
--- a/26 - Stripe Follow Along Nav/index-START.html	
+++ b/26 - Stripe Follow Along Nav/index-START.html	
@@ -99,6 +99,13 @@ <h2>Cool</h2>
     padding-top: .8em;
   }
 
+  /*
+    The perspective CSS property determines the distance 
+    between the z=0 plane and the user in order to give a 
+    3D-positioned element some perspective.
+
+    https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
+   */
   nav {
     position: relative;
     perspective: 600px;
@@ -129,6 +136,15 @@ <h2>Cool</h2>
     justify-content: center;
   }
 
+
+  /* 
+    If the position property is absolute, the containing block 
+    is formed by the edge of the padding box of the nearest 
+    ancestor element that has a position value other than static 
+    (fixed, absolute, relative, or sticky).
+    
+    https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_Block
+   */
   .dropdown {
     opacity: 0;
     position: absolute;
@@ -220,6 +236,56 @@ <h2>Cool</h2>
 </style>
 
 <script>
+  let triggers = document.querySelectorAll('.cool li');
+  let background = document.querySelector('.dropdownBackground');
+  let nav = document.querySelector('.top');
+
+  function handleEnter() {
+
+    // .trigger-enter sets display to block
+    this.classList.add('trigger-enter');
+    
+    // .trigger-enter-active is added 150 ms later (if still active)
+    // .tigger-enter-active sets the opacity from 0 to 1
+    // This two step process allows the browser to animate the transition
+    // This 2-step is how React & Angular handle animation
+    setTimeout(() => {
+      if(this.classList.contains('trigger-enter')) {
+        this.classList.add('trigger-enter-active');  
+      }      
+    }, 150);
+
+    // Set the backgrounds opacity to 1
+    background.classList.add('open');
+
+    // Get dropdown for the active trigger (li)
+    let dropdown = this.querySelector('.dropdown');
+
+    // Calculate coordinates for the nav bar and the active dropdown
+    let navCoords = nav.getBoundingClientRect();
+    let dropdownCoords = dropdown.getBoundingClientRect();
+
+    // Calculate coordinates for the background
+    const coords = {
+      height: dropdownCoords.height,
+      width: dropdownCoords.width,
+      top: dropdownCoords.top - navCoords.top,
+      left: dropdownCoords.left - navCoords.left
+    }
+
+    // Set background styles
+    background.style.setProperty('width', `${coords.width}px`);
+    background.style.setProperty('height', `${coords.height}px`);
+    background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px`);
+  }
+
+  function handleLeave() {
+    this.classList.remove('trigger-enter', 'trigger-enter-active');
+    background.classList.remove('open');
+  }
+
+  triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
+  triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
 </script>
 
 </body>