diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..2183d69
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "angulardoc.repoId": "a547aa17-a9ab-4f77-ba4c-f3167ae617d2",
+  "angulardoc.lastSync": 0
+}
\ No newline at end of file
diff --git a/exercises/03 - CSS Variables/README.md b/exercises/03 - CSS Variables/README.md
index 101a76f..7a35a35 100644
--- a/exercises/03 - CSS Variables/README.md	
+++ b/exercises/03 - CSS Variables/README.md	
@@ -1,10 +1,11 @@
 # Exercise 3: CSS Variables
+
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
 Last Commit Date: May 12, 2017
 
 The web page provided in this exercise displays an image, and has 3 form inputs
   from which the user can manipulate the padding, blur amount, and background
-  color of the image. Update the CSS and write the JavaScript code necessary to 
+  color of the image. Update the CSS and write the JavaScript code necessary to
   bring functionality to the inputs.
 
 ## Guide
@@ -24,6 +25,7 @@ The purpose of this exercise is to gain experience using _CSS3 variables_. These
 **Steps:**
 
 - CSS:
+
   1. Declare a new style for the `:root` element and declare three variables inside
     the style definition for `:root` with the same names as the `input` _HTML elements_.
     _CSS3 variables_ are declared in the following syntax format:
@@ -36,7 +38,8 @@ The purpose of this exercise is to gain experience using _CSS3 variables_. These
         --padding: 10px;
       }
       ```
-  2. Declare a new style for the `img` element and set the `background`, `filter`, and
+
+  1. Declare a new style for the `img` element and set the `background`, `filter`, and
     `padding` properties to the variables we defined at the root element:
       ```CSS
       /* 'var(--variableName)' to use previously defined CSS properties */
