Build a Pokemon Search App Project

[Chamo1115]

I am working on completing the Build a Pokemon search app and can’t seem to solve test case #21: When the #search-input element contains an invalid Pokemon name and the #search-button element is clicked, an alert should appear with the text "Pokémon not found" .

Has anyone been able to solve this? It doesn’t make sense to me because I type red into the search bar and get the correct alert. I also type gibberish (i.e. irfbhbkjbfaj) and get the same result (correct alert messages comes up). I’m getting every indication that it’s working but for some reason this test case isn’t passing.

Below is a snippet of how I’m solving this issue:

const checkPokemonExist = (pokemon) => {
    fetch(allPokeURL)
        .then((response) => response.json())
        .then((data) => {
            let pokemonInList = false;

            for(let i = 0; i < parseFloat(data.count) - 1; i++){
                
                if(pokemon === data.results[i].name || pokemon === data.results[i].id.toString()){
                    pokemonInList = true;
                }
            }
            
            if(!pokemonInList){
                alert("Pokémon not found")
            } else{
                getPokeData(pokemon);
            }
        });
}

[bappyasif]

hello and welcome to fcc forum

could you share this “step/exercise url” here as well, thanks and happy coding

[lasjorg]

Please post all your code, including the HTML.

How are you handling the case of the input? Is pokemon a lowercase string?

[Chamo1115]

The HTML code is shown below:

The JS code is shown below:

The link for the project: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-pokemon-search-app-project/build-a-pokemon-search-app

[pkdvalis]

Can you please copy/paste the code as text?

Or use the “ask for help” button.

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

[Chamo1115]

Tell us what’s happening:

I am working on completing the Build a Pokemon search app and can’t seem to solve test case #21: When the #search-input element contains an invalid Pokemon name and the #search-button element is clicked, an alert should appear with the text “Pokémon not found” .

It doesn’t make sense to me because I type red into the search bar and get the correct alert. I also type gibberish (i.e. irfbaj) and get the same result (correct alert messages comes up). I’d appreciate any help!

Your code so far

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

/* file: script.js */

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

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

freeCodeCamp.org

[Chamo1115]

I used the Get Help button but I’m not sure it posted all the code correctly. Please see link to the post below:

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

Tell us what’s happening: I am working on completing the Build a Pokemon search app and can’t seem to solve test case #21: When the #search-input element contains an invalid Pokemon name and the #search-button element is clicked, an alert should appear with the text “Pokémon not found” . It doesn’t make sense to me because I type red into the search bar and get the correct alert. I also type gibberish (i.e. irfbaj) and get the same result (correct alert messages comes up). I’d appreciate any he…

[Chamo1115]

The code is provided below as text for reference:

JS:

const allPokeURL = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon"
const pokeInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const pokeName = document.getElementById("pokemon-name");
const pokeID = document.getElementById("pokemon-id");
const pokeWeight = document.getElementById("weight");
const pokeHeight = document.getElementById("height");
const imgContainer = document.getElementById("pokemon-img");
const pokeType = document.getElementById("types");
const pokeHP = document.getElementById("hp");
const pokeAttack = document.getElementById("attack");
const pokeSpecialAttack = document.getElementById("special-attack");
const pokeDefense = document.getElementById("defense");
const pokeSpecialDefense = document.getElementById("special-defense");
const pokeSpeed = document.getElementById("speed");


const checkPokemonExist = (pokemon) => {
    fetch(allPokeURL)
        .then((response) => response.json())
        .then((data) => {
            let pokemonInList = false;

            for(let i = 0; i < parseFloat(data.count) - 1; i++){
                
                if(pokemon === data.results[i].name || pokemon === data.results[i].id.toString()){
                    pokemonInList = true;
                }
            }
            
            if(!pokemonInList){
                alert("Pokémon not found")
            } else{
                getPokeData(pokemon);
            }
        });
}

