alvin/pokedex
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/pokedex.git synced 2026-03-06 21:29:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
vista-man
2025-03-27 09:08:41 +01:00
parent 7d9ce536fc
commit d5a242e7ea
3 changed files with 273 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
v2/index.html
View File

@@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pokedex</title> <title>Pokedex</title>
<link rel="stylesheet" href="./style.css" /> <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="./pokemon.js" defer></script>
<script src="./search.js" defer></script> <script src="./search.js" defer></script>
<link rel="icon" href="./assets/pokeball.png" type="image/x-icon"> <link rel="icon" href="./assets/pokeball.png" type="image/x-icon">

88
v2/pokemon.js
View File

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

28
v2/search.js
View File

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