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

JavaScript
1

Tell us what’s happening:

I when typing Red in to search index should get error message as per the story however that seems to not be working all prior steps have passed except step 14 is there something incorrect about the if statement?

Your code so far

<!-- file: index.html -->
<input type="text" id="search-input" required>
<button id="search-button">Search</button>
<div>
  <p>Pokémon Name: <span id="pokemon-name"></span></p>
  <p>Pokémon ID: <span id="pokemon-id"></span></p>
  <p>Weight: <span id="weight"></span></p>
  <p>Height: <span id="height"></span></p>
  <p>Types: <span id="types"></span></p>
  <p>HP: <span id="hp"></span></p>
  <p>Attack: <span id="attack"></span></p>
  <p>Defense: <span id="defense"></span></p>
  <p>Special Attack: <span id="special-attack"></span></p>
  <p>Special Defense: <span id="special-defense"></span></p>
  <p>Speed: <span id="speed"></span></p>
</div>
<div id="pokemon-image"></div>


/* file: styles.css */


/* file: script.js */
document.getElementById('search-button').addEventListener('click', () => {
    const searchInput = document.getElementById('search-input').value;

 

  if (searchInput === 'Red') { // 
        alert('Pokémon not found');
        return;
    }

    
    fetch(`https://pokeapi.freecodecamp.dev/api/v1/pokemon/${searchInput.toLowerCase()}`)
    .then(response => {
        if (!response.ok) {
            throw new Error('Pokemon not found');
            
        }
        return response.json();
    })
    .then(data => {
        document.getElementById('pokemon-name').textContent = data.name.toUpperCase();
        document.getElementById('pokemon-id').textContent = `#${data.id}`;
        document.getElementById('weight').textContent = `Weight: ${data.weight}`;
        document.getElementById('height').textContent = `Height: ${data.height}`;
        document.getElementById('hp').textContent = data.hp;
        document.getElementById('attack').textContent = data.attack;
        document.getElementById('defense').textContent = data.defense;
        document.getElementById('special-attack').textContent = data['special-attack'];
        document.getElementById('special-defense').textContent = data['special-defense'];
        document.getElementById('speed').textContent = data.speed;
        
        
        document.getElementById('types').innerHTML = '';
        data.types.forEach(type => {
            const typeElement = document.createElement('span');
            typeElement.textContent = type.toUpperCase();
            document.getElementById('types').appendChild(typeElement);
        });

        
        const spriteElement = document.createElement('img');
        spriteElement.id = 'sprite';
        spriteElement.src = data.sprites.front_default;
        document.getElementById('pokemon-image').innerHTML = '';
        document.getElementById('pokemon-image').appendChild(spriteElement);
    })
    .catch(error => {
        alert(error.message);
    });
});

Your browser information:

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

Challenge Information:

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

2

you should not throw an error there, you should use an alert

3 
 if (searchInput === 'Red') {  
        alert('Pokémon not found');
        return;
    }

are u sure that is what i did for step 14

4 
 if (searchInput === 'Red') {  
       window.alert('Pokémon not found');
        return;
    }

ilenia the test wont pass after step 14 i dont know what to do

5

this is hardcoding, make your code use alert everytime that the pokemon is not found, not only for Red

6

everytime for the rest of the code? ok um thanks for the advice

7

I mean, don’t compare the searchInput to a specific string, but use it to search and if nothing is found then use the alert

8 

if (searchInput ) {  
       alert('Pokémon not found');
        return;
    }

like this i dont get what u mean get it to search and if nothing is found do i use and condition or equal to null or empty string

9

completely delete that

you are doing good with this

you need an alert instead of throwing an error tho

10 
 fetch(`https://pokeapi.freecodecamp.dev/api/v1/pokemon/${searchInput.toLowerCase()}`)
    .then(response => {
        if (!response.ok) {
             alert('Pokemon not found');

so by deleting prevoius if and removing throw new error i do this instead of it? its stillnot working

11

wrong url, the one given in the istructions is
https://pokeapi-proxy.freecodecamp.rocks/

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

its still not passing apparaently

13

you need to use the correct path, that is not the correct path. You can go to the link of the API and read the implementation there

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

i used the path on the website its still stuck this frustrating

15

now you should check what the response is, because going to https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/red gives a response, not an error
also, are you sure of the path you have written? aren’t like you missing a character? I don’t think https://pokeapi-proxy.freecodecamp.rocks/api/pokemonpikachu would work

16

i tried that as well it wont budge from its place this is the last project i need for this course :angry:

17

and don’t you want it to be a good project? so deep breath, be careful of typos

if you have made any changes can you show your latest code?

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

of course i want it to be good this is a franchise i grew up with as well this seems kinda cool

19

What do you want from the API, what url do you want to use?
Because also https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/redpikachu is not want you want to use if I write pikachu in the search input

20

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" . this is the thing well