const getPokeData = (pokemon) => {
    fetch(`${allPokeURL}/${pokemon}`)
        .then((answer) => answer.json())
        .then((pokeData) => {
            fillPokemonContainer(pokeData);
            fillStatsContainer(pokeData);
        })
}

const fillPokemonContainer = (data) => {
    pokeType.innerHTML = "";

    pokeName.textContent = `Name: ${data["name"].toUpperCase()}`
    pokeID.textContent = `ID: #${data["id"]}`
    pokeHeight.textContent = `Height: ${data["height"]}`
    pokeWeight.textContent = `Weight: ${data["weight"]}`
    imgContainer.innerHTML = `<img id="sprite" src="${data.sprites.front_default}" alt="${data["name"]}"/>`;

    data.types.forEach((type) => pokeType.innerHTML += `<a src="${type.type.url}" target="_blank">${type.type.name.toUpperCase()}</a>`);
}

const fillStatsContainer = (data) => {
    pokeHP.textContent = `${data.stats["0"].base_stat}`
    pokeAttack.textContent = `${data.stats["1"].base_stat}`
    pokeSpecialAttack.textContent = `${data.stats["3"].base_stat}`
    pokeDefense.textContent = `${data.stats["2"].base_stat}`
    pokeSpecialDefense.textContent = `${data.stats["4"].base_stat}`
    pokeSpeed.textContent = `${data.stats["5"].base_stat}`
}

searchBtn.addEventListener("click",()=>{
    const desiredPokemon = pokeInput.value.toLowerCase(); 
    checkPokemonExist(desiredPokemon);
});

HTML:

<!DOCTYPE html>
<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>Pokemon Pokedex</title>
        <link rel="stylesheet" href="BuildPokedex.css" />
    </head>
    <body>
        <div id="title-container">
            <h1 id="title">POKEDEX</h1>
        </div>
        <main id="pokedex">
            <div id="input-container"> 
                <label id="search-label">Search Pokemon by Name or #: </label><input id="search-input" required></input>
                <button id="search-button" class="search-button">PokeSearch</button>
            </div>
            <div id="pokemon-container">
                <div>
                    <span id="pokemon-name"></span>
                    <span id="pokemon-id"></span>
                </div>
                <div>
                    <span id="weight"></span>
                    <span id="height"></span>
                </div>
                <div id="pokemon-img"></div>
                <span id="types"></span>
            </div>
            <div id="stats-container">
                <label>HP:<span id="hp"></span></label>
                <label>Attack: <span id="attack"></span></label>
                <label>Special Attack: <span id="special-attack"></span></label>
                <label>Defense: <span id="defense"></span></label>
                <label>Special Defense: <span id="special-defense"></span></label>
                <label>Speed: <span id="speed"></span></label>
            </div>
        </main>
    </body>
    <script src="BuildPokedex.js"></script>
</html>

[MostafaElbadry]

The JavaScript file on freeCodeCamp is called script.js, but you used BuildPokedex.js in your <script> tag.
It will work on your local machine, but you should use the correct file names to work on freeCodeCamp. The same goes for the CSS file.
At the top, you will see the names of all files for HTML, CSS and JavaScript.

For tests, it checks your #pokemon-name and #pokemon-id elements for values like GENGAR and (#94 or 94), but your JavaScript adds Name: and ID: before them.

[pkdvalis]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[Chamo1115]

I have completed the changes above but I still can’t get test case #21 to pass. For reference, test case #21 says the following, " 21. When the #search-input element contains an invalid Pokemon name and the #search-button element is clicked, an alert should appear with the text "Pokémon not found" ."

Please see the modified code below:

