nitishdayal · nitishdayal · May 13, 2017 · May 13, 2017 · May 13, 2017 · May 13, 2017
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "angulardoc.repoId": "a547aa17-a9ab-4f77-ba4c-f3167ae617d2",
+  "angulardoc.lastSync": 0
+}
diff --git a/exercises/03 - CSS Variables/README.md b/exercises/03 - CSS Variables/README.md
@@ -1,10 +1,11 @@
 # Exercise 3: CSS Variables
+
 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)  
 Last Commit Date: May 12, 2017
 
 The web page provided in this exercise displays an image, and has 3 form inputs
   from which the user can manipulate the padding, blur amount, and background
-  color of the image. Update the CSS and write the JavaScript code necessary to 
+  color of the image. Update the CSS and write the JavaScript code necessary to
   bring functionality to the inputs.
 
 ## Guide
@@ -24,6 +25,7 @@ The purpose of this exercise is to gain experience using _CSS3 variables_. These
 **Steps:**
 
 - CSS:
+
   1. Declare a new style for the `:root` element and declare three variables inside
     the style definition for `:root` with the same names as the `input` _HTML elements_.
     _CSS3 variables_ are declared in the following syntax format:
@@ -36,7 +38,8 @@ The purpose of this exercise is to gain experience using _CSS3 variables_. These
         --padding: 10px;
       }
       ```
-  2. Declare a new style for the `img` element and set the `background`, `filter`, and
+
+  1. Declare a new style for the `img` element and set the `background`, `filter`, and
     `padding` properties to the variables we defined at the root element:
       ```CSS
       /* 'var(--variableName)' to use previously defined CSS properties */
