Hi! I tried using the get help button for this project, but it wasn’t working, so trying to create a new post here. This is my first time posting so apologies if I’m not doing it correctly.
I’m trying to figure out why two test conditions aren’t passing. They both have to do with the sprite img element being created. I’m getting the sprite to appear and when I inspect it I think it’s pulling the correct front_default image. Am I missing something? Appreciate any insight!
- When the #search-input element contains the value Pikachu 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.
- 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.
My code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokemon Search App</title>
</head>
<body>
<input id="search-input" required></input>
<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="sprite"></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>
<script src="./script.js"></script>
</body>
</html>
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const pokemonName = document.getElementById('pokemon-name');
const pokemonId = document.getElementById('pokemon-id');
const pokemonWeight = document.getElementById('weight');
const pokemonHeight = document.getElementById('height');
const sprite = document.getElementById('sprite');
const pokemonTypes = document.getElementById('types');
const hp = document.getElementById('hp');
const attack = document.getElementById('attack');
const defense = document.getElementById('defense');
const specialAttack = document.getElementById('special-attack');
const specialDefense = document.getElementById('special-defense');
const speed = document.getElementById('speed');
const fetchData = async () => {
try {
const pokemonNameOrId = searchInput.value.toLowerCase();
const res = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemonNameOrId}`);
const data = await res.json();
getPokemonData(data);
} catch (err) {
alert("Pokémon not found");
console.log(err);
}
};
const getPokemonData = data => {
const {name, id, weight, height, sprites, types, stats} = data;
pokemonName.textContent = name.toUpperCase();
pokemonId.textContent = `#${id}`;
pokemonWeight.textContent = `Weight: ${weight}`;
pokemonHeight.textContent = `Height: ${height}`;
sprite.innerHTML = `<img id="sprite" src ="${sprites.front_default}">`;
hp.textContent = stats[0].base_stat;
attack.textContent = stats[1].base_stat;
defense.textContent = stats[2].base_stat;
specialAttack.textContent = stats[3].base_stat;
specialDefense.textContent = stats[4].base_stat;
speed.textContent = stats[5].base_stat;
pokemonTypes.innerHTML = types
.map(obj => `<span>${obj.type.name.toUpperCase()}</span>`)
.join(' ');
};
searchButton.addEventListener("click", e => {
e.preventDefault();
fetchData();
});