Implement sorting functionality for Pokémon by number and name in ascending and descending order

v2/index.html

@@ -52,16 +52,39 @@
                   <div>
                     <input
                       type="radio"
-                      id="number"
+                      id="number-asc"
                       name="filters"
-                      value="number"
+                      value="number-asc"
                       checked
                     />
-                    <label for="number" class="body3-fonts">Number</label>
+                    <label for="number-asc" class="body3-fonts">Number (Lowest to Highest)</label>
                   </div>
                   <div>
-                    <input type="radio" id="name" name="filters" value="name" />
-                    <label for="name" class="body3-fonts">Name</label>
+                    <input
+                      type="radio"
+                      id="number-desc"
+                      name="filters"
+                      value="number-desc"
+                    />
+                    <label for="number-desc" class="body3-fonts">Number (Highest to Lowest)</label>
+                  </div>
+                  <div>
+                    <input
+                      type="radio"
+                      id="name-asc"
+                      name="filters"
+                      value="name-asc"
+                    />
+                    <label for="name-asc" class="body3-fonts">Name (A-Z)</label>
+                  </div>
+                  <div>
+                    <input
+                      type="radio"
+                      id="name-desc"
+                      name="filters"
+                      value="name-desc"
+                    />
+                    <label for="name-desc" class="body3-fonts">Name (Z-A)</label>
                   </div>
                 </div>
               </div>

v2/pokemon.js

@@ -2,11 +2,14 @@ const MAX_POKEMON = 151;
 const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
 const listWrapper = document.querySelector(".list-wrapper");
 const searchInput = document.querySelector("#search-input");
-const numberFilter = document.querySelector("#number");
-const nameFilter = document.querySelector("#name");
+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");
 
 let allPokemons = [];
+let filteredPokemons = [];
 
 document.addEventListener("DOMContentLoaded", () => {
   const cachedData = localStorage.getItem("pokemons");
@@ -15,7 +18,8 @@ document.addEventListener("DOMContentLoaded", () => {
   if (cachedData && cacheTimestamp && (Date.now() - cacheTimestamp) < CACHE_DURATION) {
     allPokemons = JSON.parse(cachedData);
     console.log("Loaded Pokémon data from cache:", allPokemons);
-    displayPokemons(allPokemons);
+    filteredPokemons = allPokemons;
+    displayPokemons(filteredPokemons);
   } else {
     fetchPokemons();
   }
@@ -31,7 +35,8 @@ function fetchPokemons() {
         localStorage.setItem("pokemons", JSON.stringify(allPokemons));
         localStorage.setItem("pokemons_timestamp", Date.now().toString());
         console.log("Fetched and cached Pokémon data:", allPokemons);
-        displayPokemons(allPokemons);
+        filteredPokemons = allPokemons;
+        displayPokemons(filteredPokemons);
       } else {
         console.error("Unexpected response format:", data);
       }
@@ -146,24 +151,20 @@ function preloadHighResImage(img) {
 }
 
 searchInput.addEventListener("keyup", handleSearch);
+numberAscFilter.addEventListener("change", handleSort);
+numberDescFilter.addEventListener("change", handleSort);
+nameAscFilter.addEventListener("change", handleSort);
+nameDescFilter.addEventListener("change", handleSort);
 
 function handleSearch() {
   const searchTerm = searchInput.value.toLowerCase();
   console.log("Handling search with term:", searchTerm);
-  let filteredPokemons;
 
-  if (numberFilter.checked) {
   filteredPokemons = allPokemons.filter((pokemon) => {
     const pokemonID = pokemon.id.toString();
-      return pokemonID.startsWith(searchTerm);
+    const pokemonName = pokemon.name.toLowerCase();
+    return pokemonID.startsWith(searchTerm) || pokemonName.startsWith(searchTerm);
   });
-  } else if (nameFilter.checked) {
-    filteredPokemons = allPokemons.filter((pokemon) =>
-      pokemon.name.toLowerCase().startsWith(searchTerm)
-    );
-  } else {
-    filteredPokemons = allPokemons;
-  }
 
   displayPokemons(filteredPokemons);
 
@@ -174,12 +175,27 @@ function handleSearch() {
   }
 }
 
+function handleSort() {
+  if (numberAscFilter.checked) {
+    filteredPokemons.sort((a, b) => a.id - b.id);
+  } else if (numberDescFilter.checked) {
+    filteredPokemons.sort((a, b) => b.id - a.id);
+  } else if (nameAscFilter.checked) {
+    filteredPokemons.sort((a, b) => a.name.localeCompare(b.name));
+  } else if (nameDescFilter.checked) {
+    filteredPokemons.sort((a, b) => b.name.localeCompare(a.name));
+  }
+
+  displayPokemons(filteredPokemons);
+}
+
 const closeButton = document.querySelector(".search-close-icon");
 closeButton.addEventListener("click", clearSearch);
 
 function clearSearch() {
   console.log("Clearing search input and displaying all Pokémon...");
   searchInput.value = "";
-  displayPokemons(allPokemons);
+  filteredPokemons = allPokemons;
+  displayPokemons(filteredPokemons);
   notFoundMessage.style.display = "none";
 }

v2/search.js

@@ -27,6 +27,7 @@ function handleSearchCloseOnClick() {
   document
     .querySelector("#search-close-icon")
     .classList.remove("search-close-icon-visible");
+  clearSearch();
 }
 
 function handleSortIconOnClick() {