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

Tell us what’s happening:

Hi guys, I need help with this. I passed most of the tests except this 2. But if search the name/id of the Pokemon it shows the result accordingly. I tried to fix but i’m still stuck.

" 1. When the #search-input element contains the value Pikachu and the #search-button element is clicked, the values in the #pokemon-name, #pokemon-id, #weight, #height, #hp, #attack, #defense, #special-attack, #special-defense, and #speed elements should be PIKACHU, #25 or 25, Weight: 60 or 60, Height: 4 or 4, 35, 55, 40, 50, 50, and 90, respectively"

" 1. When the #search-input element contains the value 94 and the #search-button element is clicked, the values in the #pokemon-name, #pokemon-id, #weight, #height, #hp, #attack, #defense, #special-attack, #special-defense, and #speedelements should be GENGAR, #94 or 94, Weight: 405 or 405, Height: 15 or 15, 60, 65, 60, 130, 75, and 110, respectively ".

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Share+Tech&family=Share+Tech+Mono&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Pokemon Search App</title>
  </head>
  <body>
    <div id="main-container">
        <h1>Pokémon Search App</h1>
        <div id="second-container">
                <div id="display-card">
                    <div id="description">
                            <div class="search-box">
                                <label id="search-form">Search for Pokémon Name or ID:</label>
                                <input id="search-input" type="text" required></input>
                                <button id="search-button">Search</button>
                            </div>
                        <div id="display-pokemon">
                            <div id="pokemon-name-container">
                                <span id="pokemon-name"></span>
                                <span id="pokemon-id"></span>
                            </div>
                            <div id="pokemon-physical-container">
                                <span id="weight"></span>
                                <span id="height"></span>
                            </div>
                            <div id="pokemon-photo">
                                <img id="sprite">
                            </div>
                            <div id="pokemon-type">
                                <span id="types"></span>
                            </div>
                            <div id="table-stats">
                                <table>
                                    <tr>
                                        <th>Base</th>
                                        <th>Stats</th>
                                    </tr>
                                    <tr>
                                        <td>HP:</td>
                                        <td id="hp"></td>
                                    </tr>
                                    <tr>
                                        <td>Attack:</td>
                                        <td id="attack"></td>
                                    </tr>
                                    <tr>
                                        <td>Defense:</td>
                                        <td id="defense"></td>
                                    </tr>
                                    <tr>
                                        <td>Sp. Attack:</td>
                                        <td id="special-attack"></td>
                                    </tr>
                                    <tr>
                                        <td>Sp. Defense:</td>
                                        <td id="special-defense"></td>
                                    </tr>
                                    <tr>
                                        <td>Speed: </td>
                                        <td id="speed"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
          </div>
        </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

/* file: styles.css */
body {
  background-color: #081c15;
  color: azure;
  font-family: "Share Tech Mono";
}

#display-card {
  height: 700px;
  width: 416px;
  background-color: whitesmoke;
  color: black;
  padding: 20px;
  border-width: 1px;
  border-radius: 16px;
  box-shadow: 12px 8px rgb(123, 255, 0);
}

#display-pokemon {
 display: none;
}

h1 {
  text-align: center;
}

#second-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#description {
  padding-right: 10px;
}
.search-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

#search-form {
  padding-bottom: 10px;
}

#search-input {
  padding-top: 5px;
  border-radius: 5px;
  border-width: 1px;
  padding-left: 10px;
  padding-bottom: 10px;
}

#search-input:focus {
  background-color: #2b9348;
}

#search-button {
  cursor: pointer;
  margin-left: 10px;
  border: solid 1px;
  border-radius: 10px;
  padding: 10px 15px;
  color: black;
  background-color: rgb(123, 255, 0);
  border-color: black;
}
#search-button:hover {
  background-color: #2b9348;
  color: white;
}

#display-pokemon {
  padding-left: 15px;
}

#pokemon-name {
  font-size: 20px;
}

#pokemon-physical-container {
  padding-top: 10px;
  padding-bottom: 10px;
}

#types {
  padding-top: 8px;
}
#pokemon-photo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
}
img {
  height: 100px;
  width: 120px;
}
.types {
  background-color: rgb(123, 255, 0);
  padding: 12px;
  border-radius: 4px;
}
 .types:nth-child(2), .types:nth-child(3), .types:nth-child(4) {
  margin-left: 5px;
 }
#table-stats {
  padding-top: 20px;
  padding-bottom: 20px;
  height: auto;
  font-size: 20px;
}

tr,
td,
th {
  background-color: rgb(123, 255, 0);
  color: black;
  border: solid 1px;
  text-align: center;
  padding: 8px;
  width: 100%;
}

/* file: script.js */
const searchBtn = document.getElementById("search-button");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const pokemonWeight = document.getElementById("weight");
const pokemonHeight = document.getElementById("height");
const pokemonPhoto = document.getElementById("sprite");
const hp = document.getElementById("hp");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const specialAttack = document.getElementById("special-attack");
const specialDefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");
const pokemonTypes = document.getElementById("types");
const displayPokemon = document.getElementById("display-pokemon");

const fetchPokemon = () => {
  const searchInput = document
    .getElementById("search-input")
    .value.toLowerCase();
  displayPokemon.style.display = "none";
  const url = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchInput}`;
  fetch(url)
    .then((res) => res.json())
    .then((data) => {
      const pokemons = data;
      pokemonTypes.textContent = "";
      if (
        searchInput === pokemons.name ||
        searchInput === pokemons.id.toString()
      ) {
        displayPokemon.style.display = "block";
        pokemonName.textContent =
          pokemons.name.toUpperCase();
        pokemonId.textContent = `#${pokemons.id}`;
        pokemonWeight.textContent = `Weight:${pokemons.weight}`;
        pokemonHeight.textContent = `Height:${pokemons.height}`;
        pokemonPhoto.src = pokemons.sprites.front_default;
        const pokemonsTypes = pokemons.types;
        pokemonsTypes.forEach((type) => {
          pokemonTypes.innerHTML += `<span class="types" id="types">${type.type.name}</span>`;
        });
        hp.textContent = `${pokemons.stats[0].base_stat}`;
        attack.textContent = `${pokemons.stats[1].base_stat}`;
        defense.textContent = `${pokemons.stats[2].base_stat}`;
        specialAttack.textContent = `${pokemons.stats[3].base_stat}`;
        specialDefense.textContent = `${pokemons.stats[4].base_stat}`;
        speed.textContent = `${pokemons.stats[5].base_stat}`;
      } else if (
        searchInput !== pokemons.name ||
        searchInput !== pokemons.id.toString()
      ) {
        alert("Pokémon not found");
      }
    })
    .catch((error) => {
      console.log(error);
      alert("Pokémon not found");
    });
};

searchBtn.addEventListener("click", fetchPokemon);

Your browser information:

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

Challenge Information:

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

Welcome to the forum @Hafizshkr

I trouble shooted by removing the css styling.
image

Noticed there is no space after the colons.

Happy coding

1 Like

Thank you very much, I really appreciate your help. I solved it after you point that out. i overlook on that part.

1 Like