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

Tell us what’s happening:

Describe your issue in detail here.
Can someone please explain why the follow rules arent working?

  • 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 . Make sure the #type element content is cleared between searches.

  • When the #search-input element contains the value 94 and the #search-button element is clicked, the #types element should contain two inner elements with the text values GHOST and POISON, respectively. Make sure the #type element content is cleared between searches.

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">
  <link src="stylesheet" href="./styles.css"
</head>
<body>
  <h1>Pokémon Search App</h1>
  <label for="search-input">Enter Pokemon name:</label><br>
  <input id="search-input" name="search-input" required>
  <button id="search-button" type="button">Search</button>
  <div id="pokemon-info">
    <h2 id="pokemon-name">
    <h3 id="pokemon-id">
    <h3 id="weight">
    <h3 id="height">
    <h3 id="types">
  </div>
  <div id="img"></div>
  <table>
    <tr>
      <th>Base:</th>
      <th>Stats:</th>
    </tr>
    <tr>
      <td>HP:</td>
      <td id="hp"></t>
    </tr>
    <tr>
      <td>Attack:</td>
      <td id="attack"></td>
    </tr>
    <tr>
      <td>Defense:</td>
      <td id="defense"></td>
    </tr>
    <tr>
      <td>SP Attack:</td>
      <td id ="special-attack"></td>
    </tr>
    <tr>
      <td>SP Defense:</td>
      <td id="special-defense"></td>
    </tr>
    <tr>
      <td>Speed:</td>
      <td id="speed"></t>
    </tr>

  </table>


<script src="script.js"></script>
</body>


</html>
/* file: styles.css */

/* file: script.js */
const search_btn = document.getElementById("search-button")
const pokemon_name = document.getElementById("pokemon-name")
  const pokemon_id = document.getElementById("pokemon-id")
  const weight = document.getElementById("weight")
  const height = document.getElementById("height")
  const types = document.getElementById("types")
  const hp = document.getElementById("hp")
  const attack = document.getElementById("attack")
  const defense = document.getElementById("defense")
  const sp_attack = document.getElementById("special-attack")
  const sp_defense = document.getElementById("special-defense")
  const speed = document.getElementById("speed")
  const img = document.getElementById("img")

const pokemon_info = async ()=>{
  types.innerHTML = "";
  try{
    const input_info = document.getElementById("search-input").value.toLowerCase()
    const pokemon_info = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${input_info}`)
    const pokemon_data = await pokemon_info.json()

    pokemon_name.innerHTML = pokemon_data.name.toUpperCase();
    pokemon_id.innerHTML = pokemon_data.id;
    weight.innerHTML = pokemon_data.weight;
    types.innerHTML = pokemon_data.types.map(obj => obj.type.name).join(" ").toUpperCase()
    height.innerHTML = pokemon_data.height;
  
    hp.innerHTML = pokemon_data.stats[0].base_stat;
    attack.innerHTML = pokemon_data.stats[1].base_stat;
    defense.innerHTML = pokemon_data.stats[2].base_stat;
    sp_attack.innerHTML = pokemon_data.stats[3].base_stat;
    sp_defense.innerHTML = pokemon_data.stats[4].base_stat;
    speed.innerHTML = pokemon_data.stats[5].base_stat;
    const img_url = pokemon_data.sprites.front_default;
    img.innerHTML = `<img id="sprite" src="${img_url}">`;
    console.log(pokemon_data.types.map(obj => obj.type.name).join(" ").toUpperCase())
  } catch (err){
    clearScreen()
    alert("Pokemon not found")
  }
  
}
const clearScreen = () => {

  pokemon_name.innerHTML = "";
  pokemon_id.innerHTML = "";
  weight.innerHTML = "";
  types.innerHTML = "";
  height.innerHTML = "";
  hp.innerHTML = "";
  attack.innerHTML = "";
  defense.innerHTML = "";
  sp_attack.innerHTML = "";
  sp_defense.innerHTML = "";
  speed.innerHTML = "";
  img.innerHTML = "";
}

search_btn.addEventListener("click", (e)=>{
  e.preventDefault()
  pokemon_info()
});

Your browser information:

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

Challenge Information:

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

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

each type inside here should be in its own element, it could be a span or whatever makes sense to you, not just written

Hi, stuck at about the same level. I can’t figure out how to add a span to the type element, any suggestions?

hey @richQ

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like

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