<!DOCTYPE html>
<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>Pokemon Pokedex</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="title-container">
            <h1 id="title">POKEDEX</h1>
        </div>
        <main id="pokedex">
            <div id="input-container"> 
                <label id="search-label">Search Pokemon by Name or #: </label><input id="search-input" required></input>
                <button id="search-button" class="search-button">PokeSearch</button>
            </div>
            <div id="pokemon-container">
                <div>
                    <span id="pokemon-name"></span>
                    <span id="pokemon-id"></span>
                </div>
                <div>
                    <span id="weight"></span>
                    <span id="height"></span>
                </div>
                <div id="pokemon-img"></div>
                <span id="types"></span>
            </div>
            <div id="stats-container">
                <label>HP:<span id="hp"></span></label>
                <label>Attack: <span id="attack"></span></label>
                <label>Special Attack: <span id="special-attack"></span></label>
                <label>Defense: <span id="defense"></span></label>
                <label>Special Defense: <span id="special-defense"></span></label>
                <label>Speed: <span id="speed"></span></label>
            </div>
        </main>
    </body>
    <script src="script.js"></script>
</html>

const allPokeURL = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon"
const pokeInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const pokeName = document.getElementById("pokemon-name");
const pokeID = document.getElementById("pokemon-id");
const pokeWeight = document.getElementById("weight");
const pokeHeight = document.getElementById("height");
const imgContainer = document.getElementById("pokemon-img");
const pokeType = document.getElementById("types");
const pokeHP = document.getElementById("hp");
const pokeAttack = document.getElementById("attack");
const pokeSpecialAttack = document.getElementById("special-attack");
const pokeDefense = document.getElementById("defense");
const pokeSpecialDefense = document.getElementById("special-defense");
const pokeSpeed = document.getElementById("speed");



let pokemonInList = false;

const checkPokemonExist = (pokemon) => {
    fetch(allPokeURL)
        .then((response) => response.json())
        .then((data) => {
            
            for(let i = 0; i < parseFloat(data.count) - 1; i++){
                
                if(pokemon === data.results[i].name){
                    pokemonInList = true;
                }
            }

            if(!pokemonInList){
                alert("Pokémon not found")
            } else{
                getPokeData(pokemon);
            }
        });
}

const getPokeData = (pokemon) => {
    fetch(`${allPokeURL}/${pokemon}`)
        .then((answer) => answer.json())
        .then((pokeData) => {
            //console.log(pokeData);
            fillPokemonContainer(pokeData);
            fillStatsContainer(pokeData);
        })
}

const fillPokemonContainer = (data) => {
    pokeType.innerHTML = "";

    pokeName.textContent = `${data["name"].toUpperCase()}`
    pokeID.textContent = `#${data["id"]}`
    pokeHeight.textContent = `Height: ${data["height"]}`
    pokeWeight.textContent = `Weight: ${data["weight"]}`
    imgContainer.innerHTML = `<img id="sprite" src="${data.sprites.front_default}" alt="${data["name"]}"/>`;

    data.types.forEach((type) => pokeType.innerHTML += `<a src="${type.type.url}" target="_blank">${type.type.name.toUpperCase()}</a>`);
}


const fillStatsContainer = (data) => {
    pokeHP.textContent = `${data.stats["0"].base_stat}`
    pokeAttack.textContent = `${data.stats["1"].base_stat}`
    pokeSpecialAttack.textContent = `${data.stats["3"].base_stat}`
    pokeDefense.textContent = `${data.stats["2"].base_stat}`
    pokeSpecialDefense.textContent = `${data.stats["4"].base_stat}`
    pokeSpeed.textContent = `${data.stats["5"].base_stat}`
}

searchBtn.addEventListener("click",()=>{
    const desiredPokemon = pokeInput.value.toLowerCase(); 

    checkPokemonExist(desiredPokemon);

});

[Chamo1115]

Thank you for the support!

[MostafaElbadry]

@Chamo1115

let pokemonInList = false;

You moved it to the global scope, once it’s true , it will never change back to false, because there is no code resetting it to false before the for loop.

@Chamo1115

 if(pokemon === data.results[i].name){

You also removed the second condition in the || operator. Now, you’re only checking for the name, but what if the user enters the id instead ?

[Chamo1115]

Thank you for the support! I was able to fix it and submit it successfully.