Build a Pokémon Search App Project - Build a Pokémon Search App

Tell us what’s happening:

Hello guys im on the pokemon game i have done all the code good but gives back two errors in which they all give back an error concerning sprite id in which i have done correctly according to my understanding
please help me review sprite functions only in my code below

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</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}>"`;

console.log(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[0].toUpperCase() + obj.type.name.slice(1)}</span>
`).join(" ");

};

searchButton.addEventListener("click", e =>{
  e.preventDefault();
  getPokemon();
});

searchInput.addEventListener("keydown", e=>{
  if (e.key === "Enter"){
    searchButton.click();
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Challenge Information:

Build a Pokémon Search App Project - Build a Pokémon Search App

I’ve tried your code, typing Pikachu to the box and the pressing search - no image is displayed.

It appear there might be something wrong with the template literal defining img element - after the closing bracket angle there’s double quote for some reason.