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

JavaScript
1

Tell us what’s happening:

My code works as required but it fails over half a dozen tests like “the ui should contain all the correct information” and “when pikachu is entered it should display this this and this”

it does

Your code so far

<!-- file: index.html -->
<input id="search-input" required>
<button id="search-button">Search</button><br>
<span id="pokemon-name"></span><br>
<span id="pokemon-id"></span><br>
<span id="weight"></span><br>
<span id="height"></span><br>
<span id="types"></span><br>
<span id="hp"></span><br>
<span id="attack"></span><br>
<span id="defense"></span><br>
<span id="special-attack"></span><br>
<span id="special-defense"></span><br>
<span id="speed"></span><br>
<div id="sprite-container"></div>

<script src="script.js"></script>

/* file: script.js */
const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button")





async function fetchPokemon() {

  try {
    const response = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchInput.value}`)


    const data = await response.json();

    const name = document.getElementById("pokemon-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 spriteContainer = document.getElementById("sprite-container");
    

    name.innerText = data.name.toUpperCase();
    id.innerText = data.id;
    weight.innerText = data.weight;
    height.innerText = data.height;
    types.innerText = data.types.map(typeInfo => typeInfo.type.name.toUpperCase()).join(", ");
    hp.innerText = data.stats.find(statInfo => statInfo.stat.name === "hp").base_stat;
    attack.innerText = data.stats.find(statInfo => statInfo.stat.name === "attack").base_stat;
    defense.innerText = data.stats.find(statInfo => statInfo.stat.name === "defense").base_stat;
    specialAttack.innerText = data.stats.find(statInfo => statInfo.stat.name === "special-attack").base_stat;
    specialDefense.innerText = data.stats.find(statInfo => statInfo.stat.name === "special-defense").base_stat;
    speed.innerText = data.stats.find(statInfo => statInfo.stat.name === "speed").base_stat

    const sprite = document.createElement('img');  
    sprite.id = 'sprite';
    sprite.src = data.sprites.front_default;
    spriteContainer.appendChild(sprite)
  }
  catch(err) {
    console.log(err);
    alert("Pokémon not found")
  }
}

searchBtn.addEventListener("click", fetchPokemon);

/* file: styles.css */

Your browser information:

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

Challenge Information:

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

2

hi there, I copied the code you gave above to try it and it failed immediately when I tested with Pikachu as in the input string. It said it was not found in an alert message.

can you double check you shared the correct code? (and have you tested with Pikachu?)

edit: please note that the test says Pikachu with capital P (not pikachu, hopefully you tested with the exact string)

I also tested with small case pikachu followed by 94 and your code also couldn’t handle that (it put two images up on screen)

3

As said, you need to lowercase the input value for the API request.

The #types test is expecting the text to be inside elements. So inside the #types element you need to wrap each type text inside an HTML element.

the #types element should contain a single inner element with the value ELECTRIC

the #types element should contain two inner elements with the text values GHOST and POISON

You can’t keep appending the image without clearing the old content first.

4

my mistake in editing to fix it i sent a version that was not updated here is the correct code i meant

const searchInput = document.getElementById(“search-input”);
const searchBtn = document.getElementById(“search-button”);

async function fetchPokemon() {
const searchTerm = searchInput.value.trim().toLowerCase();

if (!searchTerm) {
alert(“Please enter a Pokémon name or ID.”);
return;
}

try {
const response = await fetch(https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchTerm});

if (!response.ok) {
  throw new Error("Pokémon not found");
}

const data = await response.json();

const name = document.getElementById("pokemon-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 spriteContainer = document.getElementById("sprite-container");

name.innerText = data.name.toUpperCase();
id.innerText = data.id;
weight.innerText = data.weight;
height.innerText = data.height;
types.innerText = data.types.map(typeInfo => typeInfo.type.name.toUpperCase()).join(", ");
hp.innerText = data.stats.find(statInfo => statInfo.stat.name === "hp").base_stat;
attack.innerText = data.stats.find(statInfo => statInfo.stat.name === "attack").base_stat;
defense.innerText = data.stats.find(statInfo => statInfo.stat.name === "defense").base_stat;
specialAttack.innerText = data.stats.find(statInfo => statInfo.stat.name === "special-attack").base_stat;
specialDefense.innerText = data.stats.find(statInfo => statInfo.stat.name === "special-defense").base_stat;
speed.innerText = data.stats.find(statInfo => statInfo.stat.name === "speed").base_stat;


spriteContainer.innerHTML = "";
const sprite = document.createElement('img');
sprite.id = 'sprite';
sprite.src = data.sprites.front_default;
sprite.alt = `${data.name} sprite`;
spriteContainer.appendChild(sprite);

} catch (err) {
console.log(err);
alert(“Pokémon not found. Please check the name or ID and try again.”);
}
}

searchBtn.addEventListener(“click”, fetchPokemon);

5

Tell us what’s happening:

My code seems to work fine but it fails at least 5 tests including

“When the #search-input element contains the value 94 and the #search-button element is clicked, the #types element should contain two inner elements with the text values GHOST and POISON, respectively. Make sure the #types element content is cleared between searches.” and more

i cant figure why its not accepted

Your code so far

<!-- file: index.html -->
<input id="search-input" required>
<button id="search-button">Search</button><br>
<span id="pokemon-name"></span><br>
<span id="pokemon-id"></span><br>
<span id="weight"></span><br>
<span id="height"></span><br>
<span id="types"></span><br>
<span id="hp"></span><br>
<span id="attack"></span><br>
<span id="defense"></span><br>
<span id="special-attack"></span><br>
<span id="special-defense"></span><br>
<span id="speed"></span><br>
<div id="sprite-container"></div>

<script src="script.js"></script>

/* file: script.js */
const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");

async function fetchPokemon() {
  const searchTerm = searchInput.value.trim().toLowerCase();

  if (!searchTerm) {
    alert("Please enter a Pokémon name or ID.");
    return;
  }

  try {
    const response = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchTerm}`);

    if (!response.ok) {
      throw new Error("Pokémon not found");
    }

    const data = await response.json();

    const name = document.getElementById("pokemon-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 spriteContainer = document.getElementById("sprite-container");

    name.innerText = data.name.toUpperCase();
    id.innerText = data.id;
    weight.innerText = data.weight;
    height.innerText = data.height;
    types.innerText = data.types.map(typeInfo => typeInfo.type.name.toUpperCase()).join(", ");
    hp.innerText = data.stats.find(statInfo => statInfo.stat.name === "hp").base_stat;
    attack.innerText = data.stats.find(statInfo => statInfo.stat.name === "attack").base_stat;
    defense.innerText = data.stats.find(statInfo => statInfo.stat.name === "defense").base_stat;
    specialAttack.innerText = data.stats.find(statInfo => statInfo.stat.name === "special-attack").base_stat;
    specialDefense.innerText = data.stats.find(statInfo => statInfo.stat.name === "special-defense").base_stat;
    speed.innerText = data.stats.find(statInfo => statInfo.stat.name === "speed").base_stat;

    // Clear previous sprite before adding a new one
    spriteContainer.innerHTML = "";
    const sprite = document.createElement('img');
    sprite.id = 'sprite';
    sprite.src = data.sprites.front_default;
    sprite.alt = `${data.name} sprite`;
    spriteContainer.appendChild(sprite);
  } catch (err) {
    console.log(err);
    alert("Pokémon not found. Please check the name or ID and try again.");
  }
}

searchBtn.addEventListener("click", fetchPokemon);


/* file: styles.css */

Your browser information:

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

Challenge Information:

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

6

for the example failing test you quoted, did you try to test it specifically and use the browser dev tools to examine the HTML elements you are making? The test is expecting a #types element that is a parent element to two other elements whose values are GHOST and POISON so I would check that first in the dev tools area.

7

Thank you that was it, i just had to append the types as child elements and then fix a typo in the error message

1 Like
8

fyi, you should not create a new topic for the same challenge or project when you need more help. You should instead just reply to the same topic and discuss what you need further there.