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

JavaScript
1

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

2
  • 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:

3

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.

4

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:

5

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