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

big.fllopper · February 12, 2025, 1:34pm

Tell us what’s happening:

Hi! I’ve built the project in a couple of different ways already, but it seems to fail the 15, 16, 17, 18, 20 and 22 tests. I tried to track what is wrong, but tests don’t provide enough information (I can imagine how difficult it is to make perfect tests). So I’d really appreciate if you could give me a hint. Thank you, fcc team <

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/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15

Challenge Information:

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

big.fllopper · February 12, 2025, 1:37pm

My HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <input id="search-input" required></input>
        <button id="search-button">SEARCH</button>
        <div id="pokemon-card">
          <p id="pokemon-name"></p>
          <img id="sprite"></img>
          <p id="pokemon-id"></p>
          <p id="weight"></p>
          <p id="height"></p>
          <p id="types"></p>
          <p id="hp"></p>
          <p id="attack"></p>
          <p id="defense"></p>
          <p id="special-attack"></p>
          <p id="special-defense"></p>
          <p id="speed"></p>
        </div>
    </main>
    <script src="script.js"></script>
  </body>
</html>

MY CSS

.type-link {
  display: block;
}

.stats {
  background-color: pink;
}

MY JS

const button = document.getElementById("search-button");
const input = document.getElementById("search-input");
const card = document.getElementById("pokemon-card");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = 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 img = document.getElementById("sprite");



let link = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/";
let currentPokemonLink = "";

const fetchData = async () => {
  try {
    const res = await fetch(currentPokemonLink);
    const data = await res.json();
    displayPokemonCard(data);
  } catch (err) {
    alert("Pokémon not found")
    console.log(err);
  }
};

const displayPokemonCard = data => {
  types.innerHTML = "";
  pokemonName.innerHTML = data.name.toUpperCase();
  img.src = data.sprites.front_default;
  img.alt = data.name;
  pokemonId.innerHTML = `#${data.id}`; 
weight.innerHTML = data.weight;
height.innerHTML = data.height;
  types.innerHTML = getTypes(data.types);
  hp.innerHTML = data.stats[0].base_stat;
  attack.innerHTML = data.stats[1].base_stat;
  defense.innerHTML = data.stats[2].base_stat;
  specialAttack.innerHTML = data.stats[3].base_stat;
  specialDefense.innerHTML = data.stats[4].base_stat;
  speed.innerHTML = data.stats[5].base_stat;
}

const getTypes = (types) => {
  let arr = types.map(kind => kind.type.name.toUpperCase());
  return arr.map(type => `<p>${type}</p>`).join(""); //
}


button.addEventListener("click", () => {
  currentPokemonLink = link + input.value;
  fetchData();
})

JeremyLT · February 12, 2025, 1:41pm

It would help if you say what the tests are and what exactly you tried ta trace the issue

big.fllopper · February 12, 2025, 1:51pm

the 15th is basically saying, that the elements with certain ids (pokemon-name etc) don’t have the correct value in them after the button is clicked, even though all the information is displayed in the DOM.

the 16th is saying that I don’t create the img element, even though since I posted my code couple of minutes ago, I’ve already changed it to create img instead of it being there initially

const imgElement = document.createElement("img"); 
imgElement.src = data.sprites.front_default;
imgElement.alt = data.name;
imgElement.id = "sprite";

17th is saying that when the value is ‘pikachu’, types should contain one element ‘ELECTRIC’ which it does.

and the other tests seem to pass for some reason after I changed the way the img is shown

ILM · February 12, 2025, 2:01pm

have you tried your app?
If I write “Pikachu” in the input and press the button, it doesn’t give the desired behaviour

big.fllopper · February 12, 2025, 2:34pm

I’ve noticed a problem - after my last img “fix”, images stacked, but now I’ve changed it
This is my new code:

const button = document.getElementById("search-button");
const input = document.getElementById("search-input");
const card = document.getElementById("pokemon-card");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = 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");


let link = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/";
let currentPokemonLink = "";

const fetchData = async () => {
  try {
    const res = await fetch(currentPokemonLink);
    const data = await res.json();
    displayPokemonCard(data);
  } catch (err) {
    alert("Pokémon not found")
    console.log(err);
  }
};

const displayPokemonCard = data => {
  types.innerHTML = "";
  if (document.getElementById("sprite")) {
    document.getElementById("sprite").remove();
  }
  pokemonName.innerHTML = data.name.toUpperCase();

 const imgElement = document.createElement("img"); 
imgElement.src = data.sprites.front_default;
imgElement.alt = data.name;
imgElement.id = "sprite";

card.appendChild(imgElement);

  pokemonId.innerHTML = `#${data.id}`; 
weight.innerHTML = `Weight: ${data.weight}`;
height.innerHTML = `Height: ${data.height}`;
  types.innerHTML = getTypes(data.types);
  hp.innerHTML = data.stats[0].base_stat;
  attack.innerHTML = data.stats[1].base_stat;
  defense.innerHTML = data.stats[2].base_stat;
  specialAttack.innerHTML = data.stats[3].base_stat;
  specialDefense.innerHTML = data.stats[4].base_stat;
  speed.innerHTML = data.stats[5].base_stat;
}