@@ -47,21 +50,26 @@ The purpose of this exercise is to gain experience using _CSS3 variables_. These
         padding: var(--padding);
       }
       ```
-  3. Declare a new style for the `.hl` class and set the color to the `base` variable.
+
+  1. Declare a new style for the `.hl` class and set the color to the `base` variable.
 
 - JavaScript:
+
   1. Declare & define a variable as a reference to all of the inputs on the page.
-  2. Iterate through the _HTML Node Elements_ that the variable is referencing and 
-    attach _event listeners_ to all of them that will call on an _event handler_ whenever
-    the input value has been changed.
-  3. Repeat step 2, listening for mouse movements on the inputs instead of value
-    changes.
-  4. Define a function that will be used as the _event handler_. This will update
-    the value of the _CSS3 variable_ **at the document level** corresponding with the 
-    `input` element's `name` property which triggered the event handler.
-    - Minor 'gotcha': Properties like `padding` and `blur` won't update because
+
+  1. Iterate through the _HTML Node Elements_ that the variable is referencing and
+    attach _event listeners_ to each one that will call on an _event handler_ whenever
+    the input value has been changed (the `change` event).
+
+  1. Repeat step 2, listening for mouse movements on the inputs instead of value
+    changes (the `mousemove` event).
+
+  1. Define a function that will be used as the _event handler_. It will update
+    the value of the _CSS3 variable_ **at the root document level** corresponding with
+    the `name` property of the `input` element which called this function.
+        - Minor 'gotcha': Properties like `padding` and `blur` won't update because
       the value from the input does not include the type of measurement we are using
-      ('px', 'em', etc.). The `input` _HTML elements_ also have a `data-*` property if 
+      ('px', 'em', etc.). The `input` _HTML elements_ also have a `data-sizing` property if
       they require a suffix. We can use this to attach the correct suffix to the
       value if necessary.
 

diff --git a/exercises/03 - CSS Variables/index.html b/exercises/03 - CSS Variables/index.html
@@ -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>
+</html>
diff --git a/exercises/04 - Array Cardio Day 1/index.html b/exercises/04 - Array Cardio Day 1/index.html
@@ -8,6 +8,7 @@
 
 <body>
   <script>
+  'use strict';
     // Get your shorts on - this is an array workout!
     // ## Array Cardio Day 1
 
@@ -29,65 +30,74 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
-    const inventors_from_1500s = inventors.filter(
-      (inventor) => inventor.year >= 1500 && inventor.year < 1600
-    )
+    const inventors_from_1500s = inventors.filter(({year}) => year >= 1500 && year < 1600);
 
-    console.table(inventors_from_1500s)
+    console.table(inventors_from_1500s);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors first and last names
-    const inventors_full_name = inventors.map((inventor) => `${inventor.first} ${inventor.last}`)
-    console.table(inventors_full_name)
+    const inventors_full_name = inventors.map(({first, last}) => first + ' ' + last);
+    console.log(inventors_full_name);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
-    const inventors_by_date = inventors.sort((a, b) => a.year - b.year)
-    console.table(inventors_by_date)
+    const inventors_by_date = inventors.sort(({year: a}, {year: b}) => a - b);
+    console.table(inventors_by_date);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
     const total_years_lived = inventors.reduce(
-      (currValue, inventor) => currValue += (inventor.passed - inventor.year), 0
-    )
+      (currValue, {passed, year}) => currValue += (passed - year), 0
+    );
     console.log(total_years_lived);
 
     // 5. Sort the inventors by years lived
     const inventors_by_lifespan = inventors.sort(
-      (a, b) => (a.passed - a.year) - (b.passed - b.year)
+      ({passed: aP, year: aY}, {passed: bP, year: bY}) => (aP - aY) - (bP - bY)
     );
     console.table(inventors_by_lifespan);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
     /*
-    This code will be run directly from the browser console
-    after navigating to the Wikipedia link above.
-    
+    // This code will be run directly from the browser console
+    // after navigating to the Wikipedia link above.
+
     const blvd_with_de = Array.from(document.querySelectorAll('.mw-category a'))
-      .map(link => link.textContent)
+      .map(({textContent}) => textContent)
       .filter((blvd) => blvd.includes('de'))
-    */
 
+    */
     // 7. sort Exercise
     // Sort the people alphabetically by last name
-
     const people_by_last_name = people.sort((a, b) => a.split(', ')[0] < b.split(', ')[0] ? -1 : 1);
-
     console.log(people_by_last_name);
+
     // 8. Reduce Exercise
     // Sum up the instances of each of these
-    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];
+    const data = [
+      'car',
+      'car',
+      'truck',
+      'truck',
+      'bike',
+      'walk',
+      'car',
+      'van',
+      'bike',
+      'walk',
+      'car',
+      'van',
+      'car',
+      'truck'];
 
     const data_instance_count = data.reduce((tallyObject, item) => {
-      if (!tallyObject[item]) {
-        tallyObject[item] = 0;
-      }
-      tallyObject[item]++;
-      return tallyObject;
+        tallyObject[item] ? tallyObject[item]++ : tallyObject[item] = 1;
+
+        return tallyObject;
     }, {});
+    console.dir(data_instance_count);
 
-    console.log(data_instance_count);
   </script>
 </body>
 

diff --git a/exercises/05 - Flex Panel Gallery/index.html b/exercises/05 - Flex Panel Gallery/index.html
@@ -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>
+</html>
diff --git a/exercises/06 - Type Ahead/index.html b/exercises/06 - Type Ahead/index.html
@@ -31,10 +31,9 @@
         .then(data => cities.push(...data))
 
       // Step 4
-      const matchInput = (inputString, cities) => cities.filter((location) => {
-        const regex = new RegExp(inputString, 'gi');
-        return location.city.match(regex) || location.state.match(regex)
-      });
+      const matchInput = (inputString, cities) => cities.filter(({city, state}) => (
+          city.match(new RegExp(inputString, 'gi')) || state.match(new RegExp(inputString, 'gi'))
+      ));
 
       // Step 6
       const numberWithCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');