Build a Pokémon Search App

JavaScript
1

My code is failing the “When the #search-input element contains an invalid Pokemon name and the #search-button element is clicked, an alert should appear with the text "Pokémon not found".” test and I’m not sure why. It seems to be working when I run it…

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pokémon Search App</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <input id="search-input" placeholder="Search criteria" required>
    <button id="search-button">Search</button>
    <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="output"></div>
	<script src="script.js"></script>
  </body>
</html>

const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const pokemonNameDiv = document.getElementById("pokemon-name");
const pokemonIdDiv = document.getElementById("pokemon-id");
const weightDiv = document.getElementById("weight");
const heightDiv = document.getElementById("height");
const typesDiv = document.getElementById("types");
const hpDiv = document.getElementById("hp");
const attackDiv = document.getElementById("attack");
const defenseDiv = document.getElementById("defense");
const specialAttackDiv = document.getElementById("special-attack");
const specialDefenseDiv = document.getElementById("special-defense");
const speedDiv = document.getElementById("speed");
const output = document.getElementById("output");

const allPokemonData = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";
let allPokemon = [];

fetch(allPokemonData)
  .then((res) => res.json())
  .then((data) => {
    allPokemon = data.results;
  })
  .catch((err) => console.error(`There was an error: ${err}`));

const getPokemonSpecs = (pokemon) => {
  const pokemonDataUrl = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemon.id}`;
  
  fetch(pokemonDataUrl)
    .then((res) => res.json())
    .then((data) => {
      pokemonNameDiv.innerHTML = data.name.toUpperCase();
      pokemonIdDiv.innerHTML = `#${data.id}`;
      weightDiv.innerHTML = `Weight: ${data.weight}`;
      heightDiv.innerHTML = `Height: ${data.height}`;
      hpDiv.innerHTML = data.stats[0].base_stat;
      attackDiv.innerHTML = data.stats[1].base_stat;
      defenseDiv.innerHTML = data.stats[2].base_stat;
      specialAttackDiv.innerHTML = data.stats[3].base_stat;
      specialDefenseDiv.innerHTML = data.stats[4].base_stat;
      speedDiv.innerHTML = data.stats[5].base_stat;
      output.innerHTML = `
        <img id="sprite" src="${data.sprites.front_default}">
      `;
      types.innerHTML += data.types.map(el => `<span>${el.type.name.toUpperCase()}</span>`).join("");
    })
    .catch((err) => console.error(`There was an error: ${err}`));
}

searchButton.addEventListener("click", () => {
  const searchCriteria = searchInput.value.toLowerCase();

  typesDiv.innerHTML = "";

  const pokemon = allPokemon.find((el) => el.name === searchCriteria || el.id === parseInt(searchCriteria));

  if (!pokemon) {
     alert("Pokémon not found");
     return;    
  }

  getPokemonSpecs(pokemon);
});
2

Nevermind… I removed one line and it passed.

1 Like