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

JavaScript
21

Yeah, and that is a sample of the data, you need to have that work for any possible input, so also if the input is automobile
And what do you see if you go to the link https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/automobile? “Invalid Pokémon name or id”, so that is also the response you receive

22

so im supposed to changed the last thing in the url to what exactly ? how am i going to get that to be invalid in this case

23 
  fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon${searchInput("Red")}`)
    .then(response => {
        if (!response.ok) {
             alert('Pokemon not found');
24

you need a slash before the input. Also, is searchInput a function now?

25 
   
    fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchInput()}`)
    .then(response => {
        if (!response.ok) {
             alert('Pokemon not found');

slash like this?

26

that’s much more like what you need, only that searchInput is still not a function

now you need to see the response…

If you go to https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/automobile
It shows Invalid Pokémon name or id

If you go to https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/pikachu it gives all the infos

27

ok so how is search input supossed to be used here in conjunction to eveyrthing else

[spoiler]
document.getElementById('search-button').addEventListener('click', function() {
    var input = document.getElementById('search-input').value.toLowerCase();
    var apiUrl = 'https://pokeapi-proxy.freecodecamp.rocks/api/pokemon';

    fetch(apiUrl + input)
        .then(response => {
            if (!response.ok) {
                alert('Pokemon not found');
            }
            return response.json();
        })
        .then(data => {
            displayPokemon(data);
        })
        .catch(error => {
            alert(error.message);
        });
});

function displayPokemon(pokemonData) {
    document.getElementById('pokemon-name').innerText = pokemonData.name.toUpperCase();
    document.getElementById('pokemon-id').innerText = `#${pokemonData.id}`;
    document.getElementById('weight').innerText = `Weight: ${pokemonData.weight}`;
    document.getElementById('height').innerText = `Height: ${pokemonData.height}`;

    
    document.getElementById('types').innerHTML = '';

    
    pokemonData.types.forEach(type => {
        var typeElement = document.createElement('span');
        typeElement.textContent = type.type.name.toUpperCase();
        document.getElementById('types').appendChild(typeElement);
    });

    
    document.getElementById('hp').innerText = `HP: ${pokemonData.stats[0].base_stat}`;
    document.getElementById('attack').innerText = `Attack: ${pokemonData.stats[1].base_stat}`;
    document.getElementById('defense').innerText = `Defense: ${pokemonData.stats[2].base_stat}`;
    document.getElementById('special-attack').innerText = `Special Attack: ${pokemonData.stats[3].base_stat}`;
    document.getElementById('special-defense').innerText = `Special Defense: ${pokemonData.stats[4].base_stat}`;
    document.getElementById('speed').innerText = `Speed: ${pokemonData.stats[5].base_stat}`;

    
    var spriteUrl = pokemonData.sprites.front_default;
    var spriteElement = document.createElement('img');
    spriteElement.id = 'sprite';
    spriteElement.src = spriteUrl;
    document.body.appendChild(spriteElement);
}
[/spoiler]

this is what i am using

28

before this add console.log(response) and explore with different values what the API returns

29

it looks like more than the specific case “red”, the alert should work when no pokemon at all is found, meaning: everything else that its not a pokemon, should run the alert.
Is this correct?

1 Like
30

that is correct, the alert should be for anything that is not found in the list of pokemons

1 Like
31

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