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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<title>Pokedex</title>
<link rel="stylesheet" href="style.css" />
<script src="./pokemon.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) {
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;
}
}

43
v2/pokemon.js
View File

@@ -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 = `
<div class="number-wrap">
<p class="caption-fonts">#${pokemonID}</p>
<p class="caption-fonts">#${pokemon.id}</p>
</div>
<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 class="name-wrap">
<p class="body3-fonts">#${pokemon.name}</p>
@@ -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) {