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

Shabana_Asif · March 8, 2024, 5:20pm

Tell us what’s happening:

Your code so far

This is the challenge which i am unable to solve
When the #search-input element contains the value 94 and the #search-button element is clicked, you should add an img element with the id of “sprite” and the src set to the Pokémon’s front_default sprite to the page.

 document.getElementById("search-button").addEventListener("click", function() {
    var inputValue = document.getElementById("search-input").value;
    if (inputValue === "94") {
        var existingSprite = document.getElementById("sprite");
        if (!existingSprite) {
            var img = document.createElement("img");
            img.id = "sprite";
            img.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/94.png";
            document.body.appendChild(img);
        }
    }
});

This is my code. kindly guide where is mistake and what is.

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

lasjorg · March 8, 2024, 5:51pm

Please post your HTML and all your code.

You should use the API and not look for specific values or hardcode URLs that might change in the API.

You can use 94 as the id for the /api/pokemon/ API endpoint

https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/94

and the response will have the image URL in the sprites object.

Shabana_Asif · March 8, 2024, 5:53pm

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Roman Numeral Converter

    </title>
    <link rel="stylesheet" href="styles.css" />
  </head> 
  <body>
<input id = "search-input" value = "red"required>
<button id = "search-button"></button>
<div id="pokemon-name"></div>
<div id="pokemon-id"></div>
<div id="weight"></div>
<div id="height"></div>
<div id="types"></div>
<div id="hp"></div>
<div id="attack"></div>
<div id="defense"></div>
<div id="special-attack"></div>
<div id="special-defense"></div>
<div id="speed"></div>

   <script src="./script.js"></script>
</body>
</html>

lasjorg · March 8, 2024, 7:02pm

That specific test is passing for me.

But again, it isn’t how you are supposed to code this. Maybe review the two last challenges in the curriculum again. I’m sure they provide some guidance.

Shabana_Asif · March 9, 2024, 7:27am

i review it and make changes but not working

Shabana_Asif · March 9, 2024, 8:32am

document.getElementById("search-button").addEventListener("click", function() {
    var inputValue = document.getElementById("search-input").value.trim();
    
    // Clear the content of the #types element
    document.getElementById("types").innerHTML = "";
    
    // Check if the input value is "94"
    if (inputValue === "94") {
        // Add two inner elements with text values GHOST and POISON to the #types element
        var typeElement1 = document.createElement("div");
        typeElement1.textContent = "GHOST";
        
        var typeElement2 = document.createElement("div");
        typeElement2.textContent = "POISON";
        
        document.getElementById("types").appendChild(typeElement1);
        document.getElementById("types").appendChild(typeElement2);
        
        // Add an img element with id "sprite" and set its src attribute to the Pokémon's front_default sprite
        var imgElement = document.createElement("img");
        
        // Set attributes for the img element
        imgElement.setAttribute("id", "sprite");
        imgElement.setAttribute("src","front_default");
        
        // Append the img element to the page body
        document.body.appendChild(imgElement);

        // Set the values for other elements
        document.getElementById("pokemon-name").textContent = "GENGAR";
        document.getElementById("pokemon-id").textContent = "#94";
        document.getElementById("weight").textContent = "Weight: 405";
        document.getElementById("height").textContent = "Height: 15";
        document.getElementById("hp").textContent = "60";
        document.getElementById("attack").textContent = "65";
        document.getElementById("defense").textContent = "60";
        document.getElementById("special-attack").textContent = "130";
        document.getElementById("special-defense").textContent = "75";
        document.getElementById("speed").textContent = "110";
    }
});


document.getElementById('search-button').addEventListener('click', function() {
    var inputValue = document.getElementById('search-input').value;
    if (inputValue === '94') {
        fetch('https://pokeapi.co/api/v2/pokemon/pikachu')
            .then(response => response.json())
            .then(data => {
                var spriteUrl = data.sprites.front_default;
                var imgElement = document.createElement('img');
                imgElement.id = 'sprite';
                imgElement.src = spriteUrl;
                document.body.appendChild(imgElement);
            })
            .catch(error => console.error('Error fetching Pokémon data:', error));
    }
});

again this is not passing.

lasjorg · March 9, 2024, 5:40pm

That still isn’t correct.

There are hundreds of Pokemon and your code should work for all of them. Supply the API with the data from the user and make decisions based on what it returns. Do not code against the tests by using fixed hardcoded values.

An id or Pokemon name is entered by the user.
Fetch from the API using that value.
If the API returns a Pokemon use that data to update the DOM . If the API returns a 404 and the string “Invalid Pokémon name or id” do what the requirements tell you to and show an alert.