const getTypes = (types) => {
   return types.map(kind => kind.type.name.toUpperCase()).join(", "); //
}


button.addEventListener("click", () => {
  currentPokemonLink = link + input.value;
  fetchData();
})

Since my original JS code that I posted here:
I’ve added "Height: ", "Weight: "; I’ve changed the way img is rendered; I’ve changed the way getTypes works (now it doesn’t create the p element).

I know my app lacks styles (I want to add them later), but it works exactly like the one that is linked as an example. Here are screenshots of what happens after I enter “pikachu” in mine and in the original one:

I don’t see any difference, other than styling
Can you please at least give me a hint, if it’s some kind of a fundamental mistake in approach, that I’ve made or if it’s just a small thing somewhere in the code
Thenk you for your time

ILM · February 12, 2025, 2:36pm

I do not see that, if I write “Pikachu” I see the alert with Pokemon not found

big.fllopper · February 12, 2025, 2:51pm

Wow, that’s weird. Maybe I’ve accidentally broken something in my code when formatting it for this post. Because I swear, it works on my machine.
Can you please try again? Here’s the code:

const button = document.getElementById("search-button");
const input = document.getElementById("search-input");
const card = document.getElementById("pokemon-card");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = 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");


let link = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/";
let currentPokemonLink = "";

const fetchData = async () => {
  try {
    const res = await fetch(currentPokemonLink);
    const data = await res.json();
    displayPokemonCard(data);
  } catch (err) {
    alert("Pokémon not found")
  }
};

const displayPokemonCard = data => {
  types.innerHTML = "";
  if (document.getElementById("sprite")) {
    document.getElementById("sprite").remove();
  }
  pokemonName.innerHTML = data.name.toUpperCase();

 const imgElement = document.createElement("img"); 
imgElement.src = data.sprites.front_default;
imgElement.alt = data.name;
imgElement.id = "sprite";

card.appendChild(imgElement);

  pokemonId.innerHTML = `#${data.id}`; 
weight.innerHTML = `Weight: ${data.weight}`;
height.innerHTML = `Height: ${data.height}`;
  getTypes(data.types);
  hp.innerHTML = data.stats[0].base_stat;
  attack.innerHTML = data.stats[1].base_stat;
  defense.innerHTML = data.stats[2].base_stat;
  specialAttack.innerHTML = data.stats[3].base_stat;
  specialDefense.innerHTML = data.stats[4].base_stat;
  speed.innerHTML = data.stats[5].base_stat;
}

const getTypes = (typesArray) => {

  typesArray.forEach(typeObj => {
    const typeElement = document.createElement("p");
    typeElement.textContent = typeObj.type.name.toUpperCase();
    types.appendChild(typeElement);
  });
}


button.addEventListener("click", () => {
  currentPokemonLink = link + input.value;
  fetchData();
})

and HTML just in case

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <input id="search-input" required></input>
        <button id="search-button">SEARCH</button>
        <div id="pokemon-card">
          <p id="pokemon-name"></p>
          <p id="pokemon-id"></p>
          <p id="weight"></p>
          <p id="height"></p>
          <p id="types"></p>
          <p id="hp"></p>
          <p id="attack"></p>
          <p id="defense"></p>
          <p id="special-attack"></p>
          <p id="special-defense"></p>
          <p id="speed"></p>
        </div>
    </main>
    <script src="script.js"></script>
  </body>
</html>

And if it still doesn’t work, do you know what might be the issue?

ILM · February 12, 2025, 2:52pm

exact same thing

Why don’t you try yourself to write “Pikachu” and see what happens?

big.fllopper · February 12, 2025, 2:56pm

oh my God. that’s my bad. I didn’t pay attention that the one you write starts with a capital latter😭
I’ve fixed it! Huge thank you. I always liked the nonchalant way you guys try to give hints here and my bad for not getting it. Have a nice day

ILM · February 12, 2025, 2:58pm

I didn’t do it on purpose the first time!
But glad you managed to fix it

Topic		Replies	Views
Build a Pokémon Search App Project - Build a Pokémon Search App JavaScript	3	181	March 8, 2025
Build a Pokémon Search App Project - Build a Pokémon Search App JavaScript	12	99	March 13, 2025
Build a pokemon search app project JavaScript	9	48	March 9, 2025
Build a Pokémon Search App Project - Build a Pokémon Search App JavaScript	10	43	February 27, 2025
Build a Pokémon Search App Project - Build a Pokémon Search App JavaScript	5	29	February 18, 2025

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