Build a Pokemon Search App

I’m doing the final proyect, but i don’t know why is failing the test from the 14 to 20.
I don’t know the errors that i made, i can’t find it.
If someone can help me pls…
This is my code
script.js

const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const pokemonNameElem = document.getElementById("pokemon-name");
const pokemonIdElem = document.getElementById("pokemon-id");
const weightElem = document.getElementById("weight");
const heightElem = document.getElementById("height");
const imagenPokemon = document.querySelector(".contenedor-imagen");
const typesElem = document.getElementById("types");
const hpElem = document.getElementById("hp");
const attackElem = document.getElementById("attack");
const defenseElem = document.getElementById("defense");
const spAttackElem = document.getElementById("special-attack");
const spDefenseElem = document.getElementById("special-defense");
const speedElem = document.getElementById("speed");

searchButton.addEventListener("click", e => {
  e.preventDefault();

  const pokemonBuscado = searchInput.value
    ? searchInput.value.trim().toLowerCase()
    : null;

  if (!pokemonBuscado) {
    alert("Por favor, ingrese un pokemon");
    return;
  }

  busquedaPokemon(pokemonBuscado);
});

const busquedaPokemon = async (pokemon) => {
  try {
    const response = await fetch(
      `https://pokeapi.co/api/v2/pokemon/${pokemon}`
    );
    if (!response.ok) {
      throw new Error("Pokémon not found");
    }
    const data = await response.json();

    const pokemonStats = data.stats;

    displayInfoPokemon(data.name, data.id, data.weight, data.height);
    displayImagen(data.sprites.front_default);
    displayTipos(data.types);
    displayEstadisticas(pokemonStats);
  } catch (err) {
    resetDisplay();
    alert(err.message);
    console.error(`Pokémon not found: ${err}`);
  }
};

const displayEstadisticas = (estadisticas) => {
  hpElem.innerHTML = estadisticas[0].base_stat;
  attackElem.innerHTML = estadisticas[1].base_stat;
  defenseElem.innerHTML = estadisticas[2].base_stat;
  spAttackElem.innerHTML = estadisticas[3].base_stat;
  spDefenseElem.innerHTML = estadisticas[4].base_stat;
  speedElem.innerHTML = estadisticas[5].base_stat;
};

const displayImagen = (imagen) => {
  imagenPokemon.innerHTML = `<img id="sprite" src="${imagen}" alt="Pokémon sprite">`;
};

const displayInfoPokemon = (nombre, id, peso, altura) => {
  pokemonNameElem.innerHTML = nombre.toUpperCase();
  pokemonIdElem.innerHTML = `#${id}`;
  weightElem.innerHTML = `Weight: ${peso}`;
  heightElem.innerHTML = `Height: ${altura}`;
};

const displayTipos = (tipos) => {
  typesElem.innerHTML = tipos
    .map(
      (tipo) =>
        `<span class="type ${
          tipo.type.name
        }">${tipo.type.name.toUpperCase()}</span>`
    )
    .join("");
};

const resetDisplay = () => {
  const imagen = document.getElementById("sprite");
  if (imagen) {
    imagen.remove();
  }
  pokemonNameElem.innerHTML = "";
  pokemonIdElem.innerHTML = "";
  weightElem.innerHTML = "";
  heightElem.innerHTML = "";
  imagenPokemon.innerHTML = "";
  typesElem.innerHTML = "";
  hpElem.innerHTML = "";
  attackElem.innerHTML = "";
  defenseElem.innerHTML = "";
  spAttackElem.innerHTML = "";
  spDefenseElem.innerHTML = "";
  speedElem.innerHTML = "";
};

and this is the html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Buscador de Pokemon</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <h1>Buscador de Pokemon</h1>
      <h3>byJoaquinLallana</h3>
      <div>
        <div class="contenedor-input">
          <input id="search-input" class="search-input"  required/>
          <label class="form__label"> Ingrese un Pokemon</label>
          <button id="search-button" class="search-button">Buscar</button>
        </div>
        <div class="contenedor-output">
          <div class="contenerdor-top">
            <div class="contenedor-nombre">
              <span id="pokemon-name"></span>
              <span id="pokemon-id"></span>
            </div>
            <div class="info-pokemon">
              <span id="weight"></span>
              <span id="height"></span>
            </div>
            <div class="contenedor-imagen"></div>
            <div id="types" 
            ></div>
          </div>
          <div class="estadisticas-tabla">
            <table>
              <thead>
                <tr>
                  <th class="tabla-header">Base</th>
                  <th class="tabla-header">Estadisticas</th>
                </tr>
              </thead>
              <tbody class="tabla-stats">
                <tr class="tabla-fila">
                  <th>HP:</th>
                  <td id="hp"></td>
                </tr>
                <tr class="tabla-fila">
                  <th>Ataque:</th>
                  <td id="attack"></td>
                </tr>
                <tr class="tabla-fila">
                  <th>Defensa:</th>
                  <td id="defense"></td>
                </tr>
                <tr class="tabla-fila">
                  <th>Ataque Especial:</th>
                  <td id="special-attack"></td>
                </tr>
                <tr class="tabla-fila">
                  <th>Defensa Especial:</th>
                  <td id="special-defense"></td>
                </tr>
                <tr class="tabla-fila">
                  <th>Velocidad:</th>
                  <td id="speed"></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <script src="scripts.js"></script>
    </main>
  </body>
</html>

i hope someone could help me thanks

Can you post a link to the project?

What are tests 14-20? What do those tests have in common? What debugging have you done so far?

Sorry, this is my first time posting something.
The link to the project

And this are the errors that the console throw me

// console output
[Error: TypeError: can’t access property “trim”, alertMessage is undefined]
[Error: AssertionError: expected ‘’ to equal ‘pikachu’]
[Error: TypeError: can’t access property “src”, sprite is null]
[Error: AssertionError: expected to have a length of 1 but got +0]
[Error: AssertionError: expected ‘’ to equal ‘gengar’]
[Error: TypeError: can’t access property “src”, sprite is null]
[Error: AssertionError: expected to have a length of 2 but got +0]

You missed this part :slight_smile:

Here, you aren’t using the exact, literal messaged requested. Also, an alert doesn’t in fact trigger when I test manually.

sorry i made that response in spanish. Because there is no point that say extactly what i have to do if there is no value in the input.

i’m argentinian, so some words are in spanish, just for my comprehension

Here’s one issue I found - this filename has an extra “s”

I think that might actually be the only issue?


In general, mixing languages in your code is going to be pretty confusing, so its not generally recommended. I get why you are doing it, but its not recommended

1 Like

You are right, i have to work on that, sorry.

THANK YOU SO MUCH!! YOU ARE AWESOME!

1 Like

:tada: