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

JavaScript
1

Why is my code making all my previous tasks marked as incomplete?

const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const pokemonName = document.getElementById("name");
const id = document.getElementById("pokemon-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const types = document.getElementById("types");
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 pokemonImage = document.getElementById("pokemon-image");

const allPokemon = [
  {
    name: "PIKACHU",
    id: 25,
    weight: 60,
    height: 4,
    hp: 35,
    attack: 55,
    defense: 40,
    specialAttack: 50,
    specialDefense: 50,
    speed: 90,
  }
];

searchBtn.addEventListener("click", () => {
  if (searchInput.value === "Red") {
    alert("Pokémon not found");

searchButton.addEventListener('click', () => {
  const input = searchInput.value.toLowerCase();

  if (input === "Red") {
    alert("Pokémon not found");
  }
  if (input === "pikachu") {
    const pokemon = allPokemon.find(p => p.name.toLowerCase() === "pikachu");

    pokemonName.innerHTML = `${pokemon.name}`;
    pokemonId.innerHTML = `#${pokemon.id}`;
    weight.innerHTML = `${pokemon.weight}`;
    height.innerHTML = `${pokemon.height}`;
    hp.innerHTML = `${pokemon.hp}`;
    attack.innerHTML = `${pokemon.attack}`;
    defense.innerHTML = `${pokemon.defense}`;
    specialAttack.innerHTML = `${pokemon.specialAttack}`;
    specialDefense.innerHTML = `${pokemon.specialDefense}`;
    speed.innerHTML = `${pokemon.speed}`;
  }
});
2

Why is my code marking all the previous tasks incorrect?

const searchInput = document.getElementById(“search-input”);
const searchBtn = document.getElementById(“search-button”);
const pokemonName = document.getElementById(“name”);
const id = document.getElementById(“pokemon-id”);
const weight = document.getElementById(“weight”);
const height = document.getElementById(“height”);
const types = document.getElementById(“types”);
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 pokemonImage = document.getElementById(“pokemon-image”);

const allPokemon = [
{
name: “PIKACHU”,
id: 25,
weight: 60,
height: 4,
hp: 35,
attack: 55,
defense: 40,
specialAttack: 50,
specialDefense: 50,
speed: 90,
}
];

searchBtn.addEventListener(“click”, () => {
if (searchInput.value === “Red”) {
alert(“Pokémon not found”);

searchButton.addEventListener(‘click’, () => {
const input = searchInput.value.toLowerCase();
const pokemon = allPokemon.find(p => p.name.toLowerCase() === input);

if (input === “Red”) {
alert(“Pokémon not found”);
}
if (pokemon) {
pokemonName.innerHTML = ${pokemon.name};
pokemonId.innerHTML = #${pokemon.id};
weight.innerHTML = Weight: ${pokemon.weight};
height.innerHTML = Height: ${pokemon.height};
hp.innerHTML = HP: ${pokemon.hp};
attack.innerHTML = Attack: ${pokemon.attack};
defense.innerHTML = Defense: ${pokemon.defense};
specialAttack.innerHTML = Special Attack: ${pokemon.specialAttack};
specialDefense.innerHTML = Special Defense: ${pokemon.specialDefense};
speed.innerHTML = Speed: ${pokemon.speed};
} else {
pokemonName.innerHTML = “Pokémon not found”;
pokemonId.innerHTML = “”;
weight.innerHTML = “”;
height.innerHTML = “”;
hp.innerHTML = “”;
attack.innerHTML = “”;
defense.innerHTML = “”;
specialAttack.innerHTML = “”;
specialDefense.innerHTML = “”;
speed.innerHTML = “”;
}
});

3

you should use the API provided by them

4

It`s unclear what is happening with your code by copying it like this. I suggest you use the get help option and/or paste the link to the project.

5

if you need help you will need to share all your code, including HTML and CSS

6

I don’t get what you mean by use the API provided, I believe i did

7

Can you provide a link to the project? or use the “Ask for Help” button which will do it for you.

8

I used the API (I think), I don’t know why it’s making all my tasks appear in correct

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pokemon Search App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Pokemon Search App</h1>
    <div id="container">
      <div id="input-field">
        <input id="search-input" required></input>
        <button id="search-button">Search</button>
      </div>
      <div id="pokemon-container">
        <div id="text">
          <p id="pokemon-name">Name: </p>
          <p id="pokemon-id">Id: </p>
          <p id="weight">Weight: </p>
          <p id="height">Height: </p>
          <p id="types">Type: </p>
        </div>
        <div id="pokemon-image"></div>
        <div id="stats">
          <p id="hp">HP: </p>
          <p id="attack">Attack: </p>
          <p id="defense">Defense: </p>
          <p id="special-attack">Special Attack: </p>
          <p id="special-defense">Special Defense: </p>
          <p id="speed">Speed: </p>
        </div>
      </div>
    </div>
  </body>
  <script src="script.js"></script>
</html>

h1 {
  text-align: center;
  padding: 20px;
  font-size: 40px;
}

#container {
  background-color: black;
  height: 800px;
  width: 600px;
  margin: auto;
  padding: auto;
}

#input-field {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}

#search-input {
  height: 45px;
  width: 250px;
  font-size: 30px;
  margin-right: 5px;
}

#search-button {
  height: 51px;
  width: 75px;
  font-size: 15px;
}

#pokemon-container {
  background-color: yellow;
  height: 670px;
  width: 530px;
  margin: 30px auto;
}

#text {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 90%;
  height: 8%;
  margin: auto;
}

#pokemon-name, #weight, #height, #types {
  color: black;
}

#pokemon-name {
  padding-right: 70px;
  padding-left: 5px;
}

#weight {
  padding-right: 55px;
}

#height {
  padding-right: 55px;
}

#types {
  padding-right: 60px;
}

#pokemon-id {
  padding-right: 55px;
}

#pokemon-image {
  background-color: grey;
  height: 270px;
  width: 300px;
  margin: -5px auto;
  align-items: center;
  border: solid black 2px;
}

#stats {
  border: solid black 2px;
  height: 50%;
  width: 80%;
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const pokemonName = document.getElementById("name");
const id = document.getElementById("pokemon-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const types = document.getElementById("types");
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 pokemonImage = document.getElementById("pokemon-image");

const allPokemon = [
  {
    name: "PIKACHU",
    id: 25,
    weight: 60,
    height: 4,
    hp: 35,
    attack: 55,
    defense: 40,
    specialAttack: 50,
    specialDefense: 50,
    speed: 90,
  },
  {
    name: "GENGAR",
    id: 94,
    weight: 405,
    height: 15,
    hp: 60,
    attack: 65,
    defense: 60,
    specialAttack: 130,
    specialDefense: 75,
    speed: 110,
  },
];

searchBtn.addEventListener("click", () => {
  if (searchInput.value === "Red") {
    alert("Pokémon not found");

searchButton.addEventListener('click', () => {
  const input = searchInput.value.toLowerCase();
  const pokemon = allPokemon.find(p => p.name.toLowerCase() === input);

  if (input === "Red") {
    alert("Pokémon not found");
  }
  if (input === "Pikachu") {
    pokemonName.innerHTML = `${pokemon.name}`;
    pokemonId.innerHTML = `#${pokemon.id}`;
    weight.innerHTML = `Weight: ${pokemon.weight}`;
    height.innerHTML = `Height: ${pokemon.height}`;
    hp.innerHTML = `HP: ${pokemon.hp}`;
    attack.innerHTML = `Attack: ${pokemon.attack}`;
    defense.innerHTML = `Defense: ${pokemon.defense}`;
    specialAttack.innerHTML = `Special Attack: ${pokemon.specialAttack}`;
    specialDefense.innerHTML = `Special Defense: ${pokemon.specialDefense}`;
    speed.innerHTML = `Speed: ${pokemon.speed}`;
  } else {
    pokemonName.innerHTML = "Pokémon not found";
    pokemonId.innerHTML = "";
    weight.innerHTML = "";
    height.innerHTML = "";
    hp.innerHTML = "";
    attack.innerHTML = "";
    defense.innerHTML = "";
    specialAttack.innerHTML = "";
    specialDefense.innerHTML = "";
    speed.innerHTML = "";
  }
});
9

Hi @CrikeyCode

You created a variable to store the Pokemon data.

To use the API you need to use the link provided in the project.

Happy coding

10

@Teller

The only thing I see close to that is “front_default” other than that im not sure what link there is.

11

Here is the link to the fCC Pokémon API Proxy

12

how would I use the link you have provided me, could you put it in an example code, like would it be similar to going into my object element or…

13 
if (searchInput.value === "Pikachu") {
    pokemonName.innerHTML = "PIKACHU";
    pokemonId.innerHTML = "25";
    weight.innerHTML = "60";
    height.innerHTML = "4";
    hp.innerHTML = "35";
    attack.innerHTML = "55";
    defense.innerHTML = "40";
    specialAttack.innerHTML = "50";
    specialDefense.innerHTML = "50";
    speed.innerHTML = "90";
    pokemonImage.innerHTML = `
    <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png" id="sprite" alt="pikachu"></img>
    `
    types.innerHTML = "ELECTRIC";
  }

here is the code I have enetered but none of the tasks has been cleared, let me know what I’m doing wrong and how to fix it please

14

You aren’t using the API there. You’re hardcoding and answer.

15

Review the fCC Forum Leaderboard practice project, it covers API.