four complete

hadaswerman · hadaswerman · commit 6fbb0518817a · 2016-12-22T15:02:13.000-05:00
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: #373737;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img{
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
+
+    .hl{
+      color: var(--base);
+    }
 
     /*
       misc styles, nothing to do with CSS variables
@@ -48,6 +63,20 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('.controls input');
+
+    function handleUpdate(){
+      // console.log(this.value);
+      console.log(this.dataset);
+      const suffix = this.dataset.sizing || '';
+      /*so you can take the px to the end of the new value below*/
+      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
+    }
+
+    inputs.forEach(input => input.addEventListener('change', handleUpdate));
+      /*does not change for when you drag back and forth, so add mousemove below*/
+    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+
   </script>
 
 </body>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
@@ -33,29 +33,106 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
+    const fifteen = inventors.filter(inventor =>
+      inventor.year >= 1500 && inventor.year < 1600)
+      console.table(fifteen);
 
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    //will always return the same number of items as you give it
+    // const fullNames = inventors.map(inventor =>
+    //   inventor.first + ' ' + inventor.last);
+    // console.log(fullNames);
+    // //or
+    const fullNames = inventors.map(inventor =>
+      `${inventor.first} ${inventor.last}`);
+    console.log(fullNames);
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    //you get two items and you have to sort those two
+
+    // const ordered = inventors.sort(function(a, b){
+    //   if (a.year > b.year){
+    //     return 1;
+    //   } else {
+    //     return -1;
+    //   }
+    // })
+
+    // console.table(ordered)
+    //or
+
+    const ordered = inventors.sort((a, b) =>
+      a.year > b.year ? 1 : -1);
+
+    console.table(ordered);
 
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const totalYears = inventors.reduce((total, inventor) => {
+      return total + (inventor.passed - inventor.year);
+      //to get the number of years they lived
+    }, 0)
+    console.log(totalYears);
 
     // 5. Sort the inventors by years lived
+    const oldest = inventors.sort(function(a, b){
+      const lastGuy = a.passed - a.year;
+      const nextGuy = b.passed - b.year;
+      return lastGuy > nextGuy ? -1 : 1;
+      // if(lastGuy > nextGuy){
+      //   return -1;
+      // } else {
+      //   return 1;
+      // }
+    })
+    console.table(oldest);
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 
+    //IN CONSOLE OF WIKI PAGE^
+    //dev tools
+    //
+// const category = document.querySelector('.mw-category');
+// const links = Array.from(category.querySelectorAll('a'));
+// //convert list of links to list of names
+// //array.from will make it into an array from the nodelist
+
+// const de = links
+//   .map(link => link.textContent)
+// //will give the text inside of each link
+//   .filter(streetName => streetName.includes('de'));
+// //will filter them out
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+    const alpha = people.sort((lastOne, nextOne) => {
+      // console.log(lastOne);
+      const [last, first] = lastOne.split(', ');
+      const [lastN, firstN] = nextOne.split(', ');
+      // console.log(last, first);
+      // console.log(lastN, firstN);
+      return last > lastN ? 1 : -1;
+    })
+      console.log(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 transportation = data.reduce(function(obj, item) {
+      if (!obj[item]){
+        obj[item] = 0;
+      }
+
+      // console.log(item);
+      obj[item] ++;
+      return obj;
+    }, {})
+      console.log(transportation);
+
   </script>
 </body>
 </html>
