My code is failing the “When the #search-input
element contains an invalid Pokemon name and the #search-button
element is clicked, an alert should appear with the text "Pokémon not found"
.” test and I’m not sure why. It seems to be working when I run it…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokémon Search App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input id="search-input" placeholder="Search criteria" required>
<button id="search-button">Search</button>
<div id="pokemon-name"></div>
<div id="pokemon-id"></div>
<div id="weight"></div>
<div id="height"></div>
<div id="types"></div>
<div id="hp"></div>
<div id="attack"></div>
<div id="defense"></div>
<div id="special-attack"></div>
<div id="special-defense"></div>
<div id="speed"></div>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const pokemonNameDiv = document.getElementById("pokemon-name");
const pokemonIdDiv = document.getElementById("pokemon-id");
const weightDiv = document.getElementById("weight");
const heightDiv = document.getElementById("height");
const typesDiv = document.getElementById("types");
const hpDiv = document.getElementById("hp");
const attackDiv = document.getElementById("attack");
const defenseDiv = document.getElementById("defense");
const specialAttackDiv = document.getElementById("special-attack");
const specialDefenseDiv = document.getElementById("special-defense");
const speedDiv = document.getElementById("speed");
const output = document.getElementById("output");
const allPokemonData = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";
let allPokemon = [];
fetch(allPokemonData)
.then((res) => res.json())
.then((data) => {
allPokemon = data.results;
})
.catch((err) => console.error(`There was an error: ${err}`));
const getPokemonSpecs = (pokemon) => {
const pokemonDataUrl = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemon.id}`;
fetch(pokemonDataUrl)
.then((res) => res.json())
.then((data) => {
pokemonNameDiv.innerHTML = data.name.toUpperCase();
pokemonIdDiv.innerHTML = `#${data.id}`;
weightDiv.innerHTML = `Weight: ${data.weight}`;
heightDiv.innerHTML = `Height: ${data.height}`;
hpDiv.innerHTML = data.stats[0].base_stat;
attackDiv.innerHTML = data.stats[1].base_stat;
defenseDiv.innerHTML = data.stats[2].base_stat;
specialAttackDiv.innerHTML = data.stats[3].base_stat;
specialDefenseDiv.innerHTML = data.stats[4].base_stat;
speedDiv.innerHTML = data.stats[5].base_stat;
output.innerHTML = `
<img id="sprite" src="${data.sprites.front_default}">
`;
types.innerHTML += data.types.map(el => `<span>${el.type.name.toUpperCase()}</span>`).join("");
})
.catch((err) => console.error(`There was an error: ${err}`));
}
searchButton.addEventListener("click", () => {
const searchCriteria = searchInput.value.toLowerCase();
typesDiv.innerHTML = "";
const pokemon = allPokemon.find((el) => el.name === searchCriteria || el.id === parseInt(searchCriteria));
if (!pokemon) {
alert("Pokémon not found");
return;
}
getPokemonSpecs(pokemon);
});