From da85c00da6373f279cd172bc611338d612aa1650 Mon Sep 17 00:00:00 2001 From: vista-man <524715@vistacollege.nl> Date: Tue, 25 Mar 2025 11:04:56 +0100 Subject: [PATCH] =?UTF-8?q?Refactor=20Pok=C3=A9mon=20data=20fetching=20to?= =?UTF-8?q?=20use=20local=20PHP=20script=20and=20update=20HTML=20title?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- v2/get-pokemon.php | 36 ++++++++++++++++++++++++++++++++++++ v2/index.html | 2 +- v2/pokemon-detail.js | 20 +++++++++----------- v2/pokemon.js | 43 +++++++++++++++++++++++-------------------- 4 files changed, 69 insertions(+), 32 deletions(-) create mode 100644 v2/get-pokemon.php diff --git a/v2/get-pokemon.php b/v2/get-pokemon.php new file mode 100644 index 0000000..c32ed15 --- /dev/null +++ b/v2/get-pokemon.php @@ -0,0 +1,36 @@ +connect_error) { + die("Connection failed: " . $conn->connect_error); +} + +if (isset($_GET['id'])) { + $id = intval($_GET['id']); + $sql = "SELECT * FROM pokemon WHERE id = $id"; + $result = $conn->query($sql); + + if ($result->num_rows > 0) { + $pokemon = $result->fetch_assoc(); + echo json_encode($pokemon); + } else { + echo json_encode(["error" => "No Pokémon found"]); + } +} else { + $sql = "SELECT * FROM pokemon"; + $result = $conn->query($sql); + + $pokemons = []; + while ($row = $result->fetch_assoc()) { + $pokemons[] = $row; + } + echo json_encode($pokemons); +} + +$conn->close(); +?> diff --git a/v2/index.html b/v2/index.html index 0bd2fe2..56c03a9 100644 --- a/v2/index.html +++ b/v2/index.html @@ -3,7 +3,7 @@ - Document + Pokedex diff --git a/v2/pokemon-detail.js b/v2/pokemon-detail.js index 62c74a8..a8b8f7f 100644 --- a/v2/pokemon-detail.js +++ b/v2/pokemon-detail.js @@ -15,14 +15,13 @@ document.addEventListener("DOMContentLoaded", () => { async function loadPokemon(id) { try { - const [pokemon, pokemonSpecies] = await Promise.all([ - fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then((res) => - res.json() - ), - fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`).then((res) => - res.json() - ), - ]); + const pokemon = await fetch(`./get-pokemon.php?id=${id}`).then((res) => + res.json() + ); + + if (pokemon.error) { + throw new Error(pokemon.error); + } const abilitiesWrapper = document.querySelector( ".pokemon-detail-wrap .pokemon-detail.move" @@ -31,9 +30,8 @@ async function loadPokemon(id) { if (currentPokemonId === id) { displayPokemonDetails(pokemon); - const flavorText = getEnglishFlavorText(pokemonSpecies); document.querySelector(".body3-fonts.pokemon-description").textContent = - flavorText; + pokemon.flavor_text; const [leftArrow, rightArrow] = ["#leftArrow", "#rightArrow"].map((sel) => document.querySelector(sel) @@ -57,7 +55,7 @@ async function loadPokemon(id) { return true; } catch (error) { - console.error("An error occured while fetching Pokemon data:", error); + console.error("An error occurred while fetching Pokémon data:", error); return false; } } diff --git a/v2/pokemon.js b/v2/pokemon.js index d66e4d0..4f96be6 100644 --- a/v2/pokemon.js +++ b/v2/pokemon.js @@ -7,42 +7,45 @@ const notFoundMessage = document.querySelector("#not-found-message"); let allPokemons = []; -fetch(`https://pokeapi.co/api/v2/pokemon?limit=${MAX_POKEMON}`) +fetch(`./get-pokemon.php`) .then((response) => response.json()) .then((data) => { - allPokemons = data.results; - displayPokemons(allPokemons); + if (Array.isArray(data)) { + allPokemons = data; + displayPokemons(allPokemons); + } else { + console.error("Unexpected response format:", data); + } }); async function fetchPokemonDataBeforeRedirect(id) { try { - const [pokemon, pokemonSpecies] = await Promise.all([ - fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then((res) => - res.json() - ), - fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`).then((res) => - res.json() - ), - ]); + const pokemon = await fetch(`./get-pokemon.php?id=${id}`).then((res) => + res.json() + ); + + if (pokemon.error) { + throw new Error(pokemon.error); + } + return true; } catch (error) { - console.error("Failed to fetch Pokemon data before redirect"); + console.error("Failed to fetch Pokémon data before redirect"); } } -function displayPokemons(pokemon) { +function displayPokemons(pokemons) { listWrapper.innerHTML = ""; - pokemon.forEach((pokemon) => { - const pokemonID = pokemon.url.split("/")[6]; + pokemons.forEach((pokemon) => { const listItem = document.createElement("div"); listItem.className = "list-item"; listItem.innerHTML = `
-

#${pokemonID}

+

#${pokemon.id}

- ${pokemon.name} + ${pokemon.name}

#${pokemon.name}

@@ -50,9 +53,9 @@ function displayPokemons(pokemon) { `; listItem.addEventListener("click", async () => { - const success = await fetchPokemonDataBeforeRedirect(pokemonID); + const success = await fetchPokemonDataBeforeRedirect(pokemon.id); if (success) { - window.location.href = `./detail.html?id=${pokemonID}`; + window.location.href = `./detail.html?id=${pokemon.id}`; } }); @@ -68,7 +71,7 @@ function handleSearch() { if (numberFilter.checked) { filteredPokemons = allPokemons.filter((pokemon) => { - const pokemonID = pokemon.url.split("/")[6]; + const pokemonID = pokemon.id.toString(); return pokemonID.startsWith(searchTerm); }); } else if (nameFilter.checked) {