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

Tell us what’s happening:

Hi guys,i need some advice in this challenge. I fail to pass two tests here,the ones that say:

" 1. 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" and

" 1. 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".

I am not sure what could i have done wrong in the code ,because every time i search for these two pokemons i get the result with all the stats as asked in the challenge. Can anyone point me in the right direction?

Thank you!

P.S: I haven’t done any styling yet because i wanted to get the functionality done first.

Your code so far

<html lang='eng'>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>Pokemon Search App</title>
  <input id="search-input" placeholder='Name or id of pokemon' required/>
    <button id='search-button' class="button">Search</button>
    <div id="types"></div>
    <div id="stats"></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>
  <script src='./script.js'></script>
const searchButton = document.getElementById('search-button');

const pokeName = document.getElementById('pokemon-name');
const pokeId = document.getElementById('pokemon-id');
const pokeWeight = document.getElementById('weight');
const pokeHeight = document.getElementById('height');
const types = document.getElementById('types');
const pokeHp = document.getElementById('hp');
const pokeAttack = document.getElementById('attack');
const pokeDefense = document.getElementById('defense');
const pokeSpecialAttack = document.getElementById('special-attack');
const pokeSpecialDefense = document.getElementById('special-defense');
const pokeSpeed = document.getElementById('speed');

const allPokemons = "";

const getPokemonData = async (pokemonName) => {
  try {
    let url;
    if (!isNaN(pokemonName)) { // Check if input is a number (ID)
      url = `${allPokemons}/${pokemonName}`;
    } else { // Assume input is a string (name)
      url = `${allPokemons}/${pokemonName.toLowerCase()}`;

    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (err) {

const showPokemon = async (event) => {
  const input = document.getElementById('search-input');
  const pokemonName = input.value;
  if (!pokemonName) {
    alert("Pokémon not found");

  const pokemonData = await getPokemonData(pokemonName);
  if (pokemonData) {
    const { name, id, weight, height, types, stats, sprites } = pokemonData;
    const hp = stats.find(stat => === 'hp').base_stat;
    const attack = stats.find(stat => === 'attack').base_stat;
    const defense = stats.find(stat => === 'defense').base_stat;
    const specialAttack = stats.find(stat => === 'special-attack').base_stat;
    const specialDefense = stats.find(stat => === 'special-defense').base_stat;
    const speed = stats.find(stat => === 'speed').base_stat;

    const typesElement = document.getElementById('types');
    typesElement.innerHTML = ''; // Clear previous content

    types.forEach(type => {
      const typeElement = document.createElement('p');
      typeElement.textContent =;

    const statsElement = document.getElementById('stats');

    statsElement.innerHTML = `<img id="sprite" src="${src}" alt="Pokemon Sprite">`; 
    const spriteElement = document.getElementById('sprite');
    const src = spriteElement.src = sprites.front_default; 

    pokeName.innerHTML =  `Name: ${name.toUpperCase()}`;
    pokeId.innerHTML = `ID: #${id}`;
    pokeWeight.innerHTML = `Weight: ${weight}`;
    pokeHeight.innerHTML = `Height: ${height}`;
    pokeHp.innerHTML = `HP: ${hp}`;
    pokeAttack.innerHTML = `Attack : ${attack}`;
    pokeDefense.innerHTML = `Defense: ${defense}`;
    pokeSpecialAttack.innerHTML = `Special Attack: ${specialAttack}`;
    pokeSpecialDefense.innerHTML = `Special Defense: ${specialDefense}`;
    pokeSpeed.innerHTML = `Speed: ${speed}`;
  } else {
    const statsElement = document.getElementById('stats');
    alert('Pokémon not found');

searchButton.addEventListener('click', showPokemon);

Your browser information:

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

Challenge Information:

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

Try making sure elements like #pokemon-name, #pokemon-id, etc. have only text that test is expecting.

1 Like

Thank you for the tip.

I needed to get the element output exactly as the test was asking for it, for example only the name, id, weight and height needed to have their respective text. The rest only needed their values, i totally overlooked that. After changing them to showing just their values, all test passed.

Thank you again!

1 Like

Hello, could you please help me share your correct-text? I have some problems which couldn’t solve. Thank you

I don’t think that it would be allowed to share the whole solved code,however the necessary change is on the above code that i have posted.

Make sure to have only the name, ID,weight and height to have their corresponding text in the output. The rest only needs their value and no text whatsoever.

Hope this helps.

1 Like