asap · asap · Oct 21, 2017 · Oct 22, 2017
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
@@ -21,6 +21,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --base: #ffc600;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img {
+      padding:  var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
+
+    .h1 {
+      color: var(--base);
+    }
 
     /*
       misc styles, nothing to do with CSS variables
@@ -44,8 +59,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     }
   </style>
 
-  <script>
-  </script>
+  <script src="script.js"></script>
 
 </body>
 </html>
diff --git a/03 - CSS Variables/script.js b/03 - CSS Variables/script.js
@@ -0,0 +1,11 @@
+const inputs = document.querySelectorAll('.controls input');
+
+const handleUpdate = (e) => {
+  const suffix = e.target.dataset.sizing || '';
+  const name = e.target.name;
+  const value = e.target.value;
+  document.documentElement.style.setProperty(`--${name}`, value + suffix);
+};
+
+inputs.forEach(input => input.addEventListener('change', handleUpdate));
+inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
@@ -31,28 +31,63 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const inventorsOfTheSixteenthCentury = inventors.filter(inv => { return 1500 <= inv.year && inv.year < 1600; });
+    console.log("Inventors born in the 1500's", inventorsOfTheSixteenthCentury);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const inventorsFirstAndLastNames = inventors.map(inv => `${inv.first} ${inv.last}`);
+    console.log("Inventors: ", inventorsFirstAndLastNames);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const inventorsByBirthday = inventors.sort((a, b) => (a.year > b.year) ? 1 : -1);
+    console.log("Birthday Order: ", inventorsByBirthday);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const totalYears = inventors.reduce((total, inv) => {
+      return total + (inv.passed - inv.year);
+    }, 0);
+    console.log("Total years lived", totalYears);
 
     // 5. Sort the inventors by years lived
+    const yearsLived = inventors.sort((a, b) => {
+      const lastInv = a.passed - a.year;
+      const nextInv = b.passed - b.year;
+      return (nextInv > lastInv) ? 1 : -1;
+    });
+    console.log("Inventors by Lifespan", yearsLived);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 
+    // const category = document.querySelector('.mw-category');
+    // const link = Array.from(document.querySelector('a'));
+    // const de = links
+    //              .map(link => link.textContent)
+    //              .filter(streetName => streetName.includes('de');
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const alpha = people.sort((a, b) => {
+      const [aLast, aFirst] = a.split(', ');
+      const [bLast, bFirst] = b.split(', ');
+      return aLast > bLast ? 1 : -1;
+    });
+    console.log("People", alpha);
 
     // 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 reduction = data.reduce((obj, item) => {
+      if(!obj[item]) {
+        obj[item] = 0;
+      }
+      obj[item]++;
+      return obj;
+    }, {});
+    console.log("Data Instances", reduction);
 
   </script>
 </body>