Tell us what’s happening:
I don’t under stand what i am doing wrong here, plz help
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="search-input" 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="sprite-container"></div>
<script src="./script.js"></script>
</body>
</html>
/* file: styles.css */
/* file: script.js */
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 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 spriteContainer = document.getElementById("sprite-container");
const getPokemon = async () => {
try {
const pokemonNameOrId = searchInput.value.toLowerCase()
const res = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemonNameOrId}`);
const data = await res.json();
setPokemonInfo(data);
} catch (err) {
alert("Pokémon not found")
console.log(err);
}
};
const setPokemonInfo = data => {
const { name, id, weight, height, types, sprites, stats } = data;
pokemonName.textContent = `${name[0].toUpperCase() + name.slice(1)}`;
pokemonId.textContent = `#${id}`;
pokemonWeight.textContent = `Weight: ${weight}`;
pokemonHeight.textContent = `Height: ${height}`;
spriteContainer.innerHTML = `<img id="sprite" src="${sprites.front_default}" alt="${name}">`
hp.textContent = stats[0].base_stats;
attack.textContent = stats[1].base_stats;
defense.textContent = stats[2].base_stats;
specialAttack.textContent = stats[3].base_stats;
specialDefense.textContent = stats[4].base_stats;
speed.textContent = stats[5].base_stats;
pokemonTypes.innerHTML = types.map(obj => {`
<span>${obj.type.name[0].toUpperCase() + obj.type.name.slice(1)}</span>
`}).join(" ");
};
searchButton.addEventListener("click", e => {
e.preventDefault()
getPokemon()
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App