@@ -47,21 +50,26 @@ The purpose of this exercise is to gain experience using _CSS3 variables_. These
         padding: var(--padding);
       }
       ```
-  3. Declare a new style for the `.hl` class and set the color to the `base` variable.
+
+  1. Declare a new style for the `.hl` class and set the color to the `base` variable.
 
 - JavaScript:
+
   1. Declare & define a variable as a reference to all of the inputs on the page.
-  2. Iterate through the _HTML Node Elements_ that the variable is referencing and 
-    attach _event listeners_ to all of them that will call on an _event handler_ whenever
-    the input value has been changed.
-  3. Repeat step 2, listening for mouse movements on the inputs instead of value
-    changes.
-  4. Define a function that will be used as the _event handler_. This will update
-    the value of the _CSS3 variable_ **at the document level** corresponding with the 
-    `input` element's `name` property which triggered the event handler.
-    - Minor 'gotcha': Properties like `padding` and `blur` won't update because
+
+  1. Iterate through the _HTML Node Elements_ that the variable is referencing and
+    attach _event listeners_ to each one that will call on an _event handler_ whenever
+    the input value has been changed (the `change` event).
+
+  1. Repeat step 2, listening for mouse movements on the inputs instead of value
+    changes (the `mousemove` event).
+
+  1. Define a function that will be used as the _event handler_. It will update
+    the value of the _CSS3 variable_ **at the root document level** corresponding with
+    the `name` property of the `input` element which called this function.
+        - Minor 'gotcha': Properties like `padding` and `blur` won't update because
       the value from the input does not include the type of measurement we are using
-      ('px', 'em', etc.). The `input` _HTML elements_ also have a `data-*` property if 
+      ('px', 'em', etc.). The `input` _HTML elements_ also have a `data-sizing` property if
       they require a suffix. We can use this to attach the correct suffix to the
       value if necessary.
 
diff --git a/exercises/03 - CSS Variables/index.html b/exercises/03 - CSS Variables/index.html
index b21e1ab..d422ba0 100644
--- a/exercises/03 - CSS Variables/index.html	
+++ b/exercises/03 - CSS Variables/index.html	
@@ -1,29 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <meta charset="UTF-8">
   <title>Scoped CSS Variables and JS</title>
-
   <style>
-  /*
-    Define variables at the root level so their scope is the entire document
-  */
+    /* Define variables at the root level so their scope is the entire document */
     :root {
       --base: goldenrod;
       --blur: 10px;
       --padding: 10px;
     }
 
-    /*
-      Set image property values as the variables defined at the root element
-    */
+    /* Set image property values using previously defined variables */
     img {
+      box-sizing: border-box;
       background: var(--base);
       filter: blur(var(--blur));
       padding: var(--padding);
+      border-radius: 2rem;
     }
 
+    /* 'JS' text color that will match the image background color */
     .hl {
       color: var(--base);
     }
@@ -49,7 +46,6 @@
     }
   </style>
 </head>
-
 <body>
   <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
@@ -64,26 +60,43 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     <input type="color" name="base" value="#ffc600">
   </div>
 
-  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+  <img src="https://source.unsplash.com/800x500">
 
   <script>
-    // Declare & define variable reference to all inputs inside the 'control' class
-    const inputs = document.querySelectorAll('.controls input');
-
-    // Event Handler function
-    function handleUpdate() {
-      // Get the data-sizing property value if one exists, or set as empty string
-      const suffix = this.dataset.sizing || '';
-      // Target the entire document and update the value of the CSS variable which corresponds
-      // with the 'name' property of the HTML element that triggered this function.
-      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
-    }
-
-    // Attach event listeners to each input
-    inputs.forEach(input => input.addEventListener('change', handleUpdate));
-    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+    (()=>{
+      'use strict';
+      // Declare & define variable reference to all inputs inside the 'control' class
+      const inputs = document.querySelectorAll('.controls input');
+
+      // Event Handler function. Such object destructure much default parameters wow
+      const handleUpdate = ({ target: { name, value, dataset: { sizing: suffix = '' } } }) => {
+        document.documentElement.style.setProperty(`--${name}`, value + suffix)
+      }
+
+      // Helper function to add/remove event listeners because the standard syntax is long and ugly
+      const listen = (event, element, handler, cb = false, add = true) => (
+        add ?
+          cb ?
+            () => element.addEventListener(event, handler) :
+            element.addEventListener(event, handler) :
+          cb ?
+            () => element.removeEventListener(event, handler) :
+            element.removeEventListener(event, handler)
+      );
+
+      // Attach event listeners to each input
+      inputs.forEach(inp => {
+        // When input value is changed, call handleUpdate function
+        listen('change', inp, handleUpdate)
+        // When a mousedown event occurs on the input, attach *another* event listener to the input.
+        // This new event listener will listen for 'mousemove' event, and call on the
+        // handleUpdate function.
+        listen('mousedown', inp, listen('mousemove', inp, handleUpdate, true))
+        // When a mouseup event occurs on the input, remove the event listener for the 'mousemove'
+        // event (if one exists) that uses the `handleUpdate` function for the event handler.
+        listen('mouseup', inp, listen('mousemove', inp, handleUpdate, true, false))
+      });
+    })();
   </script>
-
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/04 - Array Cardio Day 1/index.html b/exercises/04 - Array Cardio Day 1/index.html
index 82b4c22..b7bcaf7 100644
--- a/exercises/04 - Array Cardio Day 1/index.html	
+++ b/exercises/04 - Array Cardio Day 1/index.html	
@@ -8,6 +8,7 @@
 
 <body>
   <script>
+  'use strict';
     // Get your shorts on - this is an array workout!
     // ## Array Cardio Day 1
 
@@ -29,65 +30,74 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
-    const inventors_from_1500s = inventors.filter(
-      (inventor) => inventor.year >= 1500 && inventor.year < 1600
-    )
+    const inventors_from_1500s = inventors.filter(({year}) => year >= 1500 && year < 1600);
 
-    console.table(inventors_from_1500s)
+    console.table(inventors_from_1500s);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors first and last names
-    const inventors_full_name = inventors.map((inventor) => `${inventor.first} ${inventor.last}`)
-    console.table(inventors_full_name)
+    const inventors_full_name = inventors.map(({first, last}) => first + ' ' + last);
+    console.log(inventors_full_name);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
-    const inventors_by_date = inventors.sort((a, b) => a.year - b.year)
-    console.table(inventors_by_date)
+    const inventors_by_date = inventors.sort(({year: a}, {year: b}) => a - b);
+    console.table(inventors_by_date);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
     const total_years_lived = inventors.reduce(
-      (currValue, inventor) => currValue += (inventor.passed - inventor.year), 0
-    )
+      (currValue, {passed, year}) => currValue += (passed - year), 0
+    );
     console.log(total_years_lived);
 
     // 5. Sort the inventors by years lived
     const inventors_by_lifespan = inventors.sort(
-      (a, b) => (a.passed - a.year) - (b.passed - b.year)
+      ({passed: aP, year: aY}, {passed: bP, year: bY}) => (aP - aY) - (bP - bY)
     );
     console.table(inventors_by_lifespan);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
     /*
-    This code will be run directly from the browser console
-    after navigating to the Wikipedia link above.
-    
+    // This code will be run directly from the browser console
+    // after navigating to the Wikipedia link above.
+
     const blvd_with_de = Array.from(document.querySelectorAll('.mw-category a'))
-      .map(link => link.textContent)
+      .map(({textContent}) => textContent)
       .filter((blvd) => blvd.includes('de'))
-    */
 
+    */
     // 7. sort Exercise
     // Sort the people alphabetically by last name
-
     const people_by_last_name = people.sort((a, b) => a.split(', ')[0] < b.split(', ')[0] ? -1 : 1);
-
     console.log(people_by_last_name);
+
     // 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'];
 
     const data_instance_count = data.reduce((tallyObject, item) => {
-      if (!tallyObject[item]) {
-        tallyObject[item] = 0;
-      }
-      tallyObject[item]++;
-      return tallyObject;
+        tallyObject[item] ? tallyObject[item]++ : tallyObject[item] = 1;
+
+        return tallyObject;
     }, {});
+    console.dir(data_instance_count);
 
-    console.log(data_instance_count);
   </script>
 </body>
 
diff --git a/exercises/05 - Flex Panel Gallery/index.html b/exercises/05 - Flex Panel Gallery/index.html
index 7aa0b83..80e4ac1 100644
--- a/exercises/05 - Flex Panel Gallery/index.html	
+++ b/exercises/05 - Flex Panel Gallery/index.html	
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <meta charset="UTF-8">
   <title>Flex Panels 💪</title>
@@ -27,29 +26,26 @@
     .panel1 {
       background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
     }
-    
+
     .panel2 {
       background-image: url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500);
     }
-    
+
     .panel3 {
       background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
     }
-    
+
     .panel4 {
       background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
     }
-    
+
     .panel5 {
       background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
     }
   </style>
-
 </head>
-
 <body>
 
-
   <div class="panels">
     <div class="panel panel1">
       <p>Hey</p>
@@ -81,20 +77,18 @@
   <script>
     const panels = document.querySelectorAll('.panel')
 
-    function togglePanel() {
-      this.classList.toggle('open');
+    const togglePanel = (p, e) => {
+      p.classList.toggle('open');
     }
 
-    function toggleText(e) {
-      if (e.propertyName.includes('flex')) this.classList.toggle('open-active');
+    const toggleText = (p, e) => {
+      if (e.propertyName.includes('flex')) p.classList.toggle('open-active');
     }
 
-    panels.forEach(panel => panel.addEventListener('click', togglePanel));
-    panels.forEach(panel => panel.addEventListener('transitionend', toggleText));
+    panels.forEach(panel => {
+      panel.addEventListener('click', togglePanel.bind(null, panel))
+      panel.addEventListener('transitionend', toggleText.bind(null, panel))
+    })
   </script>
-
-
-
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/06 - Type Ahead/index.html b/exercises/06 - Type Ahead/index.html
index a9847cc..5753c51 100644
--- a/exercises/06 - Type Ahead/index.html	
+++ b/exercises/06 - Type Ahead/index.html	
@@ -31,10 +31,9 @@
         .then(data => cities.push(...data))
 
       // Step 4
-      const matchInput = (inputString, cities) => cities.filter((location) => {
-        const regex = new RegExp(inputString, 'gi');
-        return location.city.match(regex) || location.state.match(regex)
-      });
+      const matchInput = (inputString, cities) => cities.filter(({city, state}) => (
+          city.match(new RegExp(inputString, 'gi')) || state.match(new RegExp(inputString, 'gi'))
+      ));
 
       // Step 6
       const numberWithCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
diff --git a/exercises/07 - Array Cardio Day 2/index.html b/exercises/07 - Array Cardio Day 2/index.html
index a8ee84c..50e4385 100644
--- a/exercises/07 - Array Cardio Day 2/index.html	
+++ b/exercises/07 - Array Cardio Day 2/index.html	
@@ -25,32 +25,33 @@
       { text: 'Nice Nice Nice!', id: 542328 }
     ];
 
+    const yr = new Date().getFullYear();
     // Some and Every Checks
-    // Array.prototype.some() 
+    // Array.prototype.some()
     // is at least one person 19?
-    const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19);
+    const isAdult = people.some(({year}) => yr - year >= 19);
     console.log({ isAdult });
 
     // Array.prototype.every() // is everyone 19?
-    const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19);
+    const allAdults = people.every(({year}) => yr - year >= 19);
     console.log({ allAdults });
 
     // Array.prototype.find()
     // Find is like filter, but instead returns just the one you are looking for
     // find the comment with the ID of 823423
-    const comment = comments.find(comment => comment.id === 823423);
+    const comment = comments.find(({id}) => id === 823423);
     console.log(comment);
 
     // Array.prototype.findIndex()
     // Find the comment with this ID 823423 and delete it
-    const index = comments.findIndex(comment => comment.id === 823423);
+    const index = comments.findIndex(({id}) => id === 823423);
     const newComments = [
       ...comments.slice(0, index),
       ...comments.slice(index + 1)
     ];
-    console.log(newComments)
+    console.table(newComments)
 
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/08 - Fun with HTML5 Canvas/index.html b/exercises/08 - Fun with HTML5 Canvas/index.html
index d54107b..354589f 100644
--- a/exercises/08 - Fun with HTML5 Canvas/index.html	
+++ b/exercises/08 - Fun with HTML5 Canvas/index.html	
@@ -15,6 +15,7 @@
   <canvas id="draw" width="800" height="800"></canvas>
 
   <script>
+    'use strict';
     // Store logic inside an anonymous function to avoid polluting global namespace
     (() => {
       // Declare & define variable reference to canvas HTMLElement
@@ -29,11 +30,11 @@
 
       // Declare & define variable reference for current & last mouse location
       const mouse = { x: 0, y: 0 },
-        last_mouse = { x: 0, y: 0 };
+            last_mouse = { ...mouse};
 
       // Declare & define variables to change line hue & line width
       let hue = 0,
-        increaseLineWidth = true;
+          increaseLineWidth = true;
 
       // mousedown event handler function
       const quickDraw = () => {
@@ -42,11 +43,13 @@
         ctx.moveTo(last_mouse.x, last_mouse.y);     // Starting point of path
         ctx.lineTo(mouse.x, mouse.y);               // Ending point of path
         ctx.closePath();              // Create path starting from moveTo and ending at lineTo
-        ctx.stroke();                 // Draw the defined path on the canvas                   
+        ctx.stroke();                 // Draw the defined path on the canvas
 
-        hue >= 360 ? hue = 0 : hue++; // Ternary operator to reset/increase hue value
+        // Ternary operator to reset/increase hue value
+        hue >= 360 ? 0 : hue++;
 
-        increaseLineWidth ? ctx.lineWidth++ : ctx.lineWidth--; // Ternary operator to increase/decrease line width
+        // Ternary operator to increase/decrease line width
+        increaseLineWidth ? ctx.lineWidth++ : ctx.lineWidth--;
 
         // Width of line increases or decreases, staying within a value of 1-100.
         if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) increaseLineWidth = !increaseLineWidth;
@@ -55,19 +58,31 @@
       // mousemove Event Handler function
       const setMouseLocation = (e) => {
         // Update values based on previous & current mouse locations using array destructuring
-        [last_mouse.x, last_mouse.y] = [mouse.x, mouse.y];
-        [mouse.x, mouse.y] = [e.offsetX, e.offsetY];
+        [last_mouse.x, last_mouse.y, mouse.x, mouse.y] = [mouse.x, mouse.y, e.offsetX, e.offsetY];
       }
 
+      // An object with key/value pairs corresponding with the name of the action
+      // and the function we want to for that action
+      const quick = {
+        add: () => myCanvas.addEventListener('mousemove', quickDraw),
+        rem: () => myCanvas.removeEventListener('mousemove', quickDraw)
+      }
+
+      // Array of event + eventHandler objects to iterate over and use
+      // as arguments for adding event listeners to myCanvas
+      const evs = [
+        {e: 'mousemove', h: setMouseLocation},
+        {e: 'mousedown', h: quick.add},
+        {e: 'mouseup', h: quick.rem},
+        {e: 'mouseout', h: quick.rem}
+      ];
+
       // Attach event listeners
-      myCanvas.addEventListener('mousemove', setMouseLocation);
-      myCanvas.addEventListener('mousedown', () => myCanvas.addEventListener('mousemove', quickDraw));
-      myCanvas.addEventListener('mouseup', () => myCanvas.removeEventListener('mousemove', quickDraw));
-      myCanvas.addEventListener('mouseout', () => myCanvas.removeEventListener('mousemove', quickDraw));
-    })(); // Immediately invoke anonymous function 
+      evs.forEach(({e, h}) => { myCanvas.addEventListener(e, h); });
+    })(); // Immediately invoke anonymous function
 
   </script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/10 - Hold Shift and Check Checkboxes/index.html b/exercises/10 - Hold Shift and Check Checkboxes/index.html
index 9b2a3ff..27975cb 100644
--- a/exercises/10 - Hold Shift and Check Checkboxes/index.html	
+++ b/exercises/10 - Hold Shift and Check Checkboxes/index.html	
@@ -60,7 +60,7 @@
   <!--
    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 
+   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.
   -->
   <div class="inbox">
@@ -105,43 +105,52 @@
   <script>
     // Wrap JS code in an IIFE, creating a closure so as to not pollute the global namespace
     (() => {
+
+      // Declare variable that will be defined later as the input that the user
+      // most recently selected
+      let lastSelected;
+
       // Declare & define constant as a reference to all inputs of type checkbox
       // that are children of the 'inbox' class
       const checkBoxes = document.querySelectorAll('.inbox input[type="checkbox"]');
-      // Declare variable that will be defined later
-      let lastSelected;
 
       // Event Handler function
-      function multiCheck(e) {
+      const multiCheck = (el, e) => {
 
         // If the lastSelected variable is defined and the shift key was pressed
         // when this event triggered...
         if (lastSelected && e.shiftKey) {
-          // Set checked property of function context to be the same as the
+
+          // Set checked property of checkbox to be the same as the
           // checked property of the last selected input
-          this.checked = lastSelected.checked;
-          // Declare two variables 
-          let startIdx, endIdx;
-          // If the ID of the function context is greater than the ID of the last selected input...
-          this.id > lastSelected.id ?
-            // ...define variable startIdx as last selected input ID and endIdx as function context ID
-            [startIdx, endIdx] = [lastSelected.id, this.id] :
+          el.checked = lastSelected.checked;
+
+          // If the ID of the checkbox is greater than the ID of the last selected input...
+          const [startIdx, endIdx] = el.id > lastSelected.id ?
+            // ...define variable startIdx as last selected input ID and endIdx as checkbox ID
+            [lastSelected.id, el.id] :
             // ...if not, switch variable definitions
-            [startIdx, endIdx] = [this.id, lastSelected.id];
+            [el.id, lastSelected.id];
 
           // Declare & define constant as an array of inputs between the last selected input
-          // and the function context input
-          const middleInputs = Array.from(checkBoxes).slice(parseInt(startIdx) + 1, endIdx);
-          // Set checked property of each input to match checked property of function context input
-          middleInputs.forEach(checkbox => checkbox.checked = this.checked);
-        } // If no lastSelected or shiftKey was not pressed, entire if statement is skipped
+          // and the checkbox input
+          const middleInputs = [...checkBoxes].slice(parseInt(startIdx) + 1, endIdx);
+
+          // Set checked property of each input to match checked property of checkbox input
+          middleInputs.forEach(checkbox => checkbox.checked = el.checked);
+        }
+
+        // If no lastSelected or shiftKey was not pressed, entire if statement is skipped
         // Define lastSelected as the input that was the checked which triggered the event handler
-        lastSelected = this;
+        lastSelected = el;
       }
+
       // Add event listener to each input that will call multiCheck function on the 'click' event
-      checkBoxes.forEach(checkBox => checkBox.addEventListener('click', multiCheck));
+      checkBoxes.forEach(checkBox => {
+        checkBox.addEventListener('click', multiCheck.bind(null, checkBox));
+      });
     })();
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/11 - Custom Video Player/scripts.js b/exercises/11 - Custom Video Player/scripts.js
index 5f66391..8ff9f58 100644
--- a/exercises/11 - Custom Video Player/scripts.js	
+++ b/exercises/11 - Custom Video Player/scripts.js	
@@ -1,36 +1,50 @@
+"use strict";
 (() => {
-  const player = document.querySelector('.player'),
-    video = player.querySelector('.viewer'),
-    progress = player.querySelector('.progress'),
-    progressBar = player.querySelector('.progress__filled'),
-    toggle = player.querySelector('.toggle'),
-    skipButtons = player.querySelectorAll('[data-skip]'),
-    ranges = player.querySelectorAll('.player__slider')
+  const player = document.querySelector(".player"),
+    video = player.querySelector(".viewer"),
+    progress = player.querySelector(".progress"),
+    progressBar = player.querySelector(".progress__filled"),
+    toggle = player.querySelector(".toggle"),
+    skipButtons = player.querySelectorAll("[data-skip]"),
+    ranges = player.querySelectorAll(".player__slider");
 
-  let togglePlay = () => video[video.paused ? 'play' : 'pause'](),
-    updateButton = () => toggle.textContent = video.paused ? '►' : '❚ ❚',
-    handleProgress = () => progressBar.style.flexBasis = `${(video.currentTime / video.duration) * 100}%`,
-    scrub = (e) => video.currentTime = ((e.offsetX / progress.offsetWidth) * video.duration)
+  const togglePlay = () => video[video.paused ? "play" : "pause"](),
+    updateButton = () => toggle.textContent = video.paused ? "►" : "❚ ❚",
+    handleProgress = () =>
+      progressBar.style.flexBasis = `${video.currentTime / video.duration * 100}%`,
+    scrub = e =>
+      video.currentTime = e.offsetX / progress.offsetWidth * video.duration,
+    progressMoved = e => mousedown && scrub(e),
+    progressUp = e => mousedown = false,
+    progressDown = e => mousedown = true,
+    bClick = b => video.currentTime += parseFloat(b.dataset.skip),
+    updateRange = (range, e) => video[range.name] = range.value;
 
-  video.addEventListener('click', togglePlay)
-  video.addEventListener('play', updateButton)
-  video.addEventListener('pause', updateButton)
-  video.addEventListener('timeupdate', handleProgress)
+  let mousedown = false;
 
-  toggle.addEventListener('click', togglePlay)
+  const events = [
+    { event: "click", handler: togglePlay, target: video },
+    { event: "play", handler: updateButton, target: video },
+    { event: "pause", handler: updateButton, target: video },
+    { event: "timeupdate", handler: handleProgress, target: video },
+    { event: "click", handler: togglePlay, target: toggle },
+    { event: "click", handler: scrub, target: progress },
+    { event: "mousedown", handler: progressDown, target: progress },
+    { event: "mousemove", handler: progressMoved, target: progress },
+    { event: "mouseup", handler: progressUp, target: progress },
+    { event: "click", handler: bClick, target: skipButtons },
+    { event: ["change", "mousemove"], handler: updateRange, target: ranges }
+  ];
 
-  let mousedown = false
-  progress.addEventListener('click', scrub)
-  progress.addEventListener('mousemove', (e) => mousedown && scrub(e))
-  progress.addEventListener('mousedown', () => mousedown = true)
-  progress.addEventListener('mouseup', () => mousedown = false)
-
-  skipButtons.forEach(button => {
-    button.addEventListener('click', () => video.currentTime += parseFloat(button.dataset.skip))
-  })
-
-  ranges.forEach(range => {
-    range.addEventListener('change', () => video[range.name] = range.value)
-    range.addEventListener('mousemove', () => video[range.name] = range.value)
-  })
+  events.forEach(
+    ({ event: e, handler: h, target: t }) =>
+      (t instanceof NodeList
+        ? t.forEach((el, i) => {
+            el.addEventListener(
+              typeof e === "string" ? e : e[i],
+              typeof h === "function" ? h.bind(null, el) : h[i].bind(null, el)
+            );
+          })
+        : t.addEventListener(e, h))
+  );
 })();
diff --git a/exercises/12 - Key Sequence Detection/index.html b/exercises/12 - Key Sequence Detection/index.html
index e9d7a0b..1165a62 100644
--- a/exercises/12 - Key Sequence Detection/index.html	
+++ b/exercises/12 - Key Sequence Detection/index.html	
@@ -11,7 +11,8 @@
   <script>
     (() => {
       // Declare constants for secret code & array to hold keys pressed
-      const pressedKeys = [], secretCode = 'helloworld'
+      let pressedKeys = []
+      const secretCode = 'helloworld'
 
       // Attach event listener to window object
       window.addEventListener('keyup', (e) => {
@@ -27,16 +28,15 @@
           call the 'cornify_add()' function,
           & reset the array.
         */
-        if (pressedKeys.join('') === secretCode) {
+        pressedKeys.join('') === secretCode && (()=>{
           console.info('Hello you handsome devil!')
           cornify_add()
-          pressedKeys.length = 0
-        }
-
+          pressedKeys = []
+        })()
       })
     })(); // Wrap code in IIFE to avoid polluting the global namespace
 
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/13 - Slide in on Scroll/index.html b/exercises/13 - Slide in on Scroll/index.html
index c872b99..61daf57 100644
--- a/exercises/13 - Slide in on Scroll/index.html	
+++ b/exercises/13 - Slide in on Scroll/index.html	
@@ -139,18 +139,20 @@ <h1>Slide in on Scroll</h1>
     (() => {
       const sliderImages = document.querySelectorAll('.slide-in');
 
-      function debounce(func, wait = 20, immediate = true) {
+      const debounce = (func, wait = 20, immediate = true) => {
         let timeout;
-        return function () {
-          const context = this, args = arguments;
-          const later = function () {
+
+        return (...args)=> {
+          const later = () => {
             timeout = null;
-            if (!immediate) func.apply(context, args);
+            if (!immediate) func.apply(this, args);
           };
+
           const callNow = immediate && !timeout;
           clearTimeout(timeout);
           timeout = setTimeout(later, wait);
-          if (callNow) func.apply(context, args);
+
+          if (callNow) func.apply(this, args);
         };
       };
 
@@ -229,4 +231,4 @@ <h1>Slide in on Scroll</h1>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/17 - Sort Without Articles/index.html b/exercises/17 - Sort Without Articles/index.html
index 7274fce..dc54ee2 100644
--- a/exercises/17 - Sort Without Articles/index.html	
+++ b/exercises/17 - Sort Without Articles/index.html	
@@ -77,4 +77,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/18 - Adding Up Times with Reduce/index.html b/exercises/18 - Adding Up Times with Reduce/index.html
index 6af08d8..673e96c 100644
--- a/exercises/18 - Adding Up Times with Reduce/index.html	
+++ b/exercises/18 - Adding Up Times with Reduce/index.html	
@@ -186,7 +186,7 @@
     <script>
       (() => {
         // Hide all the list items because I don't want to see all that nonsense
-        document.querySelectorAll('[data-time]').forEach(listItem => listItem.hidden = true)
+        // document.querySelectorAll('[data-time]').forEach(listItem => listItem.hidden = true)
 
         // Declare a constant and define as an ARRAY of all items with a 'data-key'
         // property (used spread operator to create array)
@@ -197,7 +197,7 @@
           * value.
           */
         const seconds = allTimes
-          .map(listItem => listItem.dataset.time) // Get the 'data-time' property
+          .map(({dataset: { time }}) => time) // Get the 'data-time' property
           .map(timeValue => {
             /** Declare constants minutes & seconds using array destructuring
               * and define as the result of splitting the 'data-time' property
@@ -208,7 +208,7 @@
             return minutes * 60 + seconds // Return the total seconds
           })
           // Add up all the seconds
-          .reduce((runningTotal, seconds) => runningTotal + seconds)
+          .reduce((runningTotal, seconds) => runningTotal + seconds, 0)
 
         /** Calculate hours by dividing total seconds by 3600 (seconds in a minute (60)
           * multiplied by minutes in an hour (60)) and round the value DOWN before
@@ -227,4 +227,4 @@
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/19 - Webcam Fun/scripts.js b/exercises/19 - Webcam Fun/scripts.js
index 9fb2230..2ceeed6 100644
--- a/exercises/19 - Webcam Fun/scripts.js	
+++ b/exercises/19 - Webcam Fun/scripts.js	
@@ -18,7 +18,7 @@
   };
 
   const paintToCanavas = () => {
-    const width = video.videoWidth, height = video.videoHeight;
+    const { videoWidth: width, videoHeight: height } = video;
 
     canvas.width = width;
     canvas.height = height;
diff --git a/exercises/20 - Speech Detection/index.html b/exercises/20 - Speech Detection/index.html
index 86b329b..457ab15 100644
--- a/exercises/20 - Speech Detection/index.html	
+++ b/exercises/20 - Speech Detection/index.html	
@@ -23,7 +23,7 @@
     recognition.addEventListener('result', e => {
       const transcript = Array.from(e.results)
         .map(results => results[0])
-        .map(result => result.transcript)
+        .map(({trascript}) => transcript)
         .join('')
 
       newParagraphElement.textContent = transcript
@@ -31,7 +31,7 @@
         newParagraphElement = document.createElement('p')
         words.appendChild(newParagraphElement)
       }
-      
+
     })
 
     recognition.addEventListener('end', recognition.start)
diff --git a/exercises/21 - Geolocation/index-START.html b/exercises/21 - Geolocation/index-START.html
index e3c4677..f51d895 100644
--- a/exercises/21 - Geolocation/index-START.html	
+++ b/exercises/21 - Geolocation/index-START.html	
@@ -61,8 +61,10 @@ <h1 class="speed">
     const speed = document.querySelector('.speed-value');
 
     navigator.geolocation.watchPosition((data) => {
-      console.info(data);
-      speed.textContent = data.coords.speed;
+      console.log(data);
+
+      const { speed: dSpeed, heading } = data.coords;
+      speed.textContent = dSpeed;
       arrow.style.transform = `rotate(${data.coords.heading}deg)`;
     }, (err) => {
       console.err(err);
diff --git a/readme.md b/readme.md
index 78bede1..ff699a0 100644
--- a/readme.md
+++ b/readme.md
@@ -3,7 +3,7 @@
 Nitish Dayal, Software & Applications Developer  
 Last Commit Date: May 12, 2017
 
-> Course created by [Wes Bos](https://github.com/wesbos)  
+> Course created by [Wes Bos](https://github.com/wesbos)
 > Join the challenge (for free!) here - [JavaScript30](https://javascript30.com/account)
 
 This repository contains my written guides for the JavaScript30 course by
@@ -22,7 +22,7 @@ This repository contains my written guides for the JavaScript30 course by
 
 ## About
 
-Build 30 things in 30 days with vanilla JavaScript; no frameworks, libraries, etc. 
+Build 30 things in 30 days with vanilla JavaScript; no frameworks, libraries, etc.
   Pacing is totally up to the individual; if you feel like knocking out 30 challenges
   in 30 minutes, hey, more power to you, but that would miss the point of this course (IMO).
   The idea behind these exercises is to utilize small amounts of what would regularly be
@@ -36,41 +36,41 @@ I think it's fair to say that, coming into this course, you should have a decent
   a challenge, but given that these exercises require you to work with those very topics
   time and time again, JavaScript30 is still an excellent learning resource.
 
-The starter files (available [here](https://github.com/wesbos/JavaScript30)) include solutions to 
-  most challenges, so this isn't really meant to be taken as some kind of competition. 
-  JavaScript30 is focused more on helping developers enhance their current skillset and 
-  reducing developer reliance on external JS libraries; **if it can be done with a JS library, 
+The starter files (available [here](https://github.com/wesbos/JavaScript30)) include solutions to
+  most challenges, so this isn't really meant to be taken as some kind of competition.
+  JavaScript30 is focused more on helping developers enhance their current skillset and
+  reducing developer reliance on external JS libraries; **if it can be done with a JS library,
   it can (probably) be done with vanilla JS.**
 
 ## Table Of Contents
 
-1.  [JavaScript Drum Kit](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/01%20-%20JavaScript%20Drum%20Kit)
-2.  [JS + CSS Clock](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/02%20-%20JS%20%2B%20CSS%20Clock)
-3.  [CSS Variables](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/03%20-%20CSS%20Variables)
-4.  [Array Cardio, Day 1](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/04%20-%20Array%20Cardio%20Day%201/)
-5.  [Flex Panel Gallery](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/05%20-%20Flex%20Panel%20Gallery/)
-6.  [Type Ahead](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/06%20-%20Type%20Ahead/)
-7.  [Array Cardio, Day 2](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/07%20-%20Array%20Cardio%20Day%202/)
-8.  [Fun with HTML5 Canvas](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/08%20-%20Fun%20with%20HTML5%20Canvas/)
-9.  [Dev Tools Domination](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/09%20-%20DevTools%20Domination/)
-10. [Hold Shift and Check Checkboxes](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/)
-11. [Custom Video Player](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/11%20-%20Custom%20Video%20Player/)
-12. [Key Sequence Detection](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/12%20-%20Key%20Sequence%20Detection/)
-13. [Slide in on Scroll](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/13%20-%20Slide%20in%20on%20Scroll/)
-14. [JavaScript References vs. Copying](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/14%20-%20JavaScript%20References%20VS%20Copying)
-15. [LocalStorage](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/15%20-%20LocalStorage/)
-16. [Mouse Move Shadow](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/16%20-%20Mouse%20Move%20Shadow/)
-17. [Sort Without Articles](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/17%20-%20Sort%20Without%20Articles/)
-18. [Adding Up Times with Reduce](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/18%20-%20Adding%20Up%20Times%20with%20Reduce/)
-19. [Webcam Fun](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/19%20-%20Webcam%20Fun/)
-20. [Speech Detection](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/20%20-%20Speech%20Detection/)
-21. [Geolocation](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/21%20-%20Geolocation/)
-22. [Follow Along Link Highlighter](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/22%20-%20Follow%20Along%20Link%20Highlighter/)
-23. [Speech Synthesis](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/23%20-%20Speech%20Synthesis/)
-24. [Sticky Nav](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/24%20-%20Sticky%20Nav/)
-25. [Event Capture, Propagation, Bubbling, and Once](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/25%20-%20Event%20Capture,%20Propagation,%20Bubbling%20and%20Once/)
-26. [Stripe Follow Along Nav](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/26%20-%20Stripe%20Follow%20Along%20Nav/)
-27. [Click and Drag](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/27%20-%20Click%20and%20Drag/)
-28. [Video Speed Controller](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/28%20-%20Video%20Speed%20Controller/)
-29. [Countdown Timer](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/29%20-%20Countdown%20Timer/)
-30. [Whack A Mole](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/30%20-%20Whack%20A%20Mole/)
+1.  [JavaScript Drum Kit](/exercises/01%20-%20JavaScript%20Drum%20Kit)
+2.  [JS + CSS Clock](/exercises/02%20-%20JS%20%2B%20CSS%20Clock)
+3.  [CSS Variables](/exercises/03%20-%20CSS%20Variables)
+4.  [Array Cardio, Day 1](/exercises/04%20-%20Array%20Cardio%20Day%201/)
+5.  [Flex Panel Gallery](/exercises/05%20-%20Flex%20Panel%20Gallery/)
+6.  [Type Ahead](/exercises/06%20-%20Type%20Ahead/)
+7.  [Array Cardio, Day 2](/exercises/07%20-%20Array%20Cardio%20Day%202/)
+8.  [Fun with HTML5 Canvas](/exercises/08%20-%20Fun%20with%20HTML5%20Canvas/)
+9.  [Dev Tools Domination](/exercises/09%20-%20DevTools%20Domination/)
+10. [Hold Shift and Check Checkboxes](/exercises/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/)
+11. [Custom Video Player](/exercises/11%20-%20Custom%20Video%20Player/)
+12. [Key Sequence Detection](/exercises/12%20-%20Key%20Sequence%20Detection/)
+13. [Slide in on Scroll](/exercises/13%20-%20Slide%20in%20on%20Scroll/)
+14. [JavaScript References vs. Copying](/exercises/14%20-%20JavaScript%20References%20VS%20Copying)
+15. [LocalStorage](/exercises/15%20-%20LocalStorage/)
+16. [Mouse Move Shadow](/exercises/16%20-%20Mouse%20Move%20Shadow/)
+17. [Sort Without Articles](/exercises/17%20-%20Sort%20Without%20Articles/)
+18. [Adding Up Times with Reduce](/exercises/18%20-%20Adding%20Up%20Times%20with%20Reduce/)
+19. [Webcam Fun](/exercises/19%20-%20Webcam%20Fun/)
+20. [Speech Detection](/exercises/20%20-%20Speech%20Detection/)
+21. [Geolocation](/exercises/21%20-%20Geolocation/)
+22. [Follow Along Link Highlighter](/exercises/22%20-%20Follow%20Along%20Link%20Highlighter/)
+23. [Speech Synthesis](/exercises/23%20-%20Speech%20Synthesis/)
+24. [Sticky Nav](/exercises/24%20-%20Sticky%20Nav/)
+25. [Event Capture, Propagation, Bubbling, and Once](/exercises/25%20-%20Event%20Capture,%20Propagation,%20Bubbling%20and%20Once/)
+26. [Stripe Follow Along Nav](/exercises/26%20-%20Stripe%20Follow%20Along%20Nav/)
+27. [Click and Drag](/exercises/27%20-%20Click%20and%20Drag/)
+28. [Video Speed Controller](/exercises/28%20-%20Video%20Speed%20Controller/)
+29. [Countdown Timer](/exercises/29%20-%20Countdown%20Timer/)
+30. [Whack A Mole](/exercises/30%20-%20Whack%20A%20Mole/)