diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..4da0316
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+end_of_line = lf
+insert_final_newline = true
+
+[*.md]
+indent_size = 4
+trim_trailing_whitespace = false
+
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/01 - JavaScript Drum Kit/README.md b/exercises/01 - JavaScript Drum Kit/README.md
index abe966a..5e39133 100644
--- a/exercises/01 - JavaScript Drum Kit/README.md	
+++ b/exercises/01 - JavaScript Drum Kit/README.md	
@@ -1,13 +1,13 @@
 # Exercise 1: JavaScript Drum Kit
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 9, 2016
+Last Commit Date: May 12, 2017
 
 An HTML page displays a collection of `div` elements, each containing a letter
   that corresponds with a key on the keyboard, and the name of the soundclip to be
   played when that button is clicked. When a user presses a key that matches
-  one of the `div` elements, the page should play the corresponding soundclip
-  and place a temporary 'highlight' (or border) around the `div`. Write the
-  JavaScript code necessary to add this functionality.
+  one of the letters displayed in the `div` elements, the page should play 
+  the corresponding soundclip and place a temporary 'highlight' (or border) 
+  around the `div`. Write the JavaScript code necessary to add this functionality.
 
 ## Guide
 
@@ -17,11 +17,11 @@ We are provided with the HTML, CSS, and sound clips necessary to create this
 
 - HTML `data-*` attributes: Introduced in HTML5, `data-*` attributes (where * can
     be anything you want) allow us to store _custom data_ on any HTML element. Each
-    `div.key` and `audio` element in the provided HTML file has a `data-key` attribute
-    which corresponds with a keyboard button.
+    `div.key` (`<div class="key" data-key="...">`) and `audio` element in the 
+    provided HTML file has a `data-key` attribute which corresponds with a keyboard button.
 
-- CSS `playing` class & pre-defined style: The provided CSS file already has an `playing`
-    class defined with some styling in it. We will apply this class to the correct
+- CSS `playing` class & pre-defined style: The provided CSS file already has a `playing`
+    class defined with some rules in it. We will apply this class to the correct
     element, depending on the key pressed by the user, and remove it once animation
     is finished.
 
diff --git a/exercises/01 - JavaScript Drum Kit/index.html b/exercises/01 - JavaScript Drum Kit/index.html
index 38a4ee2..cc3c007 100644
--- a/exercises/01 - JavaScript Drum Kit/index.html	
+++ b/exercises/01 - JavaScript Drum Kit/index.html	
@@ -65,29 +65,46 @@
       * the keypress, add a class to the specific element that matches with the keypress,
       * and then remove that class in order to reset the element to it's original state.
       */
-    function playSound(e) {
-      const soundclip = document.querySelector(`audio[data-key="${e.keyCode}"]`);
-      const keyelement = document.querySelector(`.key[data-key="${e.keyCode}"]`);
 
-      if (!soundclip) return; // Stop function from running if key pressed doesn't match up with our elements
+    (()=> {
+      const playSound = (e) => {
+        const soundclip = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+        const keyelement = document.querySelector(`.key[data-key="${e.keyCode}"]`);
 
-      keyelement.classList.add('playing');
+        if (!soundclip) return undefined; // Stop function from running if key pressed doesn't match up with our elements
 
-      soundclip.currentTime = 0; // Play sound clip from start every time a corresponding key is pressed
-      soundclip.play();
-    }
+        keyelement.classList.add('playing');
 
-    function removeTransition(e) {
-      if (e.propertyName !== 'transform') return; // skip if it's not a transform event
-      this.classList.remove('playing');
-    }
+        // Ensures that the sound clip always plays from the beginning. Otherwise,
+        // if the 'a' key is pressed twice rapidly, the soundclip will only play through
+        // once.
+        soundclip.currentTime = 0;
 
-    const keys = document.querySelectorAll('.key'); // Find all elements in the document with a class 'key'
-    keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+        soundclip.play(); // Play sound
+      }
 
-    window.addEventListener('keydown', playSound);
+      const removeTransition = (e) => {
+        // skip if it's not a transform event
+        if (e.propertyName !== 'transform') return undefined;
+        e.target.classList.remove('playing');
+      }
+
+      // Find all elements in the document with a class 'key'
+      const keys = document.querySelectorAll('.key');
+
+      // Listen for any `keydown` events that occur on this browser window instance (this page)
+      // When a `keydown` event is observered, trigger the `playSound` function, passing in the
+      // `keydown` event as the argument (e)
+      window.addEventListener('keydown', playSound);
+
+      keys.forEach(key =>
+        key.addEventListener(
+          'transitionend',
+          (e) => removeTransition.call(key, e)
+        ));
+    })();
   </script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/02 - JS + CSS Clock/README.md b/exercises/02 - JS + CSS Clock/README.md
index 9df65f1..a0c442c 100644
--- a/exercises/02 - JS + CSS Clock/README.md	
+++ b/exercises/02 - JS + CSS Clock/README.md	
@@ -1,44 +1,101 @@
 # Exercise 2: JS + CSS Clock
-Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 9, 2016
 
-Given an web page with an analog clock created out of CSS, update the CSS
-  and write the JavaScript necessary to make the clock functional.
+> Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
+> Last Commit Date: May 12, 2017
+
+Given a web page with an analog clock created with CSS, write the
+  JavaScript necessary to make the clock functional. Make alterations to the CSS
+  as necessary.
 
 ## Guide
 
 The HTML file has 3 `div` elements which correspond with the second, minute, and
-  hour hand on a clock. We'll create references to these elements and dynamically
-  update certain CSS properties to change their positions so they reflect the
-  current time. Easy peasy.
+    hour hand on a clock
+
+```html
+<!-- ...previous elements -->
+    <div class="hand hour-hand"></div>
+    <div class="hand min-hand"></div>
+    <div class="hand second-hand"></div>
+<!-- next elements... -->
+```
+
+The necessary JavaScript code shouldn't be too crazy;
+    we'll create references to these elements and dynamically
+    update certain CSS properties to change their positions so they reflect the
+    current time. Easy peasy.
 
 **Steps:**
 
