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

JavaScript
1

Tell us what’s happening:

Seems like the second last test on this project is not passing.

The test asks for:

When the #search-input element contains the value 94 and the #search-button element is clicked, you should add an img element with the id of sprite and the src set to the Pokémon’s front_default sprite to the page.

Which is what my code generates:

<img id="sprite" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/94.png" alt="gengar front default sprite">

Is there a bug in what the test expects or did I get something wrong?

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">
  <title>Document</title>
</head>
<body>
  <div>
        <input type="text" id="search-input" placeholder="Search Pokémon" required>
        <button id="search-button">Search</button>
    </div>

    <div id="output">
        <h2 id="pokemon-name">Name: </h2>
        <p id="pokemon-id">ID: </p>
        <p id="weight">Weight: </p>
        <p id="height">Height: </p>
        <p id="types">Type: </p>
        <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>

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

/* file: styles.css */


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

const outputContainer = document.getElementById("output");
const pokemonNameDisplay = document.getElementById("pokemon-name");
const pokemonIdDisplay = document.getElementById("pokemon-id");
const weightDisplay = document.getElementById("weight");
const heightDisplay = document.getElementById("height");
const typesDisplay = document.getElementById("types");
const hpDisplay = document.getElementById("hp")
const attackDisplay = document.getElementById("attack");
const defenseDisplay = document.getElementById("defense");
const specialAttackDisplay = document.getElementById("special-attack");
const specialDefenceDisplay = document.getElementById("special-defense");
const speedDisplay = document.getElementById("speed");

searchButton.addEventListener("click", () => {
  if (!searchInput.value) return;

  fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchInput.value.toLowerCase()}`)
    .then(res => {
      // console.log("res:", res, res.ok);
      if (!res.ok) throw new Error();
      return res.json();
    })
    .then(data => {
      // console.log("data:", data);
      displayPokemon(data);
    })
    .catch(err => {
      console.log("err:", err);
      alert("Pokémon not found");
    });
})

const displayPokemon = (data) => {
  pokemonNameDisplay.textContent = data.name.toUpperCase();
  pokemonIdDisplay.textContent = data.id;
  weightDisplay.textContent = data.weight;
  heightDisplay.textContent = data.height;

data.types.forEach((dataType) => {
  const button = document.createElement("button");
  button.textContent = dataType.type.name.toUpperCase();
  typesDisplay.append(button);
});

hpDisplay.textContent = data.stats.find(stat => stat.stat.name === "hp").base_stat;
attackDisplay.textContent = data.stats.find(stat => stat.stat.name === "attack").base_stat;
defenseDisplay.textContent = data.stats.find(stat => stat.stat.name === "defense").base_stat;
specialAttackDisplay.textContent = data.stats.find(stat => stat.stat.name === "special-attack").base_stat; 
specialDefenceDisplay.textContent = data.stats.find(stat => stat.stat.name === "special-defense").base_stat;
speedDisplay.textContent = data.stats.find(stat => stat.stat.name === "speed").base_stat;

const imgElem = document.createElement("img");
imgElem.setAttribute("id", "sprite");
imgElem.setAttribute("src", data.sprites.front_default);
imgElem.setAttribute("alt", `${data.name.toLowerCase()} front default sprite`);
outputContainer.appendChild(imgElem);
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

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

2

The problem appears to be with creating the image element when clicking search.

Try creating the element in the html and then changing it when clicking the button, as you do with the other stats.

2 Likes
3

Yes, still a bug like the preview one , casher. Bugged

4

Have you tried assigning an image element directly to the html of your output element ?

5

Bumping this thread to see if anyone has found a solution, as I have just ran into a similar issue, the second last test:
When the #search-input element contains the value 94 and the #search-button element is clicked, you should add an img element with the id of sprite and the src set to the Pokémon’s front_default sprite to the page
seems to not pass.

My JavaScript code is similar to the example above, however I created the img element as follows:

 const spriteUrl = data.sprites.front_default;
        const spriteImg = document.createElement("img");
        spriteImg.id = "sprite";
        spriteImg.src = spriteUrl;
        document.body.appendChild(spriteImg);
      })

The image sprites do appear, along with the stats for each Pokemon, when clicking the search button.

Here is console output if that helps provide further context:

// running tests
When the #search-input element contains the value 94 and the #search-button element is clicked, you should add an img element with the id of sprite and the src set to the Pokémon's front_default sprite to the page.
// tests completed
// console output
Error fetching Pokémon data: [Error: Network response was not ok]
[Error: AssertionError: expected false to be true]

from this earlier portion of my code:

const pokemonUrl = `${apiBaseUrl}${searchTerm}`;
    fetch(pokemonUrl)
      .then(response => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      })

If providing the entire .js file would be more helpful, please do let me know, as I am not sure how I should interpret the console error message

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.