Tell us what’s happening:
This test case is failing, although the image gets appended.
When the #search-input element contains the value 94 and the #search-button element is clicked, you should add an img element with the id of "sprite" and the src set to the Pokémon’s front_default sprite to the page.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8"></meta>
<title>Pokemon Search</title>
</head>
<body>
<form>
<input id='search-input' type='text' required />
<button id='search-button' type='submit' >Search</button>
</form>
<div id='pokemon-metadata'>
<p id='pokemon-name'></p>
<p id='pokemon-id'></p>
<p id='weight'></p>
<p id='height'></p>
<p id='types'></p>
<p id='hp'></p>
<p id='attack'></p>
<p id='defense'></p>
<p id='special-attack'></p>
<p id='special-defense'></p>
<p id='speed'></p>
</div>
</body>
<script src='./script.js'></script>
</html>
/* file: styles.css */
/* file: script.js */
console.log("cons");
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const pokeName = document.getElementById("pokemon-name");
const pokeId = document.getElementById("pokemon-id");
const pokeWeight = document.getElementById("weight");
const pokeHeight = document.getElementById("height");
const pokeTypes = document.getElementById("types");
types.textContent = '';
const pokeHp = document.getElementById("hp");
const pokeAttack = document.getElementById("attack");
const pokeDefense = document.getElementById("defense");
const specialAttack = document.getElementById("special-attack");
const specialDefense = document.getElementById("special-defense");
const pokeSpeed = document.getElementById("speed");
const searched = () => {
pokeTypes.innerHTML = "";
if(searchInput.value === "Red") {
alert("Pokémon not found")
}
fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchInput.value.toLowerCase()}`)
.then(response => response.json())
.then(({ name, id, weight, height, sprites, stats, types }) => {
pokeName.innerText = name;
pokeId.innerText = id;
pokeWeight.innerText = weight;
pokeHeight.innerText = height;
pokeHp.innerText = stats[0].base_stat;
pokeAttack.innerText = stats[1].base_stat;
pokeDefense.innerText = stats[2].base_stat;
specialAttack.innerText = stats[3].base_stat;
specialDefense.innerText = stats[4].base_stat;
pokeSpeed.innerText = stats[5].base_stat;
const imgEl = document.createElement("img");
imgEl.id = 'sprite';
imgEl.src = sprites.front_default;
document.getElementById("pokemon-metadata").appendChild(imgEl);
types.forEach(({ type }) => {
const p = document.createElement('p');
p.textContent = type.name;
pokeTypes.appendChild(p);
});
})
.catch(error => {
console.error('Error:', error);
});
}
searchButton.addEventListener("click", searched);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App