Build a Pokémon Search App: "Red" input alert faling

JavaScript
1

I’ve passed all the tests except this one:

When the #search-input element contains the value Red and the #search-button element is clicked, an alert should appear with the text "Pokémon not found" .

I can’t figure out why? Is it something to do with how i am fetching the data?

HTML

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PokemonSearchApp</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="display">
        <div class="header">
          <h1>Pokémon Search App</h1>
          <h3>Search for Pokémon Name or ID:</h3>
          <input id="search-input" required/>
          <button id="search-button">Search</button>
        </div>
        <div class="image">
          <img src="" id="sprite" />
        </div>
        <div id="types"></div>
        <div class="display-info">
          <p>Name: <span id="pokemon-name"></span></p>
          <p>ID: #<span id="pokemon-id"></span></p>
          <p>Weight: <span id="weight"></span></p>
          <p>Height: <span id="height"></span></p>
        </div>
      </div>
      <div class="metrics">
        <div class="base">
          <h3>Base</h3>
          <p>HP:</p>
          <p>Attack:</p>
          <p>Defense:</p>
          <p>Special Attack:</p>
          <p>Special Defense:</p>
          <p>Speed:</p>
        </div>
        <div class="stats">
          <h3>Stats</h3>
          <span id="hp">0</span>
          <span id="attack">0</span>
          <span id="defense">0</span>
          <span id="special-attack">0</span>
          <span id="special-defense">0</span>
          <span id="speed">0</span>
        </div>
      </div>
    </div>
  </body>
  <script src="script.js"></script>
</html>

JS

// Fetch data from the API at the top
fetch("https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/")
  .then((res) => res.json())
  .then((data) => {
    pokemonArr = data.results; // Update global variable with fetched data
    getPokemonData(pokemonArr); // Call the function with the updated data

    // Initialize search button after data is loaded
    button.addEventListener("click", () => {
      const inputValue = input.value.trim();
      const foundPokemon = searchPokemon(inputValue);
      if (foundPokemon) {
        displayPokemon(foundPokemon);
      } else {
        alert("Pokémon not found");
      }
    });
  })
  .catch((err) => {
    console.log("error", err);
  });

// Declare variables
const input = document.getElementById("search-input");
const button = document.getElementById("search-button");
const pokemonName = document.getElementById("pokemon-name");
const pId = document.getElementById("pokemon-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
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");
let img = document.getElementById("sprite");
let types = document.getElementById("types");

let pokemonArr = [];

// Function to get and log Pokémon data
const getPokemonData = (pokemonArr) => {
  // console.log('Pokémon Data:', pokemonArr);
  return pokemonArr;
};

// Function to search for a Pokémon by ID or name
const searchPokemon = (inputValue) => {
  const inputValueString = inputValue.toString().toLowerCase().trim();
  console.log(`Searching for: ${inputValueString}`);  // Debugging log
  return pokemonArr.find((pokemon) => {
    return (
      pokemon.id === parseInt(inputValueString) || pokemon.name.toLowerCase() === inputValueString
    );
  });
};

// Function to display the Pokémon
const displayPokemon = (foundPokemon) => {
  fetch(foundPokemon.url)
    .then((res) => res.json())
    .then((data) => {
      let pokemon = data;
      console.log(data);
      if (foundPokemon) {
        pokemonName.innerHTML = `${pokemon.name.toUpperCase()}`;
        pId.innerHTML = `${pokemon.id}`;
        weight.innerHTML = `${pokemon.weight}`;
        height.innerHTML = `${pokemon.height}`;
        hp.innerHTML = `${pokemon.stats[0].base_stat}`;
        attack.innerHTML = `${pokemon.stats[1].base_stat}`;
        defense.innerHTML = `${pokemon.stats[2].base_stat}`;
        specialAttack.innerHTML = `${pokemon.stats[3].base_stat}`;
        specialDefense.innerHTML = `${pokemon.stats[4].base_stat}`;
        speed.innerHTML = `${pokemon.stats[5].base_stat}`;
        img.src = `${pokemon.sprites.front_default}`;

        // Clear types before updating
        types.innerHTML = '';
        if (pokemon.types.length === 2) {
          types.innerHTML = `
            <span>${pokemon.types[0].type.name.toUpperCase()}</span>
            <span>${pokemon.types[1].type.name.toUpperCase()}</span>`;
        } else {
          types.innerHTML = `
            <span>${pokemon.types[0].type.name.toUpperCase()}</span>`;
        }
      }
    })
    .catch((error) => {
      console.error('Error fetching Pokémon details:', error);
    });
};
2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!