Shabana_Asif · March 9, 2024, 5:55pm



    document.getElementById("search-button").addEventListener("click", function() {
    var inputValue = document.getElementById("search-input").value.trim();

    fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${inputValue.toLowerCase()}`)
        .then(response => {
            if (!response.ok) {
                throw new Error("Invalid Pokémon name or id");
            }
            return response.json();
        })
        .then(data => {
            // Create an img element with id "sprite" and set its src attribute
            var imgElement = document.createElement("img");
            imgElement.setAttribute("id", "sprite");
            imgElement.setAttribute("src", data.sprites.front_default);

            // Append the img element to the page body
            document.body.appendChild(imgElement);

            // Clear the content of the #types element
            var typesElement = document.getElementById("types");
            typesElement.innerHTML = "";

            // Add inner elements with text values of the Pokémon's types to the #types element
            data.types.forEach(type => {
                var typeElement = document.createElement("div");
                typeElement.textContent = type.type.name.toUpperCase();
                typesElement.appendChild(typeElement);
            });
        })
        .catch(error => {
            // Show an alert if the API returns a 404 or an error occurs
            alert(error.message);
        });
});

still not working. i am using the same link which is given by freecodecamp

lasjorg · March 9, 2024, 6:13pm

Saying something doesn’t work isn’t very helpful.

What isn’t working?

What have you tried to debug it?

Open the browser console and run the tests. Look at the error messages.

Read the requirements carefully, you are not alerting the correct string.

If you just keep appending to the DOM by the time the tests get to the image test you have other image elements with the same id in the DOM. For example, you search for Pikachu and then for 94, both images will be on the page with the same id for the elements.

Shabana_Asif · March 10, 2024, 5:54pm

When the #search-input element contains the value 94 and the #search-button element is clicked, you should add an img element with the id of "sprite" and the src set to the Pokémon’s front_default sprite to the page.
this instruction is not fulfilling. or not working.
i am using the Api link but still not working.

document.getElementById('search-button').addEventListener('click', function() {
    var inputValue = document.getElementById('search-input').value;
    if (inputValue.toLowerCase() === 'red') {
        alert("Pokémon not found");
    }
});


document.getElementById('search-button').addEventListener('click', function() {
    var inputValue = document.getElementById('search-input').value;
    if (inputValue.toLowerCase() === 'pikachu') {
        document.getElementById('pokemon-name').innerText = 'PIKACHU';
        document.getElementById('pokemon-id').innerText = '#25';
        document.getElementById('weight').innerText = 'Weight: 60';
        document.getElementById('height').innerText = 'Height: 4';
        document.getElementById('hp').innerText = '35';
        document.getElementById('attack').innerText = '55';
        document.getElementById('defense').innerText = '40';
        document.getElementById('special-attack').innerText = '50';
        document.getElementById('special-defense').innerText = '50';
        document.getElementById('speed').innerText = '90';
    }
});


document.getElementById('search-button').addEventListener('click', function() {
    var inputValue = document.getElementById('search-input').value;
    if (inputValue.toLowerCase() === 'pikachu') {
        fetch('https://pokeapi.co/api/v2/pokemon/pikachu')
            .then(response => response.json())
            .then(data => {
                var spriteUrl = data.sprites.front_default;
                var imgElement = document.createElement('img');
                imgElement.id = 'sprite';
                imgElement.src = spriteUrl;
                document.body.appendChild(imgElement);
            })
            .catch(error => console.error('Error fetching Pokémon data:', error));
    }
});


document.getElementById('search-button').addEventListener('click', function() {
    var inputValue = document.getElementById('search-input').value;
    if (inputValue.toLowerCase() === 'pikachu') {
        fetch('https://pokeapi.co/api/v2/pokemon/pikachu')
            .then(response => response.json())
            .then(data => {
                // Clear previous content of #types element
                var typesElement = document.getElementById('types');
                typesElement.innerHTML = '';

                // Create and append a new inner element with value ELECTRIC to #types element
                var typeElement = document.createElement('div');
                typeElement.innerText = 'ELECTRIC';
                typesElement.appendChild(typeElement);
            })
            .catch(error => console.error('Error fetching Pokémon data:', error));
    }
});

document.getElementById('search-button').addEventListener('click', function() {
    var inputValue = document.getElementById('search-input').value;
    if (inputValue === '94') {
        document.getElementById('pokemon-name').innerText = 'GENGAR';
        document.getElementById('pokemon-id').innerText = '#94';
        document.getElementById('weight').innerText = 'Weight: 405';
        document.getElementById('height').innerText = 'Height: 15';
        document.getElementById('hp').innerText = '60';
        document.getElementById('attack').innerText = '65';
        document.getElementById('defense').innerText = '60';
        document.getElementById('special-attack').innerText = '130';
        document.getElementById('special-defense').innerText = '75';
        document.getElementById('speed').innerText = '110';
    }
});




    // Add event listener to the search button
    document.getElementById("search-button").addEventListener("click", function() {
        // Get the value from the search input
        var searchInputValue = document.getElementById("search-input").value;
        
        // Check if the value is 94
        if (searchInputValue === "94") {
            // Create the img element
            var spriteUrl = data.sprites.front_default;
            var imgElement = document.createElement("img");
            imgElement.id = "sprite";
            imgElement.src = spriteUrl; // Replace "URL_TO_POKEMON_SPRITE" with the actual URL
            
            // Append the img element to the page
            document.body.appendChild(imgElement);
        }
    });




document.getElementById('search-button').addEventListener('click', function() {
    var inputValue = document.getElementById('search-input').value;
    if (inputValue === '94') {
        fetch('https://pokeapi.co/api/v2/pokemon/94')
            .then(response => response.json())
            .then(data => {
                // Clear previous content of #types element
                var typesElement = document.getElementById('types');
                typesElement.innerHTML = '';

                // Iterate through types and add inner elements to #types element
                data.types.forEach(type => {
                    var typeElement = document.createElement('div');
                    typeElement.innerText = type.type.name.toUpperCase();
                    typesElement.appendChild(typeElement);
                });
            })
            .catch(error => console.error('Error fetching Pokémon data:', error));
    }
});

this is my code.

lasjorg · March 10, 2024, 6:25pm

Not sure why you keep coding it like that. But that is not the point of an API. What if I want to search for Bulbasaur or the Pokemon with id 102?

Imagine your Google, would you write a block of code for every possible search input from the user? That would be billions of lines of code.

You are not using the correct API now, it should be the API provided by the challenge.

https://pokeapi-proxy.freecodecamp.rocks/

When the user enters a name or id you use that id or name with the API endpoint.

If they enter zubat you use that input with the https://pokeapi-proxy.freecodecamp.rocks/api/pokemon endpoint by adding the id or name to the URL https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/zubat and fetching using that URL. The API will return data you now need to use to update the DOM with the information of that specific Pokemon.

Shabana_Asif · March 12, 2024, 6:52am

document.getElementById("search-button").addEventListener("click", function() {
    var inputValue = document.getElementById("search-input").value;
    
    // Check if the input value is 94
    if (inputValue === "94") {
        // Create an img element
        var imgElement = document.createElement("img");
        imgElement.id = "sprite";
        
        // Set the source attribute to the Pokémon's front_default sprite
        imgElement.src = "https://pokeapi-proxy.freecodecamp.rocks/";
        
        // Add the img element to the page
        document.body.appendChild(imgElement);
    }
});

Not Working with that API.

lasjorg · March 12, 2024, 6:14pm

Please redo more of the curriculum again. You seem to have gaps in your knowledge that are needed for the project. I might also suggest you look up some tutorials on using an API in the client, if there is a language issue try looking for one in your native language.

Why are you doing this? That isn’t an image URL.

imgElement.src = "https://pokeapi-proxy.freecodecamp.rocks/";

You should only show the result of a single search on the page, per search. You have to clear the result/update the DOM between searches. You can’t just keep appending to the page.
You are still hardcoding values.

Shabana_Asif · March 14, 2024, 11:51am

imgElement.src = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/94.png";

after using this link it not still working. although it is a single image link.

Shabana_Asif · March 14, 2024, 11:53am

When the #search-input element contains the value 94 and the #search-button element is clicked, you should add an img element with the id of "sprite" and the src set to the Pokémon’s front_default sprite to the page.*

now i am writing this code. and it is not still working.

document.getElementById('search-button').addEventListener('click', function() {
    var inputValue = document.getElementById('search-input').value;
    if (inputValue === '94') {
        var img = document.createElement('img');
        img.id = 'sprite';
        img.src = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/94.png';
        document.body.appendChild(img);
    }
});

the is challenge is again failed

lasjorg · March 14, 2024, 5:07pm

We are just going in circles now.

If I tell you something and it doesn’t make sense or you do not understand it please ask a question so it can be clarified. I have already explained the issue, I can’t keep repeating myself.

You can not just keep appending the images to the document body. If you search for a Pokemon and then search again for a Pokemon the result of the first search should not be on the page when the second is shown.
You are still hardcoding values. You have to use the data you get back from the API. Yes, you can fool the test and not do it but that is just pointless.

system · September 13, 2024, 5:16am

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

Topic		Replies	Views
Build a Pokémon Search App Project - Build a Pokémon Search App JavaScript	3	203	September 19, 2024
Build a Pokémon Search App Project - Build a Pokémon Search App JavaScript	5	1221	July 26, 2024
Pokemon Search App Project JavaScript	3	238	December 21, 2024
JS DSA Certificate Final Project Pokemon Search JavaScript	2	414	August 31, 2024
Build a Pokémon Search App Project - Build a Pokémon Search App JavaScript	4	474	July 31, 2024

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

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics