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

Refactor Pokémon data fetching to use local PHP script and update HTML title

Browse Source
This commit is contained in:
vista-man
2025-03-25 11:04:56 +01:00
parent d937485baa
commit da85c00da6
4 changed files with 69 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
v2/get-pokemon.php Normal file
View File

@@ -0,0 +1,36 @@
<?php
$servername = "localhost:3306";
$username = "database1";
$password = "181t$1lJg";
$dbname = "pokedex1";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->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();
?>

2
v2/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Pokedex</title>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<script src="./pokemon.js" defer></script> <script src="./pokemon.js" defer></script>
<script src="./search.js" defer></script> <script src="./search.js" defer></script>

20
v2/pokemon-detail.js
View File

@@ -15,14 +15,13 @@ document.addEventListener("DOMContentLoaded", () => {
async function loadPokemon(id) { async function loadPokemon(id) {
try { try {
const [pokemon, pokemonSpecies] = await Promise.all([ const pokemon = await fetch(`./get-pokemon.php?id=${id}`).then((res) =>
fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then((res) => res.json()
res.json() );
),
fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`).then((res) => if (pokemon.error) {
res.json() throw new Error(pokemon.error);
), }
]);
const abilitiesWrapper = document.querySelector( const abilitiesWrapper = document.querySelector(
".pokemon-detail-wrap .pokemon-detail.move" ".pokemon-detail-wrap .pokemon-detail.move"
@@ -31,9 +30,8 @@ async function loadPokemon(id) {
if (currentPokemonId === id) { if (currentPokemonId === id) {
displayPokemonDetails(pokemon); displayPokemonDetails(pokemon);
const flavorText = getEnglishFlavorText(pokemonSpecies);
document.querySelector(".body3-fonts.pokemon-description").textContent = document.querySelector(".body3-fonts.pokemon-description").textContent =
flavorText; pokemon.flavor_text;
const [leftArrow, rightArrow] = ["#leftArrow", "#rightArrow"].map((sel) => const [leftArrow, rightArrow] = ["#leftArrow", "#rightArrow"].map((sel) =>
document.querySelector(sel) document.querySelector(sel)
@@ -57,7 +55,7 @@ async function loadPokemon(id) {
return true; return true;
} catch (error) { } 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; return false;
} }
} }

43
v2/pokemon.js
View File

@@ -7,42 +7,45 @@ const notFoundMessage = document.querySelector("#not-found-message");
let allPokemons = []; let allPokemons = [];
fetch(`https://pokeapi.co/api/v2/pokemon?limit=${MAX_POKEMON}`) fetch(`./get-pokemon.php`)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
allPokemons = data.results; if (Array.isArray(data)) {
displayPokemons(allPokemons); allPokemons = data;
displayPokemons(allPokemons);
} else {
console.error("Unexpected response format:", data);
}
}); });
async function fetchPokemonDataBeforeRedirect(id) { async function fetchPokemonDataBeforeRedirect(id) {
try { try {
const [pokemon, pokemonSpecies] = await Promise.all([ const pokemon = await fetch(`./get-pokemon.php?id=${id}`).then((res) =>
fetch(`https://pokeapi.co/api/v2/pokemon/${id}`).then((res) => res.json()
res.json() );
),
fetch(`https://pokeapi.co/api/v2/pokemon-species/${id}`).then((res) => if (pokemon.error) {
res.json() throw new Error(pokemon.error);
), }
]);
return true; return true;
} catch (error) { } 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 = ""; listWrapper.innerHTML = "";
pokemon.forEach((pokemon) => { pokemons.forEach((pokemon) => {
const pokemonID = pokemon.url.split("/")[6];
const listItem = document.createElement("div"); const listItem = document.createElement("div");
listItem.className = "list-item"; listItem.className = "list-item";
listItem.innerHTML = ` listItem.innerHTML = `
<div class="number-wrap"> <div class="number-wrap">
<p class="caption-fonts">#${pokemonID}</p> <p class="caption-fonts">#${pokemon.id}</p>
</div> </div>
<div class="img-wrap"> <div class="img-wrap">
<img src="https://raw.githubusercontent.com/pokeapi/sprites/master/sprites/pokemon/other/dream-world/${pokemonID}.svg" alt="${pokemon.name}" /> <img src="${pokemon.image_url}" alt="${pokemon.name}" />
</div> </div>
<div class="name-wrap"> <div class="name-wrap">
<p class="body3-fonts">#${pokemon.name}</p> <p class="body3-fonts">#${pokemon.name}</p>
@@ -50,9 +53,9 @@ function displayPokemons(pokemon) {
`; `;
listItem.addEventListener("click", async () => { listItem.addEventListener("click", async () => {
const success = await fetchPokemonDataBeforeRedirect(pokemonID); const success = await fetchPokemonDataBeforeRedirect(pokemon.id);
if (success) { 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) { if (numberFilter.checked) {
filteredPokemons = allPokemons.filter((pokemon) => { filteredPokemons = allPokemons.filter((pokemon) => {
const pokemonID = pokemon.url.split("/")[6]; const pokemonID = pokemon.id.toString();
return pokemonID.startsWith(searchTerm); return pokemonID.startsWith(searchTerm);
}); });
} else if (nameFilter.checked) { } else if (nameFilter.checked) {