title: using select to set a filter on api data
body: <p>scratching my head on this one. I'd like to be able to apply a filter based on a  tag. I am using the poke api and have the data displaying and have it sorted by ID. What i'd like to do is have the user select the "type" if pokemon from the  tag and have the page filter based on that (keeping the sort). If the user dosnt select anything it would just show all 150. </p>
  
  <p>I apologize in an advance for being a total noob!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
          &lt;title&gt;Quick's Pokedex&lt;/title&gt;
          &lt;link rel="stylesheet" href="style.css" /&gt;
          &lt;link rel="stylesheet" href="/css/animate.css" /&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Rubik&amp;display=swap" rel="stylesheet"/&gt;
          &lt;link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css" integrity="sha384-TxKWSXbsweFt0o2WqfkfJRRNVaPdzXJ/YLqgStggBVRREXkwU7OKz+xXtqOU4u8+" crossorigin="anonymous"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="header"&gt;
              &lt;img src="/assets/img/two.png" alt="Pokemon Logo" height="500" class="animated fadeInLeftBig logo" id="logo"&gt;
          &lt;/div&gt;
          &lt;div class="container"&gt;
              &lt;h3 class="full-experience"&gt;Get the full experience!    &lt;i class="fas fa-level-down-alt"&gt;&lt;/i&gt;&lt;/h3&gt;
              &lt;audio class="audio-player" loop src="/assets/audio/pokemon.mp3" controls&gt; Error: your web browser does not support this audio player. &lt;/audio&gt;
              &lt;h1 class="quicks-h1"&gt;Quick's Pokedex&lt;/h1&gt;
              &lt;div class="sorting"&gt;
                  &lt;h2&gt;Sorting&lt;/h2&gt;
                  &lt;p&gt;Select at least one type&lt;/p&gt;
                  &lt;div class="custom-select" style="width:200px;"&gt;
                      &lt;select&gt;
                      &lt;option value="0"&gt;Select Type:&lt;/option&gt;
                      &lt;option value="1"&gt;Bug&lt;/option&gt;
                      &lt;option value="2"&gt;Dragon&lt;/option&gt;
                      &lt;option value="3"&gt;Electric&lt;/option&gt;
                      &lt;option value="4"&gt;Fairy&lt;/option&gt;
                      &lt;option value="5"&gt;Normal&lt;/option&gt;
                      &lt;option value="6"&gt;Psychic&lt;/option&gt;
                      &lt;option value="7"&gt;Fighting&lt;/option&gt;
                      &lt;option value="8"&gt;Water&lt;/option&gt;
                      &lt;option value="9"&gt;Fire&lt;/option&gt;
                      &lt;option value="10"&gt;Flying&lt;/option&gt;
                      &lt;option value="11"&gt;Ice&lt;/option&gt;
                      &lt;option value="12"&gt;Poison&lt;/option&gt;
                      &lt;option value="13"&gt;Rock&lt;/option&gt;
                      &lt;option value="14"&gt;Grass&lt;/option&gt;
                      &lt;option value="15"&gt;Ground&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;div class="custom-select" style="width:200px;"&gt;
                      &lt;select&gt;&lt;option value="16"&gt;Sort By:&lt;/option&gt;
                          &lt;option value="17"&gt;Name&lt;/option&gt;
                          &lt;option value="18"&gt;ID&lt;/option&gt;
                          &lt;/select&gt;
                &lt;/div&gt;
                &lt;br&gt;
                &lt;button class="sort-btn"&gt;GO!&lt;/button&gt;
              &lt;/div&gt;
          &lt;div class="pokedex-div"&gt;
              &lt;ul class="pokedex" id="pokedex"&gt;&lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;script src="dropdown.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the app.js
  I did make an attempt at the bottom to set up filtering but cant seem to figure it out. </p>
  
  <pre><code>// //Main API Call//
  
  const pokedex = document.getElementById('pokedex');
  const fetchPokemon = () =&gt; {
      const promises = [];
      for (let i = 1; i &lt;= 150; i++) {
          const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
          promises.push(fetch(url).then((res) =&gt; res.json()));
      }
      Promise.all(promises).then((results) =&gt; {
          const pokemon = results.map((result) =&gt; ({
              name: result.name,
              image: result.sprites['front_default'],
              type: result.types.map((type) =&gt; type.type.name).join(', '),
              id: result.id
          })).sort((a, b) =&gt; a.id &gt; b.id ? 1 : -1);
          displayPokemon(pokemon);
      });
  };
  const displayPokemon = (pokemon) =&gt; {
      const pokemonHTMLString = pokemon
          .map(
              (pokeman) =&gt; `
      &lt;li class="card"&gt;
          &lt;img class="card-image" src="${pokeman.image}"/&gt;
          &lt;h2 class="card-title"&gt;${pokeman.id}. ${pokeman.name}&lt;/h2&gt;
          &lt;p class="card-subtitle"&gt;Type: ${pokeman.type}&lt;/p&gt;
      &lt;/li&gt;
  `
          )
          .join('');
      pokedex.innerHTML = pokemonHTMLString;
  };
  fetchPokemon();
  
  const filterPokemon = pokemon.filter() =&gt; {
      const myDropDown = document.querySelector('#myDropDown')
  }
  </code></pre>
  
  <p>I also have a dropdown.js... I doubt anyone needs it but it is here:</p>
  
  <pre><code>var x, i, j, selElmnt, a, b, c;
  /* Look for any elements with the class "custom-select": */
  x = document.getElementsByClassName("custom-select");
  for (i = 0; i &lt; x.length; i++) {
    selElmnt = x[i].getElementsByTagName("select")[0];
    /* For each element, create a new DIV that will act as the selected item: */
    a = document.createElement("DIV");
    a.setAttribute("class", "select-selected");
    a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
    x[i].appendChild(a);
    /* For each element, create a new DIV that will contain the option list: */
    b = document.createElement("DIV");
    b.setAttribute("class", "select-items select-hide");
    for (j = 1; j &lt; selElmnt.length; j++) {
      /* For each option in the original select element,
      create a new DIV that will act as an option item: */
      c = document.createElement("DIV");
      c.innerHTML = selElmnt.options[j].innerHTML;
      c.addEventListener("click", function(e) {
          /* When an item is clicked, update the original select box,
          and the selected item: */
          var y, i, k, s, h;
          s = this.parentNode.parentNode.getElementsByTagName("select")[0];
          h = this.parentNode.previousSibling;
          for (i = 0; i &lt; s.length; i++) {
            if (s.options[i].innerHTML == this.innerHTML) {
              s.selectedIndex = i;
              h.innerHTML = this.innerHTML;
              y = this.parentNode.getElementsByClassName("same-as-selected");
              for (k = 0; k &lt; y.length; k++) {
                y[k].removeAttribute("class");
              }
              this.setAttribute("class", "same-as-selected");
              break;
            }
          }
          h.click();
      });
      b.appendChild(c);
    }
    x[i].appendChild(b);
    a.addEventListener("click", function(e) {
      /* When the select box is clicked, close any other select boxes,
      and open/close the current select box: */
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
    });
  }
  
  function closeAllSelect(elmnt) {
    /* A function that will close all select boxes in the document,
    except the current select box: */
    var x, y, i, arrNo = [];
    x = document.getElementsByClassName("select-items");
    y = document.getElementsByClassName("select-selected");
    for (i = 0; i &lt; y.length; i++) {
      if (elmnt == y[i]) {
        arrNo.push(i)
      } else {
        y[i].classList.remove("select-arrow-active");
      }
    }
    for (i = 0; i &lt; x.length; i++) {
      if (arrNo.indexOf(i)) {
        x[i].classList.add("select-hide");
      }
    }
  }
  
  /* If the user clicks anywhere outside the select box,
  then close all select boxes: */
  document.addEventListener("click", closeAllSelect);\
  </code></pre>