Pokemon search project

JavaScript
1

Hi guys, I’m not sure what’s wrong with my code. I can’t seem to fetch the data. When I console.log, it gives me an empty object. Also, I don’t know how to e.preventDefault() in a way that the freecodecamp pokedex does it.

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta name="description" content="Pokémon Search App Certification Project" />
    <link rel='stylesheet' href='styles.css'>
    <title>Pokémon Search App</title>
  </head>
  <body>
    <h1>Pokémon Search App</h1>
    <h2>Enter Pokémon ID or Name into the Pokédex:</h2>
    <form>
      <input id='search-input' required>
      <button id='search-button' type='submit'>Search</button>
    </form>
    <div class='pokedex'>
      <div class='display'></div>
      <div class='screen'>
        <span id='pokemon-name'>pika</span>
        <span id='pokemon-id'>25</span>
        <div class='divider'></div>
        <span id='weight'>133</span>
        <span id='height'>133</span>
        <div id='types'></div>
      </div>
      <div class='grid'>
        <div class='stat'><strong>Base</strong></div>
        <div class='stat-value'><strong>Stats</strong></div>
        <div class='stat'>HP:</div>
        <div class='stat-value' id='hp'></div>
        <div class='stat'>Attack:</div>
        <div class='stat-value' id='attack'></div>
        <div class='stat'>Defense:</div>
        <div class='stat-value' id='defense'></div>
        <div class='stat'>Sp. Attack:</div>
        <div class='stat-value' id='special-attack'></div>
        <div class='stat'>Sp. Defense:</div>
        <div class='stat-value' id='special-defense'></div>
        <div class='stat'>Speed:</div>
        <div class='stat-value' id='speed'></div>
      </div>
    </div>
    <h2>til the end I will be with you~~ we will go where our dreams come true</h2>
    <script src='./script.js'></script>
  </body>
</html>

const input = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const screen = document.querySelector(".screen");
const link = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/";

const nameValue = document.getElementById("pokemon-name");
const idValue = document.getElementById("pokemon-id");
const weightValue = document.getElementById("weight");
const heightValue = document.getElementById("height");
const atkValue = document.getElementById("attack");
const defValue = document.getElementById("defense");
const spAtkValue = document.getElementById("special-attack");
const spDefValue = document.getElementById("special-defense");
const speedValue = document.getElementById("speed");

const checkUserInput = () => {
  const pokemon = input.value;
  if (input.value = '') {
    return;
  } else {
    pokedex(pokemon);
  }
}

const fetchPoke = async (fetchLink) => {
  try {
    const response = await fetch(fetchLink);
    const data = await response.json();
    return data;
  } catch (err) {
    console.error(err);
  }
};

const pokedex = (pokemon) => {
  nameValue.innerText = "";
  idValue.innerText = "";
  weightValue.innerText = "";
  heightValue.innerText = "";
  atkValue.innerText = "";
  defValue.innerText = "";
  spAtkValue.innerText = "";
  spDefValue.innerText = "";
  speedValue.innerText = "";
  const fetchLink = link + pokemon;
  const pokeData = fetchPoke(fetchLink);
  if (!pokeData) {
    alert("Pokémon not found");
  } else {
    screen.classList.add("screen-on");
  }; 
};

searchBtn.addEventListener("click", checkUserInput);
2

At what point are you trying to print it to console? Keep in mind fCC console not always is printing the whole information about object, but that will still be available in the browser’s console.

3

if (!pokeData) {
alert(“Pokémon not found”);

This line doesnt work even when i put in 20000 in the search bar

4

Have you looked in the browser’s console at the printed object?

5

I figured it out and got the certification. I put alert(“Pokémon not found”) in the wrong place. It worked when I put under the console.error line.

Thanks for your help!

1 Like
6

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