Refactor Pokémon detail display and improve error handling in data fetching

This commit is contained in:
vista-man
2025-03-27 11:38:52 +01:00
parent e7076acdd3
commit e2433e12a1
5 changed files with 82 additions and 255 deletions

View File

@@ -25,6 +25,9 @@ async function loadPokemon(id) {
throw new Error(pokemon.error);
}
// Ensure the data is logged for debugging
console.log("Fetched Pokémon data:", pokemon);
const abilitiesWrapper = document.querySelector(
".pokemon-detail-wrap .pokemon-detail.move"
);
@@ -32,26 +35,22 @@ async function loadPokemon(id) {
if (currentPokemonId === id) {
displayPokemonDetails(pokemon);
document.querySelector(".body3-fonts.pokemon-description").textContent =
pokemon.flavor_text;
// Ensure flavor text is updated
document.querySelector(".body3-fonts.pokemon-description").textContent =
pokemon.flavor_text || "No description available.";
// Update navigation arrows
const [leftArrow, rightArrow] = ["#leftArrow", "#rightArrow"].map((sel) =>
document.querySelector(sel)
);
leftArrow.removeEventListener("click", navigatePokemon);
rightArrow.removeEventListener("click", navigatePokemon);
leftArrow.classList.toggle("hidden", id === 1);
rightArrow.classList.toggle("hidden", id === 1050);
if (id !== 1) {
leftArrow.addEventListener("click", () => {
navigatePokemon(id - 1);
});
}
if (id !== 1050) {
rightArrow.addEventListener("click", () => {
navigatePokemon(id + 1);
});
}
leftArrow.onclick = id > 1 ? () => navigatePokemon(id - 1) : null;
rightArrow.onclick = id < 1050 ? () => navigatePokemon(id + 1) : null;
// Update URL without reloading
window.history.pushState({}, "", `./detail.html?id=${id}`);
}