Build a Pokémon Search App

My code works perfectly fine on my computer and in my vscode, but for some reason, it doesn’t work here

The data is fetched successfully but it seems in FCC editor it’s reflected neither in the console nor in the preview section…

Here is my code:

<!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>
    <img src="https://th.bing.com/th/id/OIG1.kX77FCgX.ExdtZ0wB5RS?pid=ImgGn" alt="logo" class="logo">
    <h1>Pokémon Search App</h1>

    <main>
        <form>
            <label for="search-input">Search for Pokémon Name or ID:</label>
            <div class="input-submit">
                <input type="text" id="search-input" required>
                <button id="search-button">Search</button>
            </div>
        </form>
        <div class="result">
            <h2><span id="pokemon-name"></span> <span id="pokemon-id"></span></h2>
            <p><span id="weight"></span> <span id="height"></span></p>
            <div id="types"></div>
        </div>
        <table class="data-table">
            <thead>
                <tr>
                    <th>Base</th>
                    <th>Stats</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>HP:</td>
                    <td id="hp"></td>
                </tr>
                <tr>
                    <td>Attack:</td>
                    <td id="attack"></td>
                </tr>
                <tr>
                    <td>Defense:</td>
                    <td id="defense"></td>
                </tr>
                <tr>
                    <td>Sp. Attack:</td>
                    <td id="special-attack"></td>
                </tr>
                <tr>
                    <td>Sp. Defense:</td>
                    <td id="special-defense"></td>
                </tr>
                <tr>
                    <td>Speed:</td>
                    <td id="speed"></td>
                </tr>
            </tbody>
        </table>
    </main>
    <script src="script.js"></script>
</body>

</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #040c17;
    color: white;
}

.logo {
    display: block;
    width: 300px;
    margin: 1rem auto;
    height: 300px;
    object-fit: cover;
    border: 1px solid;
    border-radius: 50%;
    animation: ball 2s linear infinite alternate;

}

@keyframes ball {
    0% {
        border-color: #040c17 #040c17 #040c17 white;

    }

    25% {

        border-color: white #040c17 #040c17 #040c17;
    }

    50% {

        border-color: #040c17 white #040c17 #040c17;
    }

    75% {
        border-color: #040c17 #040c17 white #040c17;
    }

    100% {
        border-color: #040c17 #040c17 #040c17 white;
    }
}

h1 {
    text-align: center;
    margin: 2rem auto;
}

/* Main */
main {
    background-color: lightgray;
    width: 500px;
    margin: auto;
    padding: 15px;
    color: #040c17;
    border-radius: 10px;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

}

form label {
    font-size: 1.2rem;
}

form input {
    height: 30px;
    width: 170px;
}

form button {
    height: 30px;
    width: 70px;
    background-color: #040c17;
    color: white;
    transition: 0.5s;
    cursor: pointer;
}

form button:hover {
    background-color: white;
    color: #040c17;
}

.result {

    height: 300px;
    margin: 2rem auto;
}

#sprite {
    display: block;
}

#types {
    display: flex;
    gap: 10px;
}

#types div {
    background-color: #040c17;
    color: white;
    padding: 5px;
    border-radius: 5px;
}

.data-table {
    width: 100%;
}

th,
td {
    text-align: center;
    padding: 8px;
    background-color: #040c17;
    color: white;
}
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const types = document.getElementById("types");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
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 url = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/";
let img;

searchButton.addEventListener("click", (e) => {
  if (searchInput.value != "") {
    e.preventDefault();
    resetAll();
    fetchPokemonData(convertInputValue(searchInput.value));
  }
});

async function fetchPokemonData(nameOrId) {
  try {
    const response = await fetch(url + nameOrId);

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

    data = await response.json();
    console.log(data);

    pokemonName.textContent = data.name.toUpperCase();
    pokemonId.textContent = "#" + data.id;
    weight.textContent = "Weight: " + data.weight;
    height.textContent = "Height: " + data.height;

    img = document.createElement("img");
    img.src = data.sprites.front_default;
    img.id = "sprite";

    types.innerHTML = data.types
      .map((type) => `<div class="type">${type.type.name.toUpperCase()}</div>`)
      .join("");

    height.after(img);
    hp.textContent = data.stats[0].base_stat;
    attack.textContent = data.stats[1].base_stat;
    defense.textContent = data.stats[2].base_stat;
    specialAttack.textContent = data.stats[3].base_stat;
    specialDefense.textContent = data.stats[4].base_stat;
    speed.textContent = data.stats[5].base_stat;
  } catch (error) {
    console.log(error);
    alert("Pokémon not found");
  }
}

function convertInputValue(value) {
  const regex = /[a-z0-9]/gi;
  value = value.match(regex).join("").toLowerCase();
  return value.includes("♀")
    ? `${value}-f`
    : value.includes("♂")
    ? `${value}-m`
    : value;
}

function resetAll() {
  pokemonName.textContent = "";
  pokemonId.textContent = "";
  weight.textContent = "";
  height.textContent = "";
  hp.textContent = "";
  attack.textContent = "";
  defense.textContent = "";
  specialAttack.textContent = "";
  specialDefense.textContent = "";
  speed.textContent = "";
  types.innerHTML = "";
  const img = document.getElementById("sprite");
  if (img) {
    img.remove();
  }
}

Please tell me why is the FCC editor not fetching data in my code?
Thank you in advance!

Hi there. You need to declare your variables before you use them.

1 Like

OMG!
I can’t believe i didn’t notice that!
It actually worked now. Thank you very much!