-- CSS:
-
-  1. Set the `transform-origin` CSS property of the `.hand` class at 100%; the default
-    value is 50% (or the midway point of the HTML element), but if we leave it there
-    the clock hands will tranform from their individal centers as opposed to the
-    center of the clock. Changing the value to 100% shifts the _origin point of the
-    transformations_ to the furthest x-axis point of the HTML element.
-  2. The hands are all laying flat; we need them to be vertical. Rotate all of the
-    hands by 90 degrees so that they are upright.
-  3. Set the `transition` CSS property of `.hand` to `all 0.05s`; this tells the browser
-    to gradually apply any changes to the element's styling over a 0.05 second period.
-  4. Set the `transition-timing-function` CSS property of `.hand` to whatever function
-    you prefer, or define your own using the `cubic-bezier()` property value.
-  
-- JavaScript
-
-  1. Declare & define variables for each clock hand and reference the corresponding _HTML
-    element_.
-  2. Create a function which will be responsible for updating the position of all the
-    clock hands.
-    - Calculate the necessary rotation using the _current numerical time value_ for each hand 
-      and dividing it by the max value possible to get the percentage, multiplying the result
-      of that by 360 (each hand can rotate 360 degrees) to get the numerical value for the 
-      rotation, and increasing that by another 90 degrees to compensate for the shift
-      originally applied by the CSS styling on page load.
-  3. Call the function defined in step 2 every second.
+- **CSS**:
+
+    1. The hands are all laying flat; we need them to be vertical. Rotate all of the
+        hands by 90 degrees so that they are upright by giving the `.hand` class a
+        `transform` rule with the value `rotate(90deg)`.
+
+    1. Set the `transform-origin` CSS property of the `.hand` class to `100%`; the default
+        value is `50%` (or the midway point of the HTML element), but if we leave it there
+        the clock hands will transform from the respective centers of their lines as opposed to the
+        center of the clock. (If that doesn't make sense, try it out in your code. Set the value for
+        `transform-origin` rule completely and check again. Finally, try it again with `50%`.).
+        Changing the value to 100% shifts the _point of origin for the transformation_
+        to the furthest point on the x-axis of the HTML element.
+
+    1. Set the `transition` CSS property of `.hand` to `all 0.05s`; this tells the browser
+        to gradually apply any changes to the element's styling over a 0.05 second period.
+
+    1. Set the `transition-timing-function` CSS property of `.hand` to whatever function
+        you prefer, or define your own using the `cubic-bezier()` property value.
+
+- **JavaScript**:
+
+    1. Declare & define variables for each clock hand and reference the corresponding _HTML
+        element_.
+
+        EX: `const secondHand = document.querySelector('.second-hand');`
+
+    1. Create a function which will be responsible for calculating the number of degrees that we need
+        to rotate each clock hand by. It should accept two arguments: the _current numerical value_ of the
+        clock hand, and the max value possible of the clock hand (if you want the number of degrees needed for
+        the second hand and the current time is 03:15:18, you would pass in (18, 60) where 18 is the current
+        value of the second hand, and 60 is the maximum possible value).
+
+        - Divide the current numerical value of the clock hand by it's max possible value to get the rotation as
+        a percentage, then multiply the result of that by 360 (each hand can rotate 360 degrees) to convert
+        the value from a percentage to an integer, and increase that result by another 90 degrees to compensate
+        for the shift originally applied by the CSS styling on page load.
+
+            ```javascript
+            const calcDegrees = (time, max) => ((time / max) * 360) + 90;
+            ```
+
+    1. Create a function that will automatically run every second; in the body of the function,
+        create a variable and define it as a new Date object. Then, create three variables which will
+        hold references to the rotation amount to be applied to each clock hand. To get the rotation amount,
+        define the variables as the return value from calling the `calcDegrees` function; each call should
+        pass in the correct values in relation to whichever clock hand they are supposed to represent.
+
+    1. Still within the body of the function from step 3, update the `transform` rule for each
+        clock hand to their corresponding updated values.
+
+        ```javascript
+            /* Steps 3 & 4 */
+
+            // Call function once every second
+            setInterval(() => {
+            // Create new Date object
+            const now = new Date();
+            // Get current seconds, minutes, & hours and calculate the degree shift
+            const
+                secondHandDegrees = calcDegrees(now.getSeconds(), 60),
+                minuteHandDegrees = calcDegrees(now.getMinutes(), 60),
+                hourHandDegrees = calcDegrees(now.getHours(), 12);
+            // Apply rotation to the clock hands corresponding with current time value
+            secondHand.style.transform = `rotate(${secondHandDegrees}deg)`;
+            minuteHand.style.transform = `rotate(${minuteHandDegrees}deg)`;
+            hourHand.style.transform = `rotate(${hourHandDegrees}deg)`;
+            }, 1000); // 1000ms === 1s
+
+        ```
 
 Yaaaaaay! All done!
diff --git a/exercises/02 - JS + CSS Clock/index.html b/exercises/02 - JS + CSS Clock/index.html
index 907a500..bd99970 100644
--- a/exercises/02 - JS + CSS Clock/index.html	
+++ b/exercises/02 - JS + CSS Clock/index.html	
@@ -19,17 +19,17 @@
 
   <style>
     html {
-      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
-      background-size:cover;
-      font-family:'helvetica neue';
+      background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
+      background-size: cover;
+      font-family: 'helvetica neue';
       text-align: center;
       font-size: 10px;
     }
 
     body {
       font-size: 2rem;
-      display:flex;
-      flex:1;
+      display: flex;
+      flex: 1;
       min-height: 100vh;
       align-items: center;
     }
