Pokémon Search App Project code question

JavaScript
1

Hello can anyone please help or guide me if I am on the correct way with this?
I have trouble getting past step number 15 (Pikachu checkmark), I have tried several solutions and have rewritten my code but nothing seems to work.
I would appreciate any help because this is making me crazy, been stuck with this for hours now…

here is my code so far:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pokémon Search App Project</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>

    <div>
      <h1>Pokémon Search App Project</h1>

    </div>

    <div>
      <input type="text" id="search-input" placeholder="Type a Name or ID..." required>
      <button id="search-button">Search</button>
    </div>

    <div>
      <p id="pokemon-name"></p>
      <p id="pokemon-id"></p>
      <p id="weight"></p>
      <p id="height"></p>
      <p id="types"></p>
      <p id="hp"></p>
      <p id="attack"></p>
      <p id="defense"></p>
      <p id="special-attack"></p>
      <p id="special-defense"></p>
      <p id="speed"></p>
    
      
    </div>

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

JS:

// interface
const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");

// pokemon stats
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = 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 specialAttack = document.getElementById("special-attack");
const specialDefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");
// pokemon stats end

// "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon"

// clear input box
const updateInput = ()=>{
  searchInput.value = "";
};

// iterate through types
const updateTypes = (pTypes)=>{
  if(pTypes.length > 1){
    types.textContent = `Types: `;

    for(const type of pTypes){
      types.textContent += `${type.type.name.toUpperCase()}, `;
    };

    types.textContent = types.textContent.slice(0, types.textContent.length-2);
  } else{
    types.textContent = `Type: `;
  
    for(const type of pTypes){
      types.textContent += `${type.type.name.toUpperCase()} `;
    };
  };
};

// iterate through stats


// update and show stats
const updateStats = (name, id, pWeight, pHeight, pTypes, pStats)=>{
  pokemonName.textContent = `Name: ${name.toUpperCase()}`;
  pokemonId.textContent = `ID: #${id}`;
  weight.textContent = `Weight: ${pWeight}`;
  height.textContent = `Height: ${pHeight}`;

  updateTypes(pTypes);

  
  hp.textContent = `HP: ${pStats[0].base_stat}`;
  attack.textContent = `Attack: ${pStats[1].base_stat}`;
  defense.textContent = `Defense: ${pStats[2].base_stat}`;
  specialAttack.textContent = `Sp. Attack: ${pStats[3].base_stat}`;
  specialDefense.textContent = `Sp. Defense: ${pStats[4].base_stat}`;
  speed.textContent = `Speed: ${pStats[5].base_stat}`;
  
};

// fetch and process data
const fetchData = (input)=>{
  fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${input}`)
  .then((response)=>{
    if(response){
      return response.json();
    } if(!response) {
      alert("Pokémon not found")
    } 
  })
  .then((data)=>{
    console.log(data);
    updateInput();

    updateStats(data.name, data.id, data.weight, data.height, data.types, data.stats);

  })
  .catch((error)=>{
    alert("Pokémon not found");
    console.log(`ein fehler ist aufgetreten: ${error}`)
  })
};

// eventListener for searchBtn
searchBtn.addEventListener("click", ()=>{
  console.log(searchInput.value);
  fetchData(searchInput.value.toLowerCase());
});
2

Hello there, firstly, you’re triggering the alert("Pokémon not found") alert twice. Only one check is sufficient. The optimal way to check the response is by using the ok property. Once you’ve performed this check, there’s no need to display an alert in the error catch block.

After that, you’re inserting strings into all <p> elements that have an ID corresponding to a stat:

However, the test expects to see only the value of each stat, not the name or description of the stat. This is why you are not passing the test. You should use a different approach, such as creating a table with CSS Grid or an HTML <table> element, to handle this can be more helpful.

Similarly, for the Pokémon types, you should display the name of each type within separate elements. The test expects to see different inner elements corresponding to each type. Also, don’t forget to clear these outputs before new search.

I hope this feedback helps you. Happy coding! :slightly_smiling_face:

1 Like
3

Thanks, your reply helps a lot!
I guess I will be off to another different approach then :slightly_smiling_face:

2 Likes
4

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