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

Tell us what’s happening:

Getting an assertion error when running the tests, do not know why.

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'>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Pokemon Search </title> 
  <link rel='stylesheet' href='styles.css'>
  </head> 
  <body>
    <label> Pokemon Search </label> 
    <div id="search-container">
    <input id="search-input" type='text' placeholder="Enter Here" required> 
    <button id="search-button">Search</button> 
    <div id='pokemon-name'> </div>
    <div id='pokemon-id'> </div>
    <div id='weight'> </div>
    <div id='height'> </div>
    <div id='types'> </div>
    <div id='hp'> </div>
    <div id='attack'> </div>
    <div id='defense'> </div>
    <div id='special-attack'> </div>
    <div id='special-defense'> </div>
    <div id='speed'> </div>
    </div>   
  <script src='script.js'></script> 
  </body> 
  </html>
/* file: styles.css */

/* file: script.js */
const searchInput = document.getElementById("search-input");
const searchBtn = 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 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");


const updatePokemon = (data) => {
  pokemonName.textContent = data.name.toUpperCase();
  pokemonID.textContent = `#${data.id}`;
  weight.textContent = `Weight: ${data.weight}`;
  height.textContent = `Height: ${data.height}`;
  hp.textContent = data.stats[0].base_stat;
  attack.textContent = data.stats[1].base_stat;
  defense.textContent = data.stats[2].base_stat;
  specialAttack.textContent = data.stats[3].base_stat;
  specialDefense.textContent = data.stats[4].base_stat;
  speed.textContent = data.stats[5].base_stat;

  // Clear types before adding new ones
  types.innerHTML = "";
  data.types.forEach((typeData) => {
    const typeElement = document.createElement("span");
    typeElement.textContent = typeData.type.name.toUpperCase();
    types.appendChild(typeElement);
  });

   const spriteImg = document.createElement("img");
    spriteImg.id = "sprite";
    spriteImg.src = data.sprites.front_default;
    document.body.appendChild(spriteImg);
};

searchBtn.addEventListener("click", async () => {
  // Clear previous data
  pokemonName.textContent = "";
  pokemonID.textContent = "";
  weight.textContent = "";
  height.textContent = "";
  types.innerHTML = ""; // Use innerHTML to clear types
  hp.textContent = "";
  attack.textContent = "";
  defense.textContent = "";
  specialAttack.textContent = "";
  specialDefense.textContent = "";
  speed.textContent = "";

  if (searchInput.value.trim() === "Red") {
    alert("Pokémon not found");
    return;
  }



  try {
    let response;
    if (searchInput.value.trim() === "Pikachu") {
      response = await fetch("https://pokeapi.co/api/v2/pokemon/pikachu");
    } else if (searchInput.value.trim() === "94") {
      response = await fetch("https://pokeapi.co/api/v2/pokemon/94");
    } else {
      alert("Pokemon not found");
      return;
    }

    if (!response.ok) {
      throw new Error(`${searchInput.value} not found.`);
    }

    const data = await response.json();
    updatePokemon(data);

const spriteImg = document.createElement("img");
    spriteImg.id = "sprite";
    spriteImg.src = data.sprites.front_default;
    document.body.appendChild(spriteImg);

  } catch (err) {
    alert(err.message);
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge Information:

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

  • you are showing “ELECTRIC” in search result for “Pickachu” whereas i dont see that being mentioned in “instructions”

lets refer to that test case

values in the #pokemon-name , #pokemon-id , #weight , #height , #hp , #attack , #defense , #special-attack , #special-defense , and #speed

happy coding :slight_smile:

there is an instruction that states you should display the type as electric.

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.

The problem seems to be when when creating an the image element for the sprite. It returns an assertion error when i run the tests, with an assertion error being a value that is suppose to be true displaying as false, in this case its the id of the sprite.

something interesting happened after commenting out and then activating this piece of code from your attempted script

// typeElement.textContent = typeData.type.name.toUpperCase();

how many fail test cases do you have currently? for me only test case 19 is failing rn after that tweak!!

happy coding :slight_smile: