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

Tell us what’s happening:

Can pass all the tests except " 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 .". The code does exactly as it says yet I cannot pass this test?

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="container">
        <label for="search-input" required>Search for Pokémon Name or ID: </label><br>
        <div>
            <input type="text" id="search-input">
            <button id="search-button">Search</button>
        </div>
        <div id="pokemon-container">
            <h4><span id="pokemon-name"></span><span id="pokemon-id"></span></h4>
            <p><span id="weight"></span> <span id="height"></span></p>
            <img id="sprite" src="">
            <p id="types"></p>
        </div>
        <table>
            <tr>
                <th>Base</th>
                <th>Stats</th>
            </tr>
            <tr>
                <td>HP:</td>
                <td id="hp" class="stats"></td>
            </tr>
            <tr>
                <td>Attack:</td>
                <td id="attack" class="stats"></td>
            </tr>
            <tr>
                <td>Defense:</td>
                <td id="defense" class="stats"></td>
            </tr>
            <tr>
                <td>Sp.Attack:</td>
                <td id="special-attack" class="stats"></td>
            </tr>
            <tr>
                <td>Sp.Defense:</td>
                <td id="special-defense" class="stats"></td>
            </tr>
            <tr>
                <td>Speed:</td>
                <td id="speed" class="stats"></td>
            </tr>
        </table>
    </div>
</body>
</html>
<script src="script.js"defer></script>
body{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: rgb(26, 26, 56);
}
#container{
    background-color: white;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0.5rem 0.5rem rgb(185, 184, 184);
    width: 450px;
    min-height: 789px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
label{
    font-size: larger;
}
input{
    height: 2rem;
    width: 12rem
}
button{
    padding: 0.9rem;
    background-color: blueviolet;
    color: white;
    border: 0px;
    border-radius: 1.5rem;
    margin-left: 0.5rem;
    cursor: pointer;
}
#pokemon-container{
    background-color: rgb(247, 250, 255);
    width: calc(100% - 2rem);
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 0rem 1rem;
    margin: 1rem 0px;
    visibility:hidden;
}
img{
    display: block;
    width: 12rem;
    margin-left: auto;
    margin-right: auto;
}
#pokemon-name{
    text-transform: uppercase;
    font-size: 1.4rem;
    margin-right: 0.5rem;
}
#pokemon-id{
    font-size: 1.4rem;
}
h4{
    margin-bottom: -1px;
}
#types{
    text-transform: uppercase;
}
#types span{
    font-size: 12px;
    margin-right: 0.4rem;
    background-color: blueviolet;
    padding: 0.5rem 1.2rem;
    border-radius: 0.5rem;
}
table{
    width: 100%;
    border-spacing: 5px;
}
tr{
    text-align: center;
}
th, td{
    background-color: blueviolet;
    color: white;
    font-size: 1.5rem;
    padding: 0.4rem 0px;
}
const allStats = document.querySelectorAll(".stats")
const searchInput = document.querySelector("#search-input")
const searchButton = document.querySelector("#search-button")
const pokemonName = document.querySelector("#pokemon-name")
const pokemonId = document.querySelector("#pokemon-id")
const weight = document.querySelector("#weight")
const height = document.querySelector("#height")
const img = document.querySelector("#sprite")
const types = document.querySelector("#types")
const hp = document.querySelector("#hp")
const attack = document.querySelector("#attack")
const defense = document.querySelector("#defense")
const specialAttack = document.querySelector("#special-attack")
const specialDefense = document.querySelector("#special-defense")
const speed = document.querySelector("#speed")
const pokemonContainer = document.querySelector("#pokemon-container")
const pokemonListUrl = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon"
let pokemonUrlArray;
let found = false
let pokemonUrl = ""
let getPokemonData;

const fetchData = async () =>{
    try {
        let fetchPokemonUrl = await fetch(pokemonListUrl)
        let getPokemonUrl = await fetchPokemonUrl.json()
        pokemonUrlArray = await getPokemonUrl.results
    } catch (err){
        console.log(err)
    }
}
fetchData()

const findPokemon = (arr) =>{
    arr.forEach((pokemon)=>{
        if(Number(pokemon.id)==Number(searchInput.value)){
            pokemonId.textContent = `#${pokemon.id}`
            pokemonName.textContent = pokemon.name
            pokemonUrl = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemon.id}`
            fetchUrl(pokemonUrl)
        } if (pokemon.name.toLowerCase()==searchInput.value.toLowerCase()){
            pokemonName.textContent = pokemon.name
            pokemonId.textContent = `#${pokemon.id}`
            pokemonUrl = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemon.name}`

            fetchUrl(pokemonUrl)
        } 
    })
}

const fetchUrl = async (url)=>{
    found = true
    pokemonContainer.style.visibility = "visible"
    try{
        let fetchPokemonData = await fetch(url)
        getPokemonData = await fetchPokemonData.json()
        updateData(getPokemonData)
    } catch(err){
        console.log(err)
    }
    
}

const updateData = (data) =>{
    let statsArray = data.stats
    let typesArray = data.types
    statsArray.forEach((stat, index)=>{
        allStats[index].textContent=stat.base_stat
    })
    typesArray.forEach((type)=>{
        types.innerHTML+=`<span>${type.type.name}</span>`
    })
    weight.textContent = `Weight: ${data.weight}`
    height.textContent = `Height: ${data.height}`
    img.src=data.sprites.front_default
}

searchButton.addEventListener("click",()=>{
    types.innerHTML = ""
    findPokemon(pokemonUrlArray)
    if (!found){
        alert("Pokémon not found")
        pokemonContainer.style.visibility = "hidden"
    }
    found = false
})

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

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

What happens when you use window.alert instead?

Nothing changes (text)