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.
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.
I also added a function to change the eventListener from desktop to mobile or vice versa if there was a dynamic screen size change.