Improve search functionality by encapsulating event listeners in an IIFE and enhancing visibility toggle for the search close icon

v2/index.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Pokedex</title>
     <link rel="stylesheet" href="./style.css" />
+    <link rel="preload" href="./style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="./style.css"></noscript>
     <script src="./pokemon.js" defer></script>
     <script src="./search.js" defer></script>
     <link rel="icon" href="./assets/pokeball.png" type="image/x-icon">

v2/pokemon.js

@@ -1,18 +1,19 @@
-const MAX_POKEMON = 1050;
-const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
-const listWrapper = document.querySelector(".list-wrapper");
-const searchInput = document.querySelector("#search-input");
-const numberAscFilter = document.querySelector("#number-asc");
-const numberDescFilter = document.querySelector("#number-desc");
-const nameAscFilter = document.querySelector("#name-asc");
-const nameDescFilter = document.querySelector("#name-desc");
-const notFoundMessage = document.querySelector("#not-found-message");
-const competitorsWrapper = document.querySelector("#competitors-wrapper");
+(() => {
+  const MAX_POKEMON = 1050;
+  const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
+  const listWrapper = document.querySelector(".list-wrapper");
+  const searchInput = document.querySelector("#search-input");
+  const numberAscFilter = document.querySelector("#number-asc");
+  const numberDescFilter = document.querySelector("#number-desc");
+  const nameAscFilter = document.querySelector("#name-asc");
+  const nameDescFilter = document.querySelector("#name-desc");
+  const notFoundMessage = document.querySelector("#not-found-message");
+  const competitorsWrapper = document.querySelector("#competitors-wrapper");
 
-let allPokemons = [];
-let filteredPokemons = [];
+  let allPokemons = [];
+  let filteredPokemons = [];
 
-document.addEventListener("DOMContentLoaded", () => {
+  document.addEventListener("DOMContentLoaded", () => {
     const cachedData = localStorage.getItem("pokemons");
     const cacheTimestamp = localStorage.getItem("pokemons_timestamp");
 
@@ -25,9 +26,9 @@ document.addEventListener("DOMContentLoaded", () => {
     } else {
       fetchPokemons();
     }
-});
+  });
 
-function fetchPokemons() {
+  function fetchPokemons() {
     console.log("Fetching Pokémon data from server...");
     fetch(`./get-pokemon.php`)
       .then((response) => response.text())
@@ -53,9 +54,9 @@ function fetchPokemons() {
       .catch((error) => {
         console.error("Error fetching Pokémon data:", error);
       });
-}
+  }
 
-async function fetchPokemonDataBeforeRedirect(id) {
+  async function fetchPokemonDataBeforeRedirect(id) {
     try {
       console.log(`Fetching data for Pokémon ID ${id} before redirect...`);
       const response = await fetch(`./get-pokemon.php?id=${id}`);
@@ -75,9 +76,9 @@ async function fetchPokemonDataBeforeRedirect(id) {
       console.error(`Failed to fetch Pokémon data before redirect for ID ${id}:`, error);
       return false;
     }
-}
+  }
 
-function displayPokemons(pokemons) {
+  function displayPokemons(pokemons) {
     console.log("Displaying Pokémon data:", pokemons);
     listWrapper.innerHTML = "";
 
@@ -109,9 +110,9 @@ function displayPokemons(pokemons) {
     });
 
     lazyLoadImages();
-}
+  }
 
-function lazyLoadImages() {
+  function lazyLoadImages() {
     console.log("Initializing lazy loading for images...");
     const images = document.querySelectorAll('.img-wrap img[data-src]');
     const config = {
@@ -132,9 +133,9 @@ function lazyLoadImages() {
     images.forEach(image => {
       observer.observe(image);
     });
-}
+  }
 
-function preloadLowResImage(img) {
+  function preloadLowResImage(img) {
     const srcLow = img.getAttribute('data-src-low');
     if (!srcLow) {
       return;
@@ -142,9 +143,9 @@ function preloadLowResImage(img) {
     console.log("Preloading low-resolution image:", srcLow);
     img.src = srcLow;
     preloadHighResImage(img);
-}
+  }
 
-function preloadHighResImage(img) {
+  function preloadHighResImage(img) {
     const src = img.getAttribute('data-src');
     if (!src) {
       return;
@@ -157,15 +158,15 @@ function preloadHighResImage(img) {
         img.src = src;
       }, 2000); // Wait for 2 seconds before switching to high-resolution image
     };
-}
+  }
 
-searchInput.addEventListener("keyup", handleSearch);
-numberAscFilter.addEventListener("change", handleSort);
-numberDescFilter.addEventListener("change", handleSort);
-nameAscFilter.addEventListener("change", handleSort);
-nameDescFilter.addEventListener("change", handleSort);
+  searchInput.addEventListener("keyup", handleSearch);
+  numberAscFilter.addEventListener("change", handleSort);
+  numberDescFilter.addEventListener("change", handleSort);
+  nameAscFilter.addEventListener("change", handleSort);
+  nameDescFilter.addEventListener("change", handleSort);
 
-function handleSearch() {
+  function handleSearch() {
     const searchTerm = searchInput.value.toLowerCase();
     console.log("Handling search with term:", searchTerm);
 
@@ -182,9 +183,9 @@ function handleSearch() {
     } else {
       notFoundMessage.style.display = "none";
     }
-}
+  }
 
-function handleSort() {
+  function handleSort() {
     if (numberAscFilter.checked) {
       filteredPokemons.sort((a, b) => a.id - b.id);
     } else if (numberDescFilter.checked) {
@@ -196,20 +197,20 @@ function handleSort() {
     }
 
     displayPokemons(filteredPokemons);
-}
+  }
 
-const closeButton = document.querySelector(".search-close-icon");
-closeButton.addEventListener("click", clearSearch);
+  const closeButton = document.querySelector(".search-close-icon");
+  closeButton.addEventListener("click", clearSearch);
 
-function clearSearch() {
+  function clearSearch() {
     console.log("Clearing search input and displaying all Pokémon...");
     searchInput.value = "";
     filteredPokemons = allPokemons.filter(pokemon => !pokemon.deleted);
     displayPokemons(filteredPokemons);
     notFoundMessage.style.display = "none";
-}
+  }
 
-function fetchCompetitors() {
+  function fetchCompetitors() {
     console.log("Fetching competitors data from server...");
     fetch(`./get-competitors.php`)
       .then((response) => response.text())
@@ -225,9 +226,9 @@ function fetchCompetitors() {
       .catch((error) => {
         console.error("Error fetching competitors data:", error);
       });
-}
+  }
 
-function displayCompetitors(competitors) {
+  function displayCompetitors(competitors) {
     competitorsWrapper.innerHTML = "";
 
     competitors.forEach((competitor) => {
@@ -247,4 +248,5 @@ function displayCompetitors(competitors) {
 
       competitorsWrapper.appendChild(listItem);
     });
-}
+  }
+})();

v2/search.js

@@ -1,14 +1,15 @@
-const inputElement = document.querySelector("#search-input");
-const searchIcon = document.querySelector("#search-close-icon");
-const sortWrapper = document.querySelector(".sort-wrapper");
+(() => {
+  const inputElement = document.querySelector("#search-input");
+  const searchIcon = document.querySelector("#search-close-icon");
+  const sortWrapper = document.querySelector(".sort-wrapper");
 
-inputElement.addEventListener("input", () => {
+  inputElement.addEventListener("input", () => {
     handleInputChange(inputElement);
-});
-searchIcon.addEventListener("click", handleSearchCloseOnClick);
-sortWrapper.addEventListener("click", handleSortIconOnClick);
+  });
+  searchIcon.addEventListener("click", handleSearchCloseOnClick);
+  sortWrapper.addEventListener("click", handleSortIconOnClick);
 
-function handleInputChange(inputElement) {
+  function handleInputChange(inputElement) {
     const inputValue = inputElement.value;
 
     if (inputValue !== "") {
@@ -20,19 +21,20 @@ function handleInputChange(inputElement) {
         .querySelector("#search-close-icon")
         .classList.remove("search-close-icon-visible");
     }
-}
+  }
 
-function handleSearchCloseOnClick() {
+  function handleSearchCloseOnClick() {
     document.querySelector("#search-input").value = "";
     document
       .querySelector("#search-close-icon")
       .classList.remove("search-close-icon-visible");
     clearSearch();
-}
+  }
 
-function handleSortIconOnClick() {
+  function handleSortIconOnClick() {
     document
       .querySelector(".filter-wrapper")
       .classList.toggle("filter-wrapper-open");
     document.querySelector("body").classList.toggle("filter-wrapper-overlay");
-}
+  }
+})();