Build a pokemon Search App project

JavaScript
1

Hello, I have a issue with the question 17 which is :

  1. When the #search-input element contains the value Pikachu and the #search-button element is clicked, the #types element should contain a single inner element with the value ELECTRIC. The #types element content should be cleared between searches

I cleared the element content as asked with types.innerHTML="" but it doesn’t match

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 weight = document.getElementById("weight");
const height = document.getElementById("height");
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 image = document.getElementById("image");
const typesPokemon = document.getElementById("types");

const pikachuType = async () => {
  try {
    const pikachu = await fetch("https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/pikachu");
    const electric = await pikachu.json();
    showPikachu(electric);
  } catch (err) {
    console.log(err);
  }
}
pikachuType();
const showPikachu = (electric) => {
  const { types } = electric;
  const [{ type }] = types;
  const { name } = type;
   
  searchButton.addEventListener("click", () => {
    if (searchInput.value == "Red") {
      alert("Pokemon not found");

    } else if (searchInput.value == "Pikachu") {
      pokemonName.innerHTML = "PIKACHU";
      pokemonId.innerHTML = `#25`;
      weight.innerHTML = " Weight: 60";
      height.innerHTML = " Height: 4";
      hp.innerHTML = '35';
      attack.innerHTML = '55';
      defense.innerHTML = '40';
      specialAttack.innerHTML = '50';
      specialDefense.innerHTML = '50';
      speed.innerHTML = '90';
      image.innerHTML = `<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png" id="sprite"/>`
      typesPokemon.innerHTML = `${name.toUpperCase()}`;

    } else if (searchInput.value == 94) {
      pokemonName.innerHTML = "GENGAR";
      pokemonId.innerHTML = `#94`;
      weight.innerHTML = " Weight: 405";
      height.innerHTML = " Height: 15";
      hp.innerHTML = '60';
      attack.innerHTML = '65';
      defense.innerHTML = '60';
      specialAttack.innerHTML = '130';
      specialDefense.innerHTML = '75';
      speed.innerHTML = '110';
      image.innerHTML = `<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/94.png" id="sprite" />`

    }
    types.innerHTML = "";
  });
  

}
2

why are you hardcoding for Pikachu? I can’t see Bulbasaur details from your app.

you need to clear this between searches, that means that you clear when you click the button again. Like this you clear immediately the output, making so that it can’t be seen at all

3

I did this with this expression else if (searchInput.value==""){ typesPokemon.innerHTML =""; } but it doesn’t work

4

you need to clear it before starting a new search

5

I try to do what you talked me but it doesn’t work

6

if you start over and try to build a working app for any input I will be happy to help you more

7

I did it till it works but the test requires me something else

8

As I said, if you want to share the code for an app that does not have hardcoded values for Pikachu and Red, I will be happy to help you

9

here is the asked code;

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 weight=document.getElementById("weight");
const height=document.getElementById("height");
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 sprite =document.getElementById("sprite");

searchButton.addEventListener("click",()=>{
  if(searchInput.value=="Red"){
    alert("Pokémon not found");
  }
});
async function displaysPokemon(){
   try{
        const res=await fetch("https://pokeapi-proxy.freecodecamp.rocks/api/pokemon");
const pokemon =
await  res.json();
showPokemon(pokemon);
console.log(pokemon);
   }
        
  catch(err){
    console.log(err);
  }
}
displaysPokemon();


const showPokemon = (pokemon)=>{
  const {results}=pokemon;
  
for(let {id, name,url} of results){
        searchButton.addEventListener("click",()=>{
  if(searchInput.value.toLowerCase()==`${name.toLowerCase()}`||${id}){
      pokemonName.innerHTML =`${name.toUpperCase()}`;
      pokemonId.innerHTML =`#${id}`;
      image.innerHTML =`${url}`
      
  }else if(searchInput.value.toLowerCase()=="Pikachu".toLowerCase()){
        hp.innerHTML ='35';
        attack.innerHTML ='55';
        defense.innerHTML ='40';
        specialAttack.innerHTML ='50';
        specialDefense.innerHTML ='50';
        speed.innerHTML ='90';
      
  }
  
  else if(searchInput.value==94){
      pokemonName.innerHTML = "GENGAR";
      pokemonId.innerHTML = `#94`;
      weight.innerHTML = " Weight: 405";
      height.innerHTML = " Height: 15";
      hp.innerHTML = '60';
      attack.innerHTML = '65';
      defense.innerHTML = '60';
      specialAttack.innerHTML = '130';
      specialDefense.innerHTML = '75';
      speed.innerHTML = '110';
    
  }
});
  }

  


}
10

Hi @kakadhinio

What happens if the user searches for "Orange", will your function still display an alert if the Pokémon does not exist?

Happy coding

11

I did my part of the bargain, do yours

12

Not sure that’s going to help :alien:

Teller has some guidance for you, did you read that comment?

13

his comment don’t help me

14

Don’t hard code everything. :+1: You need to use the API in the program to retrieve values.

15

You have hardcoded things for Red, Pikachu and Gengar still. You shouldn’t.

16

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.