chingu-voyages / v48-tier1-team-05

A dinosaur app for viewing detailed information about your favorite dinosaurs | Chingu Voyage-48 | https://chingu.io/
https://chingu-voyages.github.io/v48-tier1-team-05/
4 stars 0 forks source link

Fix mobile search #178

Closed terrifricker closed 5 months ago

terrifricker commented 5 months ago

The mobile search needed its own eventListener. Adding the eventListener to both the desktop search and mobile search bars was moved up into the fetch function so they weren't set until the dinosaur data was fetched.

    // set initial search eventListener according to screen size
    // and call onSearch for initial screen size
    if (window.innerWidth < 500) {
      const searchInput = document.getElementById("mobileDinoSearch");
      searchInput.addEventListener("input", function() {
        onSearch(allDinosaurs, 'mobileDinoSearch');
      });
      onSearch(allDinosaurs, 'mobileDinoSearch');
    } else {
      const searchInput = document.getElementById("dinoSearch");
      searchInput.addEventListener("input", function() {
        onSearch(allDinosaurs, 'dinoSearch');
      });
      onSearch(allDinosaurs, 'dinoSearch');
    }

I also added a function to change the eventListener from desktop to mobile or vice versa if there was a dynamic screen size change.

window.onresize = function() {
  if (window.innerWidth < 500) {
    const searchInput = document.getElementById("mobileDinoSearch");
    searchInput.addEventListener("input", function() {
      onSearch(allDinosaurs, 'mobileDinoSearch');
    });
  } else {
    const searchInput = document.getElementById("dinoSearch");
    searchInput.addEventListener("input", function() {
      onSearch(allDinosaurs, 'dinoSearch');
    });
  }
}