Day5-

1. CSS Variables
   • 重點 :root{--xxxx:value;},
     • 使用 ex padding: var(--xxxx)
   • 可以用來抓數值或update ->document.documentElement.style.setProperty
   • 也可用scope來設定特定的value;

  const inputs = document.querySelectorAll('.controls input');

  function handleUpdate(){
    const suffix = this.dataset.sizing || '';  //補上px 且不要回傳NA
    document.documentElement.style.setProperty(`--${this.name}`,this.value+ suffix)
  }

  inputs.forEach(input => input.addEventListener('change',handleUpdate));//value變了
  inputs.forEach(input => input.addEventListener('mousemove',handleUpdate));
      //不用點擊完才會出現效果

補充: CSS variable推薦影片：

2. Array Cardio(1)-
   • fundamental javascript: array method !!! 紮實
   • filter(), reduce(), map(), sort() 等等
   • 第6,7,8題比較難,晚上再做一次

// Get your shorts on - this is an array workout!
    // ## Array Cardio Day 1

    // Some data we can work with

    const inventors = [
      { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
      { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
      { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
      { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
      { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
      { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
      { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }
    ];

    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'];

    // 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 inventory first and last names
    const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`)
    console.log(fullNames);
    // Array.prototype.sort()
    // 3. Sort the inventors by birthdate, oldest to youngest
    const order = inventors.sort(function (a, b) {
      if(a.year > b.year){return 1}else {return -1}
    })
    //cleaner

    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 live = inventors.reduce((total, inventor) => {
      return total + (inventor.passed - inventor.year);
    }, 0)
    console.log(live);
    // 5. Sort the inventors by years lived
    const oldest = inventors.sort((a,b) => (a.passed -  a.year)> (b.passed - b.year) ? -1: 1 );
    //DRY
    const oldestest = inventors.sort(function(a,b){
      const last = a.passed - a.year;
      const next = b.passed - b.year;
      return last > next ? -1:1;
    });
    console.table(oldestest)
    // 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 links = Array.from(category.querySelectorAll ('a'));
    //const links = [...category.querySelectorAll ('a')];

    //const de = links.map(link => link.textContent);

    //const containde = de.filter(streetName => streetName.includes('de') );

    //DRY
      const test = 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(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 transprotation = data.reduce(function(obj, item){
      if(!obj[item]){obj[item]= 0;}
      obj[item]++;
      return obj;
    },{})
    console.log(transprotation);