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

JavaScript
1

Tell us what’s happening:

bruh my code adheres to all the requirements except that one requirement that states that when Red is typed into the input an alert should show that its not valid. Even though my code fulfills that requirement its not registered.

Your code so far

<!-- file: index.html -->


/* file: script.js */
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const displayContainer = document.getElementById('container');
let pokemonNameDisplay = document.getElementById('pokemon-name');
let pokemonIdDisplay = document.getElementById('pokemon-id');
let weightDisplay = document.getElementById('weight');
let heightDisplay = document.getElementById('height');
let typesDisplay = document.getElementById('types');
let hpDisplay = document.getElementById('hp');
let attackDisplay = document.getElementById('attack');
let defenseDisplay = document.getElementById('defense');
let specialAttackDisplay = document.getElementById('special-attack');
let specialDefenseDisplay = document.getElementById('special-defense');
let speedDisplay = document.getElementById('speed');


fetch("https://pokeapi-proxy.freecodecamp.rocks/api/pokemon")
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then(data => {
    try {
      searchButton.addEventListener('click', () => {
        const pokeValue = searchInput.value.trim();
        const pokemon = data.results.find(p => p.name.toLowerCase() === pokeValue.toLowerCase() || p.id.toString() === pokeValue);

     
        typesDisplay.innerHTML = '';

        const existingImage = document.getElementById('sprite');
        if (existingImage) {
          existingImage.remove();
        }

        if (pokemon) {
      
          fetch(pokemon.url)
            .then(response => {
              if (!response.ok) {
                throw new Error("Network response was not ok");
              }
              return response.json();
            })
            .then(pokemonDetails => {
              const pokemonName = pokemonDetails.name.toUpperCase();
              const pokemonId = pokemonDetails.id;
              const pokemonWeight = pokemonDetails.weight;
              const pokemonHeight = pokemonDetails.height;
              const pokemonTypes = pokemonDetails.types.map(type => type.type.name.toUpperCase());
              const pokemonHp = pokemonDetails.stats.find(stat => stat.stat.name === 'hp').base_stat;
              const pokemonAttack = pokemonDetails.stats.find(stat => stat.stat.name === 'attack').base_stat;
              const pokemonDefense = pokemonDetails.stats.find(stat => stat.stat.name === 'defense').base_stat;
              const pokemonSpecialAttack = pokemonDetails.stats.find(stat => stat.stat.name === 'special-attack').base_stat;
              const pokemonSpecialDefense = pokemonDetails.stats.find(stat => stat.stat.name === 'special-defense').base_stat;
              const pokemonSpeed = pokemonDetails.stats.find(stat => stat.stat.name === 'speed').base_stat;

            
              const pokePic = document.createElement('img');
              pokePic.id = "sprite";
              pokePic.src = pokemonDetails.sprites.front_default;
              displayContainer.appendChild(pokePic);

            
              pokemonNameDisplay.textContent = `${pokemonName}`;
              pokemonIdDisplay.textContent = `${pokemonId}`;
              weightDisplay.textContent = `${pokemonWeight}`;
              heightDisplay.textContent = `${pokemonHeight}`;
              hpDisplay.textContent = `${pokemonHp}`;
              attackDisplay.textContent = `${pokemonAttack}`;
              defenseDisplay.textContent = `${pokemonDefense}`;
              specialAttackDisplay.textContent = `${pokemonSpecialAttack}`;
              specialDefenseDisplay.textContent = `${pokemonSpecialDefense}`;
              speedDisplay.textContent = `${pokemonSpeed}`;

        
              pokemonTypes.forEach(type => {
                const typeElement = document.createElement('div');
                typeElement.textContent = type;
                typesDisplay.appendChild(typeElement);
              });
            })
            .catch(error => {
              console.error("Error fetching Pokémon details:", error);
            });
        } else {

          alert("Pokémon not found");
        }
      });
    } catch (error) {
      console.error("Error:", error);
    }
  })
  .catch(error => {
    console.error("Error:", error);
  });


/* file: styles.css */

Your browser information:

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

Challenge Information:

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

2

you should check what the API returns for a value that is not a pokemon name

3

Please post your HTML as well.

I think it is just the way you are fetching the data initially. The second to last test is the same as the test for “Red” the only difference is the “Red” test is the first real test (after the DOM element tests).

If you put your fetch code inside a function and have it return the promise, then make your click handler async and await that fetch function, it should work.

But you are also “over-fetching” by getting all the data and running find on it, instead of fetching for the single Pokémon on each input. It is a pretty large array you get back. But I guess it is up for debate if you should have many small fetches as needed, or a single large fetch on the initial run.

4

Hey, I’m having the same issue. I just posted it on my profile. Could you check it? My code is very different from this one

5

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