Today I Learned Aug 10 - Githubissues

DAY 10 Lesson

.filter is a method you can call on any array. i.e. I want an array of all numbers greater than 10, I could: const numbersGreaterThan10 = allNumbers.filter(num => num > 10)

Basic Reminders:

To create an array, use [] i.e. const allNumbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
For functions, && = and || = or i.e. Display all the numbers that are either perfect squares or under 13 in #the perfect-squares-or-under-13 span
```
const oddNumbersPerfectorUnder13 = allNumbers.filter(
num => num < 13 || Math.sqrt(num) % 2 === 1)
```
Display all the odd perfect squares under 13 in the #odd-perfect-squares-under-13 span
```
const oddNumbersPerfectUnder13 = allNumbers.filter( num => num < 13 && Math.sqrt(num) % 2 === 1)
```
Objects: everything on the left is a “key”, and everything on the right is a “value” i.e [Key—>] Impossible Whopper: 1 [<—value]. This information can be extracted by using object.value(votes) (this will give you everything on the right of the ‘:’) or object.key(votes) (this will give you everything on the left of ‘:’

Adding the filters: HTML

First add to your HTML a div that will serve as your filter and search navigation, here called #number controls; don’t forget to add the drop down menu options the exact same way that the response is given i.e.

<div id="controls">
  <div>
    <label for="color">Color</label>
    <select id="color">
      <option>all</option>
      <option>Blue</option>
      <option>Green</option>
    </select>    
  </div>
  <div>
    <label for="search">Search</label>          
    <input id="search" type="text" autocomplete="off"/>
  </div>
</div>

Then, declare those new variables given the ids

Create a function for the filters, where we declare the dropdown for the filters and its constraints (i.e. age, location) i.e.

const teamFilter = team => {
const selectedColor = colorSelect.value
console.log(selectedColor)
const selectedFavoriteItem = favoriteItemSelect.value
const selectedName = nameSelect.value
const searchTerm = searchInput.value.toLowerCase()
return (selectedColor === "all" || team.color === selectedColor) &&
(selectedFavoriteItem === "all" || team.title === selectedFavoriteItem) &&
(selectedName === "all" || team.name === selectedName) &&
(team.name.toLowerCase().includes(searchTerm) || team.description.toLowerCase().includes(searchTerm))
}

Create a function to handle the filter inputs using map and join to transform the categories array into a single string of HTML i.e.

const handleFilterInput = () => {
const filteredteamFilter = team.filter(teamFilter)
main.innerHTML = filteredteamFilter.map(renderTeam).join("")
}

Add an event listener for the actions:

colorSelect.addEventListener('input', handleFilterInput)
nameSelect.addEventListener('input', handleFilterInput)
favoriteItemSelect.addEventListener('input', handleFilterInput)
searchInput.addEventListener('input', handleFilterInput)

CSS

Finally, stylize the filter and search bars i.e.


#controls{
margin: 5rem auto 1rem auto;
background-color: white;
padding: 1rem;
max-width: 60rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}

input, select { width: 100%; padding: 0.5rem; }

select { text-transform: capitalize; }

Using Chart.js:
1. Go to chatjs.org and click get started
2. Click on Chart JS CDN
3. Click on the `dist/.` folder and copy to clipboard the HTMl tag from the `dist/Chart.bundle.min.js`
4. Paste this HTML tag into your own HTML file
5. Create a new chart i.e.

New chart(“pie-chart”,{ type: ‘pie’, data:{} });


//We can use reference charts and data from chatjs.org
Functional example reference: https://repl.it/@andyweiss1982/TheVotesAreIn-1#script.js

Canvas is an html element that you use to draw pictures on the screen: `<canvas></canvas>`

rbi-learning / Today-I-Learned

Today I Learned Aug 10 #100