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

JavaScript
1

Tell us what’s happening: The console does not update with the changes in the script, I have to refresh the page to see them

Your code so far

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta chatset="UTF-8" />
    <title>PokéDex</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>

    <h1>PokéDex</h1>

    <!-- PokéDex case -->
    <main>
      
      <!-- Part 1: Pokémon data and image -->
      <div class="search-photo">

        <!-- Form and data -->
        <div class="input-data">

          <!-- Search input and button -->
          <form>
            <input id="search-input" placeholder="Enter Pokémon name or ID" required/>
            <button id="search-button">SEARCH</button>
          </form>

          <!-- Pokémon Data -->
          <ul class="info-list">
            <li class="list-item">Name: <span id="pokemon-name"></span></li>
            <li class="list-item">ID: <span id="pokemon-id"></span></li>
            <li class="list-item">Weight: <span id="weight"></span></li>
            <li class="list-item">Height: <span id="height"></span></li>
          </ul>
        </div>

        <!-- Poke photo and types -->
        <div class="photo-types">

          <!-- Photo box -->
          <div class="photo">
            <!-- <img id="sprite" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png" alt="pokemon image" /> --> <!-- Most be added, not created -->
          </div>

          <!-- Types box -->
          <div id="types">
          </div>
        </div> 
      </div>
      

      <!-- Part 2: Stats data -->
      <div class="stats-data">
        <table id="stats-table">
          <tr>
            <th>Base</th>
            <th>Stats</th>
          </tr>
          <tr>
            <td>HP: </td>
            <td id="hp">50</td>
          </tr>
          <tr>
            <td>Attack: </td>
            <td id="attack">20</td>
          </tr>
          <tr>
            <td>Defense: </td>
            <td id="defense">14</td>
          </tr>
          <tr>
            <td>Sp. Attack: </td>
            <td id="special-attack">18</td>
          </tr>
          <tr>
            <td>Sp. Defense: </td>
            <td id="special-defense">12</td>
          </tr>
          <tr>
            <td>Speed: </td>
            <td id="speed">30</td>
          </tr>
        </table>
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

JS

const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const pokeName = document.getElementById("pokemon-name");
const pokeId = document.getElementById("pokemon-id");
const pokeWeight = document.getElementById("weight");
const pokeHeight = document.getElementById("height");
const pokeTypes = document.getElementById("types");
const pokeH = document.getElementById("hp");
const pokeAttack = document.getElementById("attack");
const pokeDefense = document.getElementById("defense");
const pokeSpAttack = document.getElementById("special-attack");
const pokeSpDefense = document.getElementById("special-defense");
const pokeSpeed = document.getElementById("speed");
const photoBox = document.querySelector(".photo");
const pokeStats = document.querySelector(".stats-data");
const infoList = document.querySelector(".info-list");

const pokemonData = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/"

const fetchData = async (pokemon) => {
  try {
    const res = await fetch(pokemonData + pokemon);
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.log(err);
  }
}

fetchData("pikachu");

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

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

2

Could you include some more information what’s happening? Or rather: when you are doing X what happens and what you expect to happen instead?

3

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