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

JavaScript
1

Tell us what’s happening:

Before adding innerHTML, I created a fetch function and entered input 3. There will be a TypeError: Failed to fetch

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Search Pokemon</title>
        <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>Search Pokemon's web</h1>
        <div class="container">
            <form>
                <label for="search-input">Search Pokemon by name or id</label>
                <input id="search-input">
                <button id="search-button">Search</button>
            </form>
            <div id="pokemon-name"></div>
            <div id="pokemon-id"></div>
            <div id="weight"></div>
            <div id="height"></div>
            <div id="types"></div>
            <div id="hp"></div>
            <div id="attack"></div>
            <div id="defense"></div>
            <div id="special-attack"></div>
            <div id="special-defense"></div>
            <div id="speed"></div>
            <div id="sprite"></div>
            <div id="abilities"></div>
        <script src="script.js"></script>
    </body>
</html>

/* file: script.js */
const searchBtn = document.getElementById("search-button");
const searchInput = document.getElementById("search-input");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const weightHtml = document.getElementById("weight");
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 fetchData = async () => {
  try {
    const res = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchInput.value.toLowerCase().trim()}`);
    const dataPokemon = await res.json();
    const { id, name, sprites, stats, weight} = dataPokemon;
    weightHtml.innerHTML = `<p>Weight: ${weight} </p>`;
  } catch (err) {
     alert(`Pokémon not found ${err}`);
  }
};

searchBtn.addEventListener("click", fetchData);

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

3 is an input data, tolowercase won’t work on it.

1 Like
3

Try again, maybe the server had a bad moment

the url https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/3, works you can try it navigating to it with your browser

1 Like
4

Yes, it did work later. Thank you.

5

Tell us what’s happening:

I tested the code; it worked perfectly, but it did not pass the test.
Could you all please check that for me?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Search Pokemon</title>
        <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>Search Pokemon's web</h1>
        <div class="container">
            <form>
                <label for="search-input">Search Pokemon by name or id</label>
                <input id="search-input" required>
                <button id="search-button">Search</button>
            </form>
            <div id="name-id">
                <div id="pokemon-name"></div>
                <div id="pokemon-id"></div>
            </div>
            <div id="size">
                <div id="weight"></div>
                <div id="height"></div>
            </div>
            <div id="sprite"></div>
            <div id="types"></div>
            <div id="hp"></div>
            <div id="attack"></div>
            <div id="defense"></div>
            <div id="special-attack"></div>
            <div id="special-defense"></div>
            <div id="speed"></div>
            <div id="sprite"></div>
            <div id="abilities"></div>
        <script src="script.js"></script>
    </body>
</html>

/* file: script.js */
const searchBtn = document.getElementById("search-button");
const searchInput = document.getElementById("search-input");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const weightHtml = document.getElementById("weight");
const heightHtml = document.getElementById("height");
const typesHtml = 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 imgPokemon = document.getElementById("sprite")

const fetchData = async () => {
  try {
    reset();

    const res = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchInput.value.toLowerCase()}`);
    const dataPokemon = await res.json();
    const { id, name, sprites, stats, weight, height, types } = dataPokemon;
    pokemonName.innerHTML = `<p>Name: ${name.toUpperCase()}</p>`;
    pokemonId.innerHTML = `<p>Id: ${id}</p>`
    weightHtml.innerHTML = `<p>Weight: ${weight} </p>`;
    heightHtml.innerHTML = `<p>Height: ${height}</p>`
    types.forEach((type) => {
      typesHtml.innerHTML += `<p>type: ${type.type.name} </p>`
    });
    hp.innerHTML = `<p>HP: ${stats[0].base_stat}</p>`;
    attack.innerHTML = `<p>Attack: ${stats[1].base_stat}</p>`;
    defense.innerHTML = `<p>Defense: ${stats[2].base_stat}</p>`;
    specialAttack.innerHTML = `<p>Sp. Attack: ${stats[3].base_stat}</p>`;
    specialDefense.innerHTML = `<p>Sp. Defense: ${stats[4].base_stat}</p>`;
    speed.innerHTML = `<p>Speed: ${stats[5].base_stat}</p>`;
    imgPokemon.innerHTML = `<img src="${sprites.front_default}">`;
  } catch (err) {
    reset();
    alert("Pokémon not found");
  }
};

const reset = () => {
  pokemonName.innerHTML = "";
  pokemonId.innerHTML = "";
  weightHtml.innerHTML = "";
  heightHtml.innerHTML = "";
  typesHtml.innerHTML = "";
  hp.innerHTML = "";
  attack.innerHTML = "";
  defense.innerHTML = "";
  specialAttack.innerHTML = "";
  specialDefense.innerHTML = "";
  speed.innerHTML = "";
  imgPokemon.innerHTML = "";
}

searchBtn.addEventListener("click", fetchData);

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

I have merged your threads. Please keep all questions for each challenge to a single thread.

Open the browser console and submit, read the error messages.

For example:

Error: AssertionError: expected ‘name: pikachu’ to equal ‘pikachu’

So it is expecting pikachu as the text content but found name: pikachu.

1 Like
7

Thank you so much; I had no idea that I could check my code in the console.