Hey, for whatever reason I can’t fulfill steps 19 and 20 which are:
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" .
When the #search-input element contains a valid Pokemon id and the #search-button element is clicked, the UI should be filled with the correct data.
I also get these errors in the console when I run the tests:
[Error: TypeError: Cannot read properties of undefined (reading ‘trim’)]
[Error: AssertionError: expected to have a length of 2 but got +0]
index.html
<!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>
<h1>Pokémon Search App</h1>
<input type="text" id="search-input" placeholder="Enter Pokémon name or ID" required>
<button id="search-button">Search</button>
<div id="pokemon-info">
<p id="pokemon-name" class="pokemon-stat"></p>
<p id="pokemon-id" class="pokemon-stat"></p>
<p id="weight" class="pokemon-stat"></p>
<p id="height" class="pokemon-stat"></p>
<p id="types" class="pokemon-stat"></p>
<p id="hp" class="pokemon-stat"></p>
<p id="attack" class="pokemon-stat"></p>
<p id="defense" class="pokemon-stat"></p>
<p id="special-attack" class="pokemon-stat"></p>
<p id="special-defense" class="pokemon-stat"></p>
<p id="speed" class="pokemon-stat"></p>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
document.getElementById("search-button").addEventListener("click", () => {
const query = document.getElementById("search-input").value.trim().toLowerCase();
if (!query) {
return;
}
const url = `https://pokeapi.co/api/v2/pokemon/${query}`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error("Pokémon not found");
}
return response.json();
})
.then(data => {
updatePokemonInfo(data);
})
.catch(error => {
if (error.message === "Pokémon not found") {
alert(error.message);
} else {
alert("Pokémon not found");
}
clearPokemonInfo();
});
});
function updatePokemonInfo(data) {
document.getElementById("pokemon-name").innerText = data.name.toUpperCase();
document.getElementById("pokemon-id").innerText = `#${data.id}`;
document.getElementById("weight").innerText = `Weight: ${data.weight}`;
document.getElementById("height").innerText = `Height: ${data.height}`;
document.getElementById("hp").innerText = data.stats[0].base_stat;
document.getElementById("attack").innerText = data.stats[1].base_stat;
document.getElementById("defense").innerText = data.stats[2].base_stat;
document.getElementById("special-attack").innerText = data.stats[3].base_stat;
document.getElementById("special-defense").innerText = data.stats[4].base_stat;
document.getElementById("speed").innerText = data.stats[5].base_stat;
const typesContainer = document.getElementById("types");
typesContainer.innerHTML = "";
data.types.forEach(typeInfo => {
const typeElement = document.createElement("p");
typeElement.innerText = typeInfo.type.name.toUpperCase();
typesContainer.appendChild(typeElement);
});
let sprite = document.getElementById("sprite");
if (!sprite) {
sprite = document.createElement("img");
sprite.id = "sprite";
document.getElementById("pokemon-info").appendChild(sprite);
}
sprite.src = data.sprites.front_default;
document.getElementById("pokemon-info").style.display = "flex";
}
function clearPokemonInfo() {
document.getElementById("pokemon-name").innerText = "";
document.getElementById("pokemon-id").innerText = "";
document.getElementById("weight").innerText = "";
document.getElementById("height").innerText = "";
document.getElementById("hp").innerText = "";
document.getElementById("attack").innerText = "";
document.getElementById("defense").innerText = "";
document.getElementById("special-attack").innerText = "";
document.getElementById("special-defense").innerText = "";
document.getElementById("speed").innerText = "";
document.getElementById("types").innerHTML = "";
const sprite = document.getElementById("sprite");
if (sprite) {
sprite.remove();
}
document.getElementById("pokemon-info").style.display = "none";
}