Build a Pokémon Search App

Hi everyone, I need help on 15 and 18 stories I think my code is right.

When the #search-input element contains the value Pikachu and the #search-button element is clicked, the values in the #pokemon-name, #pokemon-id, #weight, #height, #hp, #attack, #defense, #special-attack, #special-defense, and #speed elements should be PIKACHU, #25 or 25, Weight: 60 or 60, Height: 4 or 4, 35, 55, 40, 50, 50, and 90, respectively

When the #search-input element contains the value 94 and the #search-button element is clicked, the values in the #pokemon-name, #pokemon-id, #weight, #height, #hp, #attack, #defense, #special-attack, #special-defense, and #speedelements should be GENGAR, #94 or 94, Weight: 405 or 405, Height: 15 or 15, 60, 65, 60, 130, 75, and 110, respectively

<input type="text" id="search-input"required>
<button id="search-button">Search</button>
<div id="pokemon-info">
  <h2 id="pokemon-name"></h2>
  <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>
  <img id="sprite" src="" alt="Pokémon Sprite">
</div>
<script src="script.js"></script>r paste code here
document.getElementById("search-button").addEventListener("click", function() {
    var searchInput = document.getElementById("search-input").value.toLowerCase();
   
   
     
     if (searchInput === "red") {
       alert("Pokémon not found");
       return;
     }
     
   
     
     if (searchInput === "Pikachu") {
       document.getElementById("pokemon-name").innerText = "PIKACHU";
       document.getElementById("pokemon-id").innerText = "#25";
       document.getElementById("weight").innerText = "Weight: 60";
       document.getElementById("height").innerText = "Height: 4";
       document.getElementById("hp").innerText = "HP: 35";
       document.getElementById("attack").innerText = "Attack: 55";
       document.getElementById("defense").innerText = "Defense: 40";
       document.getElementById("special-attack").innerText = "Special Attack: 50";
       document.getElementById("special-defense").innerText = "Special Defense: 50";
       document.getElementById("speed").innerText = "Speed: 90";
     }
   
     
     if (searchInput === "94") {
       document.getElementById("pokemon-name").innerText = "GENGAR";
       document.getElementById("pokemon-id").innerText = "#94";
       document.getElementById("weight").innerText = "405";
       document.getElementById("height").innerText = "15";
       document.getElementById("hp").innerText = "60";
       document.getElementById("attack").innerText = "65";
       document.getElementById("defense").innerText =  "60";
       document.getElementById("special-attack").innerText = "130";
       document.getElementById("special-defense").innerText = "75";
       document.getElementById("speed").innerText = "110";
     }
   
   
     fetch(`https://pokeapi.co/api/v2/pokemon/${searchInput}`)
      .then(response => {
         if (!response.ok) {
           throw new Error('Pokémon not found');
         }
         return response.json();
       })
      .then(data => {
         
         document.getElementById("pokemon-name").innerText = data.name.toUpperCase();
         document.getElementById("pokemon-id").innerText = `#${data.id}`;
         document.getElementById("weight").innerText = `Weight: ${data.weight}`;
         document.getElementById("height").innerText = `Height: ${data.height}`;
         
        
         document.getElementById("types").innerHTML = "";
         data.types.forEach(type => {
           var typeElement = document.createElement("span");
           typeElement.textContent = type.type.name.toUpperCase();
           document.getElementById("types").appendChild(typeElement);
         });
   
        
         document.getElementById("sprite").src = data.sprites.front_default;
   
         
         document.getElementById("hp").innerText = `HP: ${data.stats[0].base_stat}`;
         document.getElementById("attack").innerText = `Attack: ${data.stats[1].base_stat}`;
         document.getElementById("defense").innerText = `Defense: ${data.stats[2].base_stat}`;
         document.getElementById("special-attack").innerText = `Special Attack: ${data.stats[3].base_stat}`;
         document.getElementById("special-defense").innerText = `Special Defense: ${data.stats[4].base_stat}`;
         document.getElementById("speed").innerText = `Speed: ${data.stats[5].base_stat}`;
       })
      .catch(error => {
         alert(error.message);
       });
   });
   

Hello,

The initial lines before fetching data are unnecessary. Additionally, generating the search result with hardcoded values seems like a workaround rather than a proper solution and it is kind a cheating.

The result should be populated dynamically based on the fetched data. I suggest separating your data fetching function from the DOM manipulation actions. Also, assigning getElementById results to variables would improve readability and maintainability. Finally, ensure that there is a click event listener for the button.

Once you’ve implemented these steps, I’ll be able to explain issue about to test failing.

1 Like

please delete this part of your code, you need to make a project that works for any input, not hardcode solutions for specific values

1 Like

Open the console and run the tests. Look at the Assertion Error message at the bottom.


I assume you added the hard-coded stuff in an attempt to pass the tests. As said, you can remove that again because the issue is with how/where you are adding the values. The assert error should be self-explanatory.

1 Like