diff --git a/v2/index.html b/v2/index.html index da78462..b4aca7a 100644 --- a/v2/index.html +++ b/v2/index.html @@ -52,16 +52,39 @@
- +
- - + + +
+
+ + +
+
+ +
diff --git a/v2/pokemon.js b/v2/pokemon.js index dfc35b1..2c8c1e9 100644 --- a/v2/pokemon.js +++ b/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); - }); - } else if (nameFilter.checked) { - filteredPokemons = allPokemons.filter((pokemon) => - pokemon.name.toLowerCase().startsWith(searchTerm) - ); - } else { - filteredPokemons = allPokemons; - } + filteredPokemons = allPokemons.filter((pokemon) => { + const pokemonID = pokemon.id.toString(); + const pokemonName = pokemon.name.toLowerCase(); + return pokemonID.startsWith(searchTerm) || pokemonName.startsWith(searchTerm); + }); 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"; } diff --git a/v2/search.js b/v2/search.js index 467e966..71df705 100644 --- a/v2/search.js +++ b/v2/search.js @@ -27,6 +27,7 @@ function handleSearchCloseOnClick() { document .querySelector("#search-close-icon") .classList.remove("search-close-icon-visible"); + clearSearch(); } function handleSortIconOnClick() {