@@ -37,31 +37,28 @@
     .clock {
       width: 30rem;
       height: 30rem;
-      border:20px solid white;
-      border-radius:50%;
-      margin:50px auto;
+      border: 20px solid white;
+      border-radius: 50%;
+      margin: 50px auto;
       position: relative;
-      padding:2rem;
-      box-shadow:
-        0 0 0px 4px rgba(0,0,0,0.1),
-        inset 0 0 0 3px #EFEFEF,
-        inset 0 0 10px black,
-        0 0 10px rgba(0,0,0,0.2);
+      padding: 2rem;
+      box-shadow: 0 0 0px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
     }
 
     .clock-face {
       position: relative;
       width: 100%;
       height: 100%;
-      transform: translateY(-3px); /* account for the height of the clock hands */
+      transform: translateY(-3px);
+      /* account for the height of the clock hands */
     }
 
     .hand {
-      width:50%;
-      height:6px;
-      background:black;
+      width: 50%;
+      height: 6px;
+      background: black;
       position: absolute;
-      top:50%;
+      top: 50%;
       transform-origin: 100%;
       transform: rotate(90deg);
       transition: all 0.05s;
@@ -70,39 +67,39 @@
 
   </style>
 
-<script>
-  /*  GOAL: Write the JavaScript code necessary to transform the HTML elements
+  <script>
+    /*  GOAL: Write the JavaScript code necessary to transform the HTML elements
    *  on the page into a functioning clock.
    */
 
-  // Create references to the HTML elements that we want to transform
-  const secondHand = document.querySelector('.second-hand');
-  const minuteHand = document.querySelector('.min-hand');
-  const hourHand = document.querySelector('.hour-hand')
-
-  function setDate() {
-    const now = new Date(); // Create new Date object
-
-    // Get current seconds, calculate the degree shift, and apply the styling
-    const seconds = now.getSeconds();
-    const secondHandDegrees = ((seconds / 60) * 360) + 90;
-    secondHand.style.transform = `rotate(${secondHandDegrees}deg)`;
-
-    // Get current minutes, calculate the degree shift, and apply the styling
-    const minutes = now.getMinutes();
-    const minuteHandDegrees = ((minutes / 60) * 360) + 90;
-    minuteHand.style.transform = `rotate(${minuteHandDegrees}deg)`;
-
-    // Hour hand transformation can utilize the data gathered for the minute
-    // hand, with a minor alteration in how the degree shift is calculated.
-    const hourHandDegrees = ((minutes / 12) * 360) + 90;
-    hourHand.style.transform = `rotate(${hourHandDegrees}deg)`;
-  }
-
-  // Call function once every second
-  setInterval(setDate, 1000);
-
-</script>
+    // Create references to the HTML elements that we want to transform
+    (()=> {
+      const
+        secondHand = document.querySelector('.second-hand'),
+        minuteHand = document.querySelector('.min-hand'),
+        hourHand = document.querySelector('.hour-hand')
+
+      // Helper function responsible for calculating the amount to rotate a hand
+      const calcDegrees = (time, max) => ((time / max) * 360) + 90;
+      // Call function once every second
+      setInterval(() => {
+
+      // Create new Date object
+      const now = new Date();
+
+      // Get current seconds, minutes, & hours and calculate the degree shift
+      const
+        secondHandDegrees = calcDegrees(now.getSeconds(), 60),
+        minuteHandDegrees = calcDegrees(now.getMinutes(), 60),
+        hourHandDegrees = calcDegrees(now.getHours(), 12);
+
+      // Apply rotation to the clock hands corresponding with current time value
+      secondHand.style.transform = `rotate(${secondHandDegrees}deg)`;
+      minuteHand.style.transform = `rotate(${minuteHandDegrees}deg)`;
+      hourHand.style.transform = `rotate(${hourHandDegrees}deg)`;
+    }, 1000);
+    })();
+  </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/03 - CSS Variables/README.md b/exercises/03 - CSS Variables/README.md
index 222c3d2..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: Dec 10, 2016
+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/README.md b/exercises/04 - Array Cardio Day 1/README.md
index b659616..584f0c5 100644
--- a/exercises/04 - Array Cardio Day 1/README.md	
+++ b/exercises/04 - Array Cardio Day 1/README.md	
@@ -1,6 +1,6 @@
 # Exercise 4: Array Cardio
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 12, 2016
+Last Commit Date: May 12, 2017
 
 Not really much of a guide necessary for this one. The challenge is pretty
 well documented as far as what's expected from the developer; use
diff --git a/exercises/04 - Array Cardio Day 1/index.html b/exercises/04 - Array Cardio Day 1/index.html
index 7a44706..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
 
@@ -25,63 +26,79 @@
 
     const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
 
-    const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
+    const people = ['Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William', 'Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton',];
 
     // 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)
-    console.table(inventors_from_1500s)
+    const inventors_from_1500s = inventors.filter(({year}) => year >= 1500 && year < 1600);
+
+    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)
+    const total_years_lived = inventors.reduce(
+      (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));
+    const inventors_by_lifespan = inventors.sort(
+      ({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);
+    const people_by_last_name = people.sort((a, b) => a.split(', ')[0] < b.split(', ')[0] ? -1 : 1);
+    console.log(people_by_last_name);
 
-    console.table(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;
 
-    console.table(data_instance_count);
+        return tallyObject;
+    }, {});
+    console.dir(data_instance_count);
 
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/05 - Flex Panel Gallery/README.md b/exercises/05 - Flex Panel Gallery/README.md
index 6dc7d76..854c309 100644
--- a/exercises/05 - Flex Panel Gallery/README.md	
+++ b/exercises/05 - Flex Panel Gallery/README.md	
@@ -1,6 +1,6 @@
 # Exercise 5: Flex Panel Gallery
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 12, 2016
+Last Commit Date: May 12, 2017
 
 We are given a web page with five `div` HTML elements with a class `panels`, 
   each containing three `p` HTML elements with some text. These five `div` elements 
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/README.md b/exercises/06 - Type Ahead/README.md
index 40d930f..8005fbc 100644
--- a/exercises/06 - Type Ahead/README.md	
+++ b/exercises/06 - Type Ahead/README.md	
@@ -1,6 +1,6 @@
 # Exercise 6: Type Ahead AJAX
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 12, 2016
+Last Commit Date: May 12, 2017
 
 We are given a web page with an `input` HTML element in which the user can insert
   text, and an `unordered list` below that `input` which will display cities & states
diff --git a/exercises/06 - Type Ahead/index.html b/exercises/06 - Type Ahead/index.html
index 75cd271..5753c51 100644
--- a/exercises/06 - Type Ahead/index.html	
+++ b/exercises/06 - Type Ahead/index.html	
@@ -17,52 +17,48 @@
     </ul>
   </form>
   <script>
-    const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+    (() => {
+      const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
-    // Step 1
-    const cities = [],
-      searchInput = document.querySelector('.search'),
-      suggestions = document.querySelector('.suggestions');
+      // Step 1
+      const cities = [],
+        searchInput = document.querySelector('.search'),
+        suggestions = document.querySelector('.suggestions');
 
-    // Step 2
-    fetch(endpoint)
-      .then(blob => blob.json())
-      .then(data => cities.push(...data))
+      // Step 2
+      fetch(endpoint)
+        .then(blob => blob.json())
+        .then(data => cities.push(...data))
 
-    // Step 4
-    function matchInput(inputString, cities) {
-      return cities.filter((location) => {
-        const regex = new RegExp(inputString, 'gi');
-        return location.city.match(regex) || location.state.match(regex)
-      });
-    }
+      // Step 4
+      const matchInput = (inputString, cities) => cities.filter(({city, state}) => (
+          city.match(new RegExp(inputString, 'gi')) || state.match(new RegExp(inputString, 'gi'))
+      ));
 
-    // Step 6
-    function numberWithCommas(x) {
-      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    }
+      // Step 6
+      const numberWithCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 
-    // Step 5
-    function displayMatches() {
-      const matchArray = matchInput(this.value, cities)
+      // Step 5
+      const displayMatches = (el) => {
+        const matchArray = matchInput(el.value, cities)
 
-      const suggestionList = matchArray.map((location => {
-        const regex = new RegExp(this.value, 'gi');
-        const cityName = location.city.replace(regex, `<span class ="hl">${this.value}</span>`);
-        const stateName = location.state.replace(regex, `<span class="hl">${this.value}</span>`);
-        return `
+        const suggestionList = matchArray.map((location => {
+          const regex = new RegExp(el.value, 'gi');
+          const cityName = location.city.replace(regex, `<span class ="hl">${el.value}</span>`);
+          const stateName = location.state.replace(regex, `<span class="hl">${el.value}</span>`);
+          return `
           <li>
             <span class="name">${cityName}, ${stateName}</span>
             <span class="population">${numberWithCommas(location.population)}</span>
           </li>`;
-      })).join('');
-      suggestions.innerHTML = suggestionList;
-    }
-
-    // Step 3
-    searchInput.addEventListener('keyup', displayMatches);
+        })).join('');
+        suggestions.innerHTML = suggestionList;
+      }
 
+      // Step 3
+      searchInput.addEventListener('keyup', (e) => displayMatches(searchInput));
+    })();
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/exercises/07 - Array Cardio Day 2/README.md b/exercises/07 - Array Cardio Day 2/README.md
index 786100a..0360005 100644
--- a/exercises/07 - Array Cardio Day 2/README.md	
+++ b/exercises/07 - Array Cardio Day 2/README.md	
@@ -1,6 +1,6 @@
 # Exercise 7: Array Cardio Day 2
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 12, 2016
+Last Commit Date: May 12, 2017
 
 More fun with Array methods! Much like the previous Array Cardio exercise, the 
   requirements are pretty well documented. This exercise utilizes the following
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/README.md b/exercises/08 - Fun with HTML5 Canvas/README.md
index c1192d4..9e737a7 100644
--- a/exercises/08 - Fun with HTML5 Canvas/README.md	
+++ b/exercises/08 - Fun with HTML5 Canvas/README.md	
@@ -1,6 +1,6 @@
 # Exercise 8: Fun With HTML5 Canvas
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 14, 2016
+Last Commit Date: May 12, 2017
 
 We're given an HTML page with a `canvas` element in which the user should be able
   to click and drag their mouse to draw. When the user clicks+drags their mouse, 
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/09 - Dev Tools Domination/README.md b/exercises/09 - Dev Tools Domination/README.md
index deda385..804131b 100644
--- a/exercises/09 - Dev Tools Domination/README.md	
+++ b/exercises/09 - Dev Tools Domination/README.md	
@@ -1,6 +1,6 @@
 # Exercise 9: Dev Tools Domination
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 15, 2016
+Last Commit Date: May 12, 2017
 
 This is a simple dev tools exercise. We'll explore how to set _break points_
   in the browser debugger, and learn about various `console` methods that allow us
diff --git a/exercises/10 - Hold Shift and Check Checkboxes/README.md b/exercises/10 - Hold Shift and Check Checkboxes/README.md
index 352ddc5..1db7afe 100644
--- a/exercises/10 - Hold Shift and Check Checkboxes/README.md	
+++ b/exercises/10 - Hold Shift and Check Checkboxes/README.md	
@@ -1,6 +1,6 @@
 # Exercise 10: Hold Shift and Check Checkboxes
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 15, 2016
+Last Commit Date: May 12, 2017
 
 We're given an HTML page that displays a collection of `input` HTML elements
   of type `checkbox`, each followed by a `p` HTML element that will have it's
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/README.md b/exercises/11 - Custom Video Player/README.md
index a9e510a..5cfe96f 100644
--- a/exercises/11 - Custom Video Player/README.md	
+++ b/exercises/11 - Custom Video Player/README.md	
@@ -1,6 +1,6 @@
 # Exercise 11: Custom Video Player
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 17, 2016
+Last Commit Date: May 12, 2017
 
 When the HTML page is loaded in a browser, it displays a video player with controls
   for playing/pausing the video, scrolling through the video progress, skipping/
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/README.md b/exercises/12 - Key Sequence Detection/README.md
index 4fe1f48..505af56 100644
--- a/exercises/12 - Key Sequence Detection/README.md	
+++ b/exercises/12 - Key Sequence Detection/README.md	
@@ -1,6 +1,6 @@
 # Exercise 12: Key Sequence Detection
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 18, 2016
+Last Commit Date: May 12, 2017
 
 We're given an HTML document with...basically nothing. There's a `script` tag in the
   document header that loads a JavaScript file from [Cornify.com](https://www.cornify.com)
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/README.md b/exercises/13 - Slide in on Scroll/README.md
index 73e739b..0669658 100644
--- a/exercises/13 - Slide in on Scroll/README.md	
+++ b/exercises/13 - Slide in on Scroll/README.md	
@@ -1,6 +1,6 @@
 # Exercise 13: Slide In On Scroll
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 19, 2016
+Last Commit Date: May 12, 2017
 
 Given an HTML document with multiple paragraphs and images, write the necessary
   JavaScript code to slide the images into view when the user scrolls to a point
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/14 - JavaScript References VS Copying/README.md b/exercises/14 - JavaScript References VS Copying/README.md
index af92fdf..2c4c064 100644
--- a/exercises/14 - JavaScript References VS Copying/README.md	
+++ b/exercises/14 - JavaScript References VS Copying/README.md	
@@ -1,6 +1,6 @@
 # Exercise 14: JavaScript Reference vs Copying
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 19, 2016
+Last Commit Date: May 12, 2017
 
 No guide necessary! We're learning about JavaScript variable referencing vs.
   copying. If you want a full-blown explanation, take a look at [chapter 11, section
diff --git a/exercises/15 - LocalStorage/README.md b/exercises/15 - LocalStorage/README.md
index de9e4f0..e177189 100644
--- a/exercises/15 - LocalStorage/README.md	
+++ b/exercises/15 - LocalStorage/README.md	
@@ -1,6 +1,6 @@
 # Exercise 15: LocalStorage
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 19, 2016
+Last Commit Date: May 12, 2017
 
 The web page simulates a restaurant's menu. The user should be able to
   add new dishes to the list using the `form` HTML element without having
diff --git a/exercises/16 - Mouse Move Shadow/README.md b/exercises/16 - Mouse Move Shadow/README.md
index 2879e01..8cc4784 100644
--- a/exercises/16 - Mouse Move Shadow/README.md	
+++ b/exercises/16 - Mouse Move Shadow/README.md	
@@ -1,6 +1,6 @@
 # Exercise 16: Mouse Move Shadow
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 23, 2016
+Last Commit Date: May 12, 2017
 
 We're given an HTML document with a `div` element containing an `h1` element.
   The `h1` element has a `textShadow` _style property_ which we want to manipulate
diff --git a/exercises/17 - Sort Without Articles/README.md b/exercises/17 - Sort Without Articles/README.md
index 0b57c38..f38f09e 100644
--- a/exercises/17 - Sort Without Articles/README.md	
+++ b/exercises/17 - Sort Without Articles/README.md	
@@ -1,6 +1,6 @@
 # Exercise 17: Sort Without Articles
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 23, 2016
+Last Commit Date: May 12, 2017
 
 We're given an HTML page with an _unordered list_, and an _array of string
   values_ in the `script` tag. Sort the values in the array **excluding
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/README.md b/exercises/18 - Adding Up Times with Reduce/README.md
index af9108d..df0190f 100644
--- a/exercises/18 - Adding Up Times with Reduce/README.md	
+++ b/exercises/18 - Adding Up Times with Reduce/README.md	
@@ -1,6 +1,6 @@
 # Exercise 18: Adding Up Times With Reduce
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
-Last Commit Date: Dec 24, 2016
+Last Commit Date: May 12, 2017
 
 The HTML document contains an _unordered list_ with multiple _list items_, each
   with a `data-time` which reflect a time in minutes and seconds. Our goal is to
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/README.md b/exercises/19 - Webcam Fun/README.md
new file mode 100644
index 0000000..305da3a
--- /dev/null
+++ b/exercises/19 - Webcam Fun/README.md	
@@ -0,0 +1,237 @@
+# Exercise 19: Webcam Fun
+Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
+Last Commit Date: May 12, 2017
+
+We're given an HTML page with a button labeled 'Take Photo' which calls upon a `takePhoto()`
+  function on a `click` event, a collection of `input` elements of type `range` with RGB min/max
+  labels, a `canvas` element, a `video` element, and an empty div with the class `strip`. Our goal
+  is to write the necessary JavaScript code to ask permission for the user's webcam, display the
+  feed from that webcam on the page, allow the user to save pictures that are displayed,
+  and allow the user to alter the image using the RGB sliders.
+
+## Guide
+
+This challenge will require use of the `Navigator` _Web API_ ([MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/Navigator)),
+  the `CanvasRenderingContext2D` _Web API_ ([MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D), 
+  and the `MediaDevices` _Web API_ ([MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices)). 
+  If you're not a fan of reading documentation, here's a simple overview:
+
+  - The `Navigator` interface is a representation of the application in which the JavaScript
+    code is running (in most cases, the browser)
+  - The `MediaDevices` interface provides a way to access the user's connected media hardware,
+    such as a webcam or microphone by using the `getUserMedia` method. The method takes
+    an object as an argument which specifies the media items the program needs access to;
+    in our case, the webcam.
+
+The `scripts.js` file already has some `constants` defined as references: a reference to 
+  the `video` element, the `canvas` element, the `canvas` context, to the `div` element 
+  where we'll display any photos the user has taken, and a reference to the `audio` element
+  which uses [this](http://wesbos.com/demos/photobooth/snap.mp3) file as it's source.
+  
+We begin by using the navigator web API in combination with the mediaDevices web API to
+  request permission from the user to access their webcam; this request returns a _promise_
+  with the resulting `MediaStream` object or the rejected promise with an error message. **Note:
+  This promise is only resolved *IF* the user selects an option when prompted for request
+  to the webcam**; if the user doesn't select anything, the promise won't resolve but our program
+  won't break. This is the beauty of promises; they allow us to ask for something and will
+  allow the rest of the program to run the promise waits for a response. Promises represent
+  _a value which may be available now, in the future, or never_ ([as defined by MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)). If
+  we receive a `localMediaStream` object as a promise, we'll set the source object of the `video` 
+  element to the _`localMediaStream` object_, and call upon the `play()` method of the `video` element. 
+  If the promise resolves to an error, we'll log out that error message.
+
+Then, we need to _define a function_ that will be used as the _event handler_ for when the 
+  'canplay' event of the `video` element is triggered (whenever the user either approves or 
+  denies access to their webcam). The function will adjust the `canvas` element's 
+  `width` and `height` properties to be equivalent to the `video` element's `width` and `height`,
+  and will return the _interval ID_ of a `setInterval()` method. Within the body of the 
+  `setInterval()` method, we will draw onto the canvas by providing a valid canvas image
+  source such as an `image` element, a `video` element, another `canvas` element, or an
+  _image bitmap_. In our case, we want to display the user's webcam feed in the canvas,
+  so we'll provide the `video` element as as argument to the canvas' draw method.
+  To manipulate the image using the `input` HTML elements, we'll need to get access
+  to the _underlying pixel data_ of the image being displayed on the canvas.
+  We'll declare a `let` variable and define it as the `ImageData` object returned
+  from calling the `getImageData()` method of the canvas context. The `ImageData` object
+  returned from this method is exactly what we were looking for: the _underlying pixel data_
+  for the current canvas image. We will eventually pass this variable into a function
+  that will change the values of the pixels depending on the `input` values.
+
+The `takePhoto()` function that the `button` HTML element is calling on 'click' events
+  isn't defined; we'll do that next. The `takePhoto()` function should play the audio file
+  that we referenced earlier with a `const` variable, convert the current canvas image
+  to a _data URI_, create an `anchor` HTML element (a link) with a _hyperlink reference_
+  pointing to the _data URI_ which will download the image to the user's local storage
+  when clicked, set the inner HTML of that link to be an `image` HTML element referencing
+  the _data URI_ as the source, and insert this link inside the empty `div` element
+  with the class `.strip`.
+
+The last function we'll want to create is one that will bring functionality to the `input`
+  elements; as the user moves the sliders around, we want to adjust the RGB values of the
+  canvas image to reflect the values of the sliders to present a sort of 'green screen'
+  effect. The function should have one declarared parameter, `pixels`. We'll begin by declaring 
+  a `const` as an empty object. We'll create a _NodeList_ of all the HTML `input` elements contained 
+  within the `div` with class `.rgb`, iterate through this _NodeList_, and create a key within 
+  the previously defined object corresponding with the given `input` element's `name` property, 
+  and set it's value as the given `input` element's value. The `pixels` argument we're expecting
+  will be the _underlying pixel data_ of the current canvas image. This data contains an _array
+  of unsigned 8bit integer values between 0-255_, corresponding with the RGB attributes of the image.
+  We'll iterate through these arrays and set the values to 0 where the RGB attribute is within
+  the range of the input slider values. This one is tricky, so let's get to the steps.
+
+**Steps:**
+
+1. Declare a `const` variable `getVideo` and define it as an _arrow function_. This function
+  will use the `Navigator` and `mediaDevices` web APIs to ask permission to access the user's
+  webcam and, upon success, will set the source object of the `video` element as the 
+  `localMediaStream`.
+
+    ```JavaScript
+      const getVideo = () => {
+        navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+          .then(localMediaStream => {
+            video.srcObject = localMediaStream;
+            video.play();
+          })
+          .catch(err => {
+            console.error(`OH NO!!!`, err);
+          })
+      };
+    ```
+
+2. Declare a `const` variable `paintToCanvas` and define it as an arrow function.
+
+    ```JavaScript
+      const paintToCanvas = () => { /* ... */};
+    ```
+
+       - In the body of this function, declare two `const` variables and define them
+         as the `video` element's width and height, and update the `canvas` width and height
+         to reflect those values.
+
+           ```JavaScript
+          const paintToCanavas = () => {
+            const width = video.videoWidth;
+            const height = video.videoHeight;
+            canvas.width = width;
+            canvas.height = height; 
+
+             /* More to do... */
+           };
+           ```
+
+    - Still in the body of the function, return the _interval ID_ of a `setInterval()`
+      function call, and within the body of that function call, draw the current `video`
+      element on to the `canvas.`
+
+        ```JavaScript
+          let paintToCanavas = () => {
+            const width = video.videoWidth;
+            const height = video.videoHeight;
+            canvas.width = width;
+            canvas.height = height; 
+
+            return setInterval(() => {
+              ctx.drawImage(video, 0, 0, width, height);
+            }, 16);
+          };
+        ```
+
+3. Declare a `const` variable `takePhoto` and define it as an arrow function that will
+  play the `audio` element on the HTML page, create a link which targets a _data URI_
+  representation of a still image taken from the canvas, and places that link into the front
+  of the empty `div` element.
+
+    ```JavaScript
+      const takePhoto = () => {
+        // Play the audio element on the HTML page
+        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 Man" />`;
+        strip.insertBefore(link, strip.firsChild);
+      };
+    ```
+
+4. Declare a `const` variable `greenScreen` and define it as an _arrow function_ that will
+  accept an argument `pixels`.
+
+    ```JavaScript
+      const greenScreen = (pixels) => { /*...*/ };
+    ```
+
+    - In the function body, declare a `const` variables `levels` and define it as an empty
+      object. Iterate through a _NodeList_ of all `input` elements within the div with class
+      `rgb` and set a key in the `levels` object as a given input's `name` property, and
+      set the value to be the given input's `value`.
+
+        ```JavaScript
+          /* In function body */
+
+          const levels = {};
+
+          document.querySelectorAll('.rgb input').forEach((input) => {
+            levels[input.name] = input.value;
+          });
+        ```
+
+    - Update the values of the pixels in the image so that we remove all RGB
+      values that are within the range defined by the user, and return the given
+      argument.
+
+        ```JavaScript
+          /* In function body */
+          for (i = 0; i < pixels.data.length; 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) 
+            {
+              pixels.data[i + 3] = 0;
+            }
+          }
+          return pixels;
+        ```
+
+5. Update the `getVideo` function so that the setInterval method within the function body
+  creates a variable defined as the _underlying pixel data_, passes that variable into the
+  `greenScreen` function, and places the returned pixel data into the canvas context.
+
+    ```JavaScript
+    /* In paintToCanvas function body */
+
+    return setInterval(() => {
+      ctx.drawImage(video, 0, 0, width, height);
+      
+      let pixels = ctx.getImageData(0, 0, width, height);
+
+      pixels = greenScreen(pixels);
+      
+      ctx.putImageData(pixels, 0, 0);
+    }, 16);
+    ```
+
+6. Call upon the `getVideo` function we previously defined.
+
+7. Attach an _event listener_ to the `video` HTML element that will call the `paintToCanvas`
+  function on the 'canplay' event, and attach an _event listener_ to the `button` HTML element
+  that will call the `takePhoto` function on a 'click' event.
+
+    ```JavaScript
+      video.addEventListener('canplay', paintToCanavas);
+      document.querySelector('.takePhoto').addEventListener('click', takePhoto);
+    ```
+
+Wrap it all up in an IIFE, take a step back, and enjoy your glorious new photo-and-greenscreen
+  application!
diff --git a/exercises/19 - Webcam Fun/index.html b/exercises/19 - Webcam Fun/index.html
index d4ffc4d..21fed87 100755
--- a/exercises/19 - Webcam Fun/index.html	
+++ b/exercises/19 - Webcam Fun/index.html	
@@ -9,8 +9,8 @@
 
   <div class="photobooth">
     <div class="controls">
-      <button onClick="takePhoto()">Take Photo</button>
-<!--       <div class="rgb">
+      <button class="takePhoto">Take Photo</button>
+       <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/exercises/19 - Webcam Fun/package.json b/exercises/19 - Webcam Fun/package.json
deleted file mode 100755
index 616baf5..0000000
--- a/exercises/19 - Webcam Fun/package.json	
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "name": "gum",
-  "version": "1.0.0",
-  "description": "",
-  "main": "scripts.js",
-  "scripts": {
-    "start" : "browser-sync start --server --files '*.css, *.html, *.js'"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "browser-sync": "^2.12.5"
-  }
-}
diff --git a/exercises/19 - Webcam Fun/scripts-FINISHED.js b/exercises/19 - Webcam Fun/scripts-FINISHED.js
deleted file mode 100755
index 0d62c8d..0000000
--- a/exercises/19 - Webcam Fun/scripts-FINISHED.js	
+++ /dev/null
@@ -1,102 +0,0 @@
-const video = document.querySelector('.player');
-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(`OH NO!!!`, err);
-    });
-}
-
-function paintToCanavas() {
-  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);
-    // mess with them
-    // pixels = redEffect(pixels);
-
-    pixels = rgbSplit(pixels);
-    // ctx.globalAlpha = 0.8;
-
-    // pixels = greenScreen(pixels);
-    // put them back
-    ctx.putImageData(pixels, 0, 0);
-  }, 16);
-}
-
-function takePhoto() {
-  // played the sound
-  snap.currentTime = 0;
-  snap.play();
-
-  // take the data out of the canvas
-  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 Man" />`;
-  strip.insertBefore(link, strip.firsChild);
-}
-
-function redEffect(pixels) {
-  for(let i = 0; i < pixels.data.length; i+=4) {
-    pixels.data[i + 0] = pixels.data[i + 0] + 200; // RED
-    pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN
-    pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue
-  }
-  return pixels;
-}
-
-function rgbSplit(pixels) {
-  for(let i = 0; i < pixels.data.length; i+=4) {
-    pixels.data[i - 150] = pixels.data[i + 0]; // RED
-    pixels.data[i + 500] = pixels.data[i + 1]; // GREEN
-    pixels.data[i - 550] = 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', paintToCanavas);
diff --git a/exercises/19 - Webcam Fun/scripts.js b/exercises/19 - Webcam Fun/scripts.js
index 00355f5..2ceeed6 100644
--- a/exercises/19 - Webcam Fun/scripts.js	
+++ b/exercises/19 - Webcam Fun/scripts.js	
@@ -1,5 +1,81 @@
-const video = document.querySelector('.player');
-const canvas = document.querySelector('.photo');
-const ctx = canvas.getContext('2d');
-const strip = document.querySelector('.strip');
-const snap = document.querySelector('.snap');
+(() => {
+  const video = document.querySelector(".player"),
+    canvas = document.querySelector(".photo"),
+    ctx = canvas.getContext("2d"),
+    strip = document.querySelector(".strip"),
+    snap = document.querySelector(".snap");
+
+  const getVideo = () => {
+    navigator.mediaDevices
+      .getUserMedia({ video: true, audio: false })
+      .then(localMediaStream => {
+        video.srcObject = localMediaStream;
+        video.play();
+      })
+      .catch(err => {
+        console.error(`OH NO!!! ${err}`);
+      });
+  };
+
+  const paintToCanavas = () => {
+    const { videoWidth: width, videoHeight: height } = video;
+
+    canvas.width = width;
+    canvas.height = height;
+
+    return setInterval(() => {
+      ctx.drawImage(video, 0, 0, width, height);
+
+      let pixels = ctx.getImageData(0, 0, width, height);
+
+      pixels = greenScreen(pixels);
+
+      ctx.putImageData(pixels, 0, 0);
+    }, 16);
+  };
+
+  const takePhoto = () => {
+    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 Man" />`;
+    strip.insertBefore(link, strip.firsChild);
+  };
+
+  const greenScreen = pixels => {
+    const levels = {};
+
+    document.querySelectorAll(".rgb input").forEach(input => {
+      levels[input.name] = input.value;
+    });
+
+    for (i = 0; i < pixels.data.length; 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
+      ) {
+        pixels.data[i + 3] = 0;
+      }
+    }
+    return pixels;
+  };
+
+  getVideo();
+
+  video.addEventListener("canplay", paintToCanavas);
+  document.querySelector(".takePhoto").addEventListener("click", takePhoto);
+})();
diff --git a/exercises/20 - Speech Detection/README.md b/exercises/20 - Speech Detection/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/exercises/20 - Speech Detection/index-START.html b/exercises/20 - Speech Detection/index-START.html
deleted file mode 100644
index d3395cc..0000000
--- a/exercises/20 - Speech Detection/index-START.html	
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Speech Detection</title>
-</head>
-<body>
-
-  <div class="words" contenteditable>
-  </div>
-
-<script>
-  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-
-
-</script>
-
-
-  <style>
-    html {
-      font-size: 10px;
-    }
-
-    body {
-      background:#ffc600;
-      font-family: 'helvetica neue';
-      font-weight: 200;
-      font-size: 20px;
-    }
-
-    .words {
-      max-width:500px;
-      margin:50px auto;
-      background:white;
-      border-radius:5px;
-      box-shadow:10px 10px 0 rgba(0,0,0,0.1);
-      padding:1rem 2rem 1rem 5rem;
-      background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
-      background-size: 100% 3rem;
-      position: relative;
-      line-height:3rem;
-    }
-    p {
-      margin: 0 0 3rem 0;
-    }
-
-    .words:before {
-      content: '';
-      position: absolute;
-      width: 4px;
-      top: 0;
-      left: 30px;
-      bottom: 0;
-      border: 1px solid;
-      border-color: transparent #efe4e4;
-    }
-  </style>
-
-</body>
-</html>
diff --git a/exercises/20 - Speech Detection/index-FINISHED.html b/exercises/20 - Speech Detection/index.html
similarity index 57%
rename from exercises/20 - Speech Detection/index-FINISHED.html
rename to exercises/20 - Speech Detection/index.html
index e1932f4..457ab15 100644
--- a/exercises/20 - Speech Detection/index-FINISHED.html	
+++ b/exercises/20 - Speech Detection/index.html	
@@ -10,34 +10,33 @@
   </div>
 
 <script>
-  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+  (() => {
+    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
-  const recognition = new SpeechRecognition();
-  recognition.interimResults = true;
+    const recognition = new window.SpeechRecognition()
+    recognition.interimResults = true
 
-  let p = document.createElement('p');
-  const words = document.querySelector('.words');
-  words.appendChild(p);
+    const words = document.querySelector('.words')
+    let newParagraphElement = document.createElement('p')
+    words.appendChild(newParagraphElement)
 
-  recognition.addEventListener('result', e => {
-    const transcript = Array.from(e.results)
-      .map(result => result[0])
-      .map(result => result.transcript)
-      .join('')
-
-      const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
-      p.textContent = poopScript;
+    recognition.addEventListener('result', e => {
+      const transcript = Array.from(e.results)
+        .map(results => results[0])
+        .map(({trascript}) => transcript)
+        .join('')
 
+      newParagraphElement.textContent = transcript
       if (e.results[0].isFinal) {
-        p = document.createElement('p');
-        words.appendChild(p);
+        newParagraphElement = document.createElement('p')
+        words.appendChild(newParagraphElement)
       }
-  });
-
-  recognition.addEventListener('end', recognition.start);
 
-  recognition.start();
+    })
 
+    recognition.addEventListener('end', recognition.start)
+    recognition.start()
+  })();
 </script>
 
 
diff --git a/exercises/21 - Geolocation/README.md b/exercises/21 - Geolocation/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/exercises/21 - Geolocation/index-FINISHED.html b/exercises/21 - Geolocation/index-FINISHED.html
deleted file mode 100644
index 0f2ddec..0000000
--- a/exercises/21 - Geolocation/index-FINISHED.html	
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Document</title>
-  <meta name="viewport" content="width=device-width">
-</head>
-<body>
-  <svg class="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"><g><path fill="#ffffff" d="M32,1.824C15.361,1.824,1.825,15.361,1.825,32c0,16.639,13.537,30.176,30.175,30.176   S62.175,48.639,62.175,32C62.175,15.361,48.639,1.824,32,1.824z M29.715,3.988h1.12l2.333,3.807V3.988h1.069v5.701h-1.155   l-2.298-3.718v3.718h-1.069V3.988z M9.323,33.917H8.102l-1.136-4.262l-1.132,4.262H4.587l-1.361-5.701h1.178l0.859,3.916   l1.042-3.916h1.369l0.999,3.982l0.875-3.982h1.159L9.323,33.917z M33.995,59.828c-0.181,0.285-0.438,0.497-0.77,0.636   c-0.332,0.139-0.745,0.208-1.241,0.208c-0.721,0-1.274-0.167-1.661-0.5c-0.386-0.333-0.617-0.819-0.692-1.456l1.12-0.109   c0.067,0.376,0.204,0.652,0.41,0.828c0.206,0.176,0.484,0.264,0.834,0.264c0.371,0,0.65-0.078,0.838-0.235   c0.188-0.157,0.282-0.34,0.282-0.55c0-0.135-0.04-0.25-0.119-0.344c-0.079-0.095-0.217-0.177-0.414-0.247   c-0.135-0.047-0.442-0.13-0.922-0.249c-0.617-0.153-1.05-0.341-1.299-0.564c-0.35-0.314-0.525-0.696-0.525-1.147   c0-0.29,0.082-0.562,0.247-0.815c0.165-0.253,0.402-0.445,0.712-0.577c0.31-0.132,0.684-0.198,1.122-0.198   c0.716,0,1.254,0.157,1.616,0.471c0.362,0.314,0.552,0.733,0.57,1.256l-1.151,0.051c-0.049-0.293-0.155-0.504-0.317-0.632   c-0.162-0.128-0.405-0.193-0.729-0.193c-0.334,0-0.596,0.069-0.786,0.206c-0.122,0.088-0.183,0.206-0.183,0.354   c0,0.135,0.057,0.25,0.171,0.346c0.145,0.122,0.498,0.249,1.058,0.381c0.56,0.132,0.974,0.269,1.243,0.41   c0.268,0.141,0.478,0.334,0.63,0.58c0.152,0.245,0.227,0.548,0.227,0.908C34.267,59.237,34.176,59.543,33.995,59.828z M32,52.795   c-11.466,0-20.795-9.329-20.795-20.795c0-11.466,9.329-20.795,20.795-20.795S52.795,20.534,52.795,32   C52.795,43.466,43.466,52.795,32,52.795z M55.014,33.917v-5.701h4.227v0.965h-3.076v1.264h2.862v0.96h-2.862v1.552h3.185v0.961   H55.014z"/><g><path fill="#000000" d="M48.904,31.863c-4.074-1.358-8.148-2.717-12.226-4.066c-0.265-0.087-0.399-0.223-0.486-0.486    c-1.349-4.077-2.708-8.151-4.066-12.226c-0.029-0.087-0.074-0.169-0.132-0.3c-0.054,0.152-0.09,0.245-0.122,0.34    c-1.352,4.053-2.707,8.104-4.048,12.161c-0.096,0.292-0.246,0.428-0.532,0.522c-4.056,1.342-8.108,2.696-12.16,4.049    c-0.097,0.032-0.189,0.074-0.344,0.137c0.172,0.06,0.267,0.093,0.362,0.125c4.074,1.358,8.148,2.717,12.224,4.072    c0.204,0.068,0.337,0.158,0.412,0.386c1.243,3.757,2.498,7.511,3.75,11.265c0.144,0.432,0.291,0.862,0.463,1.373    c0.068-0.185,0.108-0.285,0.142-0.386c1.349-4.042,2.701-8.083,4.04-12.128c0.094-0.284,0.231-0.438,0.523-0.534    c4.056-1.341,8.108-2.696,12.161-4.048c0.099-0.033,0.195-0.076,0.347-0.137C49.067,31.925,48.987,31.891,48.904,31.863z     M37.475,32.038c-1.316,0.439-2.631,0.879-3.947,1.314c-0.095,0.031-0.139,0.081-0.17,0.173c-0.434,1.313-0.873,2.625-1.311,3.937    c-0.012,0.033-0.024,0.066-0.046,0.126c-0.056-0.166-0.104-0.306-0.15-0.446c-0.407-1.219-0.814-2.437-1.218-3.657    c-0.025-0.074-0.068-0.104-0.134-0.125c-1.323-0.44-2.646-0.881-3.968-1.322c-0.031-0.01-0.062-0.022-0.118-0.041    c0.05-0.02,0.081-0.034,0.112-0.045c1.315-0.439,2.631-0.879,3.947-1.314c0.093-0.03,0.142-0.075,0.173-0.17    c0.435-1.316,0.875-2.632,1.314-3.947c0.01-0.031,0.022-0.062,0.039-0.11c0.019,0.042,0.033,0.069,0.043,0.097    c0.441,1.323,0.882,2.645,1.321,3.969c0.028,0.085,0.072,0.129,0.158,0.158c1.324,0.438,2.646,0.879,3.969,1.32    c0.027,0.009,0.053,0.02,0.1,0.038C37.538,32.013,37.507,32.027,37.475,32.038z"/><path fill="#000000" d="M24.436,27.633c-1.069-2.137-2.119-4.237-3.216-6.43c2.189,1.094,4.292,2.145,6.433,3.216    c-0.359,0.713-0.706,1.404-1.057,2.091c-0.023,0.045-0.078,0.082-0.127,0.106C25.807,26.949,25.143,27.28,24.436,27.633z"/><path fill="#000000" d="M39.573,27.632c-0.696-0.348-1.351-0.673-2.002-1.005c-0.076-0.038-0.155-0.104-0.193-0.177    c-0.338-0.661-0.666-1.326-1.019-2.033c2.121-1.061,4.228-2.115,6.43-3.217C41.69,23.399,40.635,25.509,39.573,27.632z"/><path fill="#000000" d="M24.436,36.339c0.712,0.357,1.394,0.698,2.074,1.043c0.046,0.024,0.088,0.073,0.113,0.121    c0.339,0.671,0.674,1.345,1.028,2.051c-2.126,1.063-4.232,2.117-6.43,3.216C22.317,40.577,23.37,38.472,24.436,36.339z"/><path fill="#000000" d="M36.358,39.555c0.354-0.707,0.688-1.38,1.028-2.05c0.028-0.056,0.084-0.111,0.14-0.139    c0.67-0.339,1.343-0.674,2.047-1.026c1.066,2.131,2.118,4.235,3.215,6.43C40.601,41.676,38.503,40.628,36.358,39.555z"/></g></g></svg>
-
-
-  <h1 class="speed">
-    <span class="speed-value">0</span>
-    <span class="units">KM/H</span>
-  </h1>
-
-  <style>
-    html {
-      font-size: 100px;
-    }
-    body {
-      font-family: sans-serif;
-      min-height:100vh;
-      display:flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      background:
-        radial-gradient(black 15%, transparent 16%) 0 0,
-        radial-gradient(black 15%, transparent 16%) 8px 8px,
-        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
-      background-color:#282828;
-      background-size:16px 16px;
-      background-position: fixed;
-    }
-
-    .arrow {
-      width:250px;
-      overflow: hidden;
-      transition: all 0.2s;
-      transform:rotate(0deg);
-      display: inline-block;
-    }
-
-    h1 {
-      color:white;
-      font-weight: 100;
-      font-size: 60px;
-      display:flex;
-      align-items: center;
-    }
-
-    .units {
-      font-size: 15px;
-    }
-    /*Compass: https://thenounproject.com/search/?q=compass&i=592352*/
-  </style>
-  <script>
-    const arrow = document.querySelector('.arrow');
-    const speed = document.querySelector('.speed-value');
-
-    navigator.geolocation.watchPosition((data) => {
-      console.log(data);
-      speed.textContent = data.coords.speed;
-      arrow.style.transform = `rotate(${data.coords.heading}deg)`;
-    }, (err) => {
-      console.error(err);
-    });
-  </script>
-</body>
-</html>
diff --git a/exercises/21 - Geolocation/index-START.html b/exercises/21 - Geolocation/index-START.html
index d794c14..f51d895 100644
--- a/exercises/21 - Geolocation/index-START.html	
+++ b/exercises/21 - Geolocation/index-START.html	
@@ -62,7 +62,9 @@ <h1 class="speed">
 
     navigator.geolocation.watchPosition((data) => {
       console.log(data);
-      speed.textContent = data.coords.speed;
+
+      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 2f500c4..ff699a0 100644
--- a/readme.md
+++ b/readme.md
@@ -1,61 +1,76 @@
 # JavaScript30 - 30 Day JavaScript Challenge
+
 Nitish Dayal, Software & Applications Developer  
-Last Commit Date: Dec 24, 2016
+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
+  [Wes Bos](//github.com/wesbos). I wrote these in the hopes of expanding the ways
+  in which people can access this course; not everyone has the data allotments
+  or internet speeds or...whatever the case may be to load multiple high definition
+  videos. Or, maybe, you prefer to have a text-based guide to follow along with/
+  refer back to. Orrr you're in a library and don't have headphones. Who knows! If
+  you want some documentation to go along with those sweet Wes Bos vids, here you go.
+
+**DISCLAIMER:** My approach to some of the challenges will vary from the provided answers (found in
+  the files that end with `-FINISHED` on the main repo). Some of the tweaks are just to
+  include various 'best practices' and some have huge chunks of differences. I try to provide
+  thorough explanations when I do stray from the path and explain why I chose to do so, but
+  I want to make it clear that some of these guides don't go hand-in-hand with the videos.
+
 ## 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
   'downtime' as moments in which we can build on our knowledge through some simple
-  exercises. My goal is to _participate_ in 3 challenges per day (watch the videos, take 
-  some notes, etc.) and to _complete_ one challenge per day.
+  exercises.
 
-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 or something. 
-  JavaScript30 appears to be 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.**
+I think it's fair to say that, coming into this course, you should have a decent grasp
+  of JavaScript fundamentals. Comfort when working with functions, callbacks, arrays,
+  and objects will help a great deal in working through the challenges. If you don't,
+  **don't worry and do it anyways** &lt;3. It might take you more than downtime to complete
+  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.
 
-**UPDATE:** If you're here for written guides, please be patient with me! I've made it a priority
-to get as many of these done as possible, as quickly as possible. Thank youuu. ❤️
-
-Completed written guides can be found in the corresponding challenge directory (click the links below, folks).
+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. [x] ~~[JavaScript Drum Kit](./exercises/01\ -\ JavaScript\ Drum\ Kit/)~~
-2. [x] ~~[JS + CSS Clock](./exercises/02\ -\ JS\ +\ CSS\ Clock/)~~
-3. [x] ~~[CSS Variables](./exercises/03\ -\ CSS\ Variables/)~~
-4. [x] ~~[Array Cardio, Day 1](./exercises/04\ -\ Array\ Cardio\ Day\ 1/)~~
-5. [x] ~~[Flex Panel Gallery](./exercises/05\ -\ Flex\ Panel\ Gallery/)~~
-6. [x] ~~[Type Ahead](./exercises/06\ -\ Type\ Ahead/)~~
-7. [x] ~~[Array Cardio, Day 2](./exercises/07\ -\ Array\ Cardio\ Day\ 2/)~~
-8. [x] ~~[Fun with HTML5 Canvas](./exercises/08\ -\ Fun\ with\ HTML5\ Canvas/)~~
-9. [x] ~~[Dev Tools Domination](./exercises/09\ -\ Dev\ Tools\ Domination/)~~
-10. [x] ~~[Hold Shift and Check Checkboxes](./exercises/10\ -\ Hold\ Shift\ and\ Check\ Checkboxes/)~~
-11. [x] ~~[Custom Video Player](./exercises/11\ -\ Custom\ Video\ Player/)~~
-12. [x] ~~[Key Sequence Detection](./exercises/12\ -\ Key\ Sequence\ Detection/)~~
-13. [x] ~~[Slide in on Scroll](./exercises/13\ -\ Slide\ in\ on\ Scroll/)~~
-14. [x] ~~[JavaScript References vs. Copying](./exercises/14\ -\ JavaScript\ References\ VS\ Copying)~~
-15. [x] ~~[LocalStorage](./exercises/15\ -\ LocalStorage/)~~
-16. [x] ~~[Mouse Move Shadow](./exercises/16\ -\ Mouse\ Move\ Shadow/)~~
-17. [x] ~~[Sort Without Articles](./exercises/17\ -\ Sort\ Without\ Articles/)~~
-18. [x] ~~[Adding Up Times with Reduce](./exercises/18\ -\ Adding\ Up\ Times\ with\ Reduce/)~~
-19. [ ] Webcam Fun
-20. [ ] Speech Detection
-21. [ ] Geolocation
-22. [ ] Follow Along Link Highlighter
-23. [ ] Speech Synthesis
-24. [ ] Sticky Nav
-25. [ ] Event Capture, Propagation, Bubbling, and Once
-26. [ ] Stripe Follow Along Nav
-27. [ ] Click and Drag
-28. [ ] Video Speed Controller
-29. [ ] Countdown Timer
-30. [ ] Whack A Mole
-
+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/)