wesbos#4 completed!

Author: brandonjunus

03 - CSS Variables/index-START.html

@@ -58,21 +58,22 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <script>
     let inputs = document.querySelectorAll('.controls input');
     let handleUpdate = (e) => {
+      console.log(this);
       const suffix = this.dataset.sizing || '';
-      let { id } = e.target;
-      let image = document.querySelector('img');
-      if (id === 'spacing'){
-        image.style.setProperty('--spacing', `${this.value}${suffix}`);
-      } else if (id === 'blur'){
-        image.style.setProperty('--blur', `${this.value}${suffix}`);
-      } else if (id === 'base'){ 
-        image.style.setProperty('--base', `${this.value}${suffix}`);
-      }
+      // let { id } = e.target;
+      // let image = document.querySelector('img');
+      // if (id === 'spacing'){
+      //   image.style.setProperty('--spacing', `${this.value}${suffix}`);
+      // } else if (id === 'blur'){
+      //   image.style.setProperty('--blur', `${this.value}${suffix}`);
+      // } else if (id === 'base'){ 
+      //   image.style.setProperty('--base', `${this.value}${suffix}`);
+      // }
 
     }
 
-    inputs.forEach(input => input.addEventListener('change', handleUpdate));
-    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+    inputs.forEach(input => input.addEventListener('change', () => handleUpdate()));
+    inputs.forEach(input => input.addEventListener('mousemove',() => handleUpdate()));
   </script>
 
 </body>

04 - Array Cardio Day 1/index-START.html

@@ -31,29 +31,52 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
-
+    let before1500 = inventors.filter(x => x.year > 1500 && x.year < 1600);
+    console.table(before1500)
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
-
+    let firstAndLastNames = inventors.map(x => [x.first, x.last]);
+    console.log(firstAndLastNames);
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
-
+    let sorted = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
+    console.table(sorted);
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    let reduced = inventors.reduce((a, b) => a + (b.passed - b.year), 0);
+    console.log(reduced);
 
     // 5. Sort the inventors by years lived
-
+    let sortedByYearsLived = inventors.sort((a, b) => (a.passed - a.year) > (b.passed - b.year) ? 1: -1);
+    console.table(sortedByYearsLived);
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+    [...document.querySelectorAll('.mw-category a')].map(node => node.innerHTML).filter(text => text.includes('de'))
+    // nah i dont wanna get list of paris names. i'm going to instead all people with "beck" in its name
 
+    
+    let beckPeople = people.filter(x => x.toLowerCase().includes('beck'));
+    console.log('beckpeople', beckPeople);
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    let sortedByLastName = people.sort();
+    console.log('lastname sort', sortedByLastName);
+    let sortedByFirstName = people.sort((a, b) => a.split(',')[1] > b.split(',')[1] ? 1 : -1);
+    console.log('firstname', sortedByFirstName);
 
     // 8. Reduce Exercise
     // Sum up the instances of each of these
     const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
-
+    let dataCount = data.reduce((count, curr) => {
+      if (!count[curr]) {
+        count[curr] = 1
+      } else {
+        count[curr] ++;
+      }
+      return count;
+    }, {});
+    console.table(dataCount);
   </script>
 </body>
 </html>