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

JavaScript
1

Tell us what’s happening:

My app is working properly, but when I run the tests, this keeps showing “the type element should contain a single inner element…”.
But it does! Why is it wrong?

Your code so far

/* file: script.js */



### Your browser information:

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.51</code>

### Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-pokemon-search-app-project/build-a-pokemon-search-app
2

Hello @bn057979!

Can you explain why you think the type element contains a single inner element? There is no code to view in your initial submission.

4 
fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon')
  .then((res) => res.json())
  .then(data => {
 nombresPokemon=data;
 nombresPokemon2=data.results;
  })
  .catch(error => console.error('Pokémon not found', error));

const buscar = async (query) => {
  let selected = {};
  let found = false;
  let id = parseInt(query);

  if (!isNaN(id) && id > 0 && id <= nombresPokemon2.length) {
    const { name, url } = nombresPokemon2[id - 1];
    selected.name = name;
    selected.url = url;
    nombre.innerHTML = `${name.toUpperCase()}`;
    idPokemon.innerHTML = `${id}`;
    imagenPokemon.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`;
    found = true;
    
 const response = await fetch(url);
const pokemonData = await response.json();

 const {weight, height, types, stats}=pokemonData;
 
    selected.weight = weight;
    selected.height = height;
    selected.types=types;
    selected.stats=stats;

    pesoPokemon.innerHTML = `${weight}`;
    alturaPokemon.innerHTML = `${height}`;
    tipoPokemon.innerHTML = types.map(type => type.type.name).join(', ').toUpperCase();

    let hpStat = stats.find(stat => stat.stat.name === 'hp');
    let hpBaseStat=hpStat.base_stat;
    let attackStat = stats.find(stat => stat.stat.name === 'attack');
    let attackBaseStat=attackStat.base_stat;
    let defenseStat = stats.find(stat => stat.stat.name === 'defense');
    let defenseBaseStat=defenseStat.base_stat;
    let sattackStat = stats.find(stat => stat.stat.name === 'special-attack');
    let sattackBaseStat=sattackStat.base_stat;
    let sdefenseStat = stats.find(stat => stat.stat.name === 'special-defense');
    let sdefenseBaseStat=sdefenseStat.base_stat;
    let speedStat = stats.find(stat => stat.stat.name === 'speed');
    let speedBaseStat=speedStat.base_stat;


   hp.textContent=hpBaseStat;
   attack.textContent=attackBaseStat;
   defense.textContent=defenseBaseStat; 
   sattack.textContent=sattackBaseStat;
   sdefense.textContent=sdefenseBaseStat;
   speed.textContent=speedBaseStat;
}

  if (!found) {
    const pokemon = nombresPokemon2.find(p => p.name.toLowerCase() === query.toLowerCase());
    if (pokemon) {
      const index = nombresPokemon2.indexOf(pokemon);
      selected.name = pokemon.name;
      selected.url = pokemon.url;
      nombre.innerHTML = `${pokemon.name.toUpperCase()}`;
      idPokemon.innerHTML = `${index + 1}`;
      imagenPokemon.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index + 1}.png`;
      found = true;

   const response = await fetch(pokemon.url);
      const pokemonData = await response.json();
      const {weight, height, types, stats}=pokemonData;
 
    selected.weight = weight;
    selected.height = height;
    selected.types=types;
    selected.stats=stats;

    pesoPokemon.innerHTML = `${weight}`;
    alturaPokemon.innerHTML = `${height}`;
    tipoPokemon.innerHTML = types.map(type => type.type.name).join(', ').toUpperCase();

    let hpStat = stats.find(stat => stat.stat.name === 'hp');
    let hpBaseStat=hpStat.base_stat;
    let attackStat = stats.find(stat => stat.stat.name === 'attack');
    let attackBaseStat=attackStat.base_stat;
    let defenseStat = stats.find(stat => stat.stat.name === 'defense');
    let defenseBaseStat=defenseStat.base_stat;
    let sattackStat = stats.find(stat => stat.stat.name === 'special-attack');
    let sattackBaseStat=sattackStat.base_stat;
    let sdefenseStat = stats.find(stat => stat.stat.name === 'special-defense');
    let sdefenseBaseStat=sdefenseStat.base_stat;
    let speedStat = stats.find(stat => stat.stat.name === 'speed');
    let speedBaseStat=speedStat.base_stat;


   hp.textContent=hpBaseStat;
   attack.textContent=attackBaseStat;
   defense.textContent=defenseBaseStat; 
   sattack.textContent=sattackBaseStat;
   sdefense.textContent=sdefenseBaseStat;
   speed.textContent=speedBaseStat;
      }
  }

  if (!found) {
    alert("Pokémon not found")
  }
};


button.addEventListener("click", () => {
  const query = input.value.trim();
  buscar(query);
});

clear.addEventListener("click",()=>{
  hp.textContent="";
   attack.textContent="";
   defense.textContent=""; 
   sattack.textContent="";
   sdefense.textContent="";
   speed.textContent="";
  pesoPokemon.innerHTML=""; 
  alturaPokemon.innerHTML="";
  tipoPokemon.innerHTML=""; 
  nombre.innerHTML= "" ;
  idPokemon.innerHTML="";
  imagenPokemon.src="";
  input.value="";
})
5

I’va just pasted the code.
Thank you very much for helping!