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

JavaScript
1

Tell us what’s happening:

Hello! Tried several different ways to cover all requirements, getting the same outcome every time. Still steps 15 and 18 don’t seem to like something about my code. Why? Thanks!

Your code so far

<!-- file: index.html -->
<!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" />
      <link rel="icon" href="#" />
   </head>
   <body>
      <div>
         <input id="search-input" placeholder="Enter Pokémon name" required />
         <button id="search-button">Search</button>
         <div id="pokemon-list">
            <ul id="pokemon-stats-list">
               <li id="pokemon-name"></li>
               <li id="pokemon-id"></li>
               <li id="weight"></li>
               <li id="height"></li>
               <li id="hp"></li>
               <li id="attack"></li>
               <li id="defense"></li>
               <li id="special-attack"></li>
               <li id="special-defense"></li>
               <li id="speed"></li>
            </ul>
            <ul id="types"></ul>
         </div>
      </div>
      <script src="script.js"></script>
   </body>
</html>

/* file: script.js */
const pokemonApi = 'https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/';

const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const pokemonStatsList = document.getElementById('pokemon-stats-list');
const types = document.getElementById('types');

const fetchPokemon = async (inputPokemonName) => {
   const trimmedName = inputPokemonName.trim().toLowerCase();
   if (!trimmedName) {
      alert('Please enter a Pokémon name.');
      return;
   }

   let pokemonUrl = `${pokemonApi}${trimmedName}`;

   try {
      const res = await fetch(pokemonUrl);
      if (!res.ok) {
         alert('Pokémon not found');
         return;
      }

      const data = await res.json();

      pokemonStatsList.innerHTML = `
                    <img id='sprite' src='${data.sprites.front_default}' />
                    <li>${data.name.toUpperCase()}</li>
                    <li>${data.id}</li>
                    <li>${data.weight}</li>
                    <li>${data.height}</li>
                    <li>${data.stats[0].base_stat}</li>
                    <li>${data.stats[1].base_stat}</li>
                    <li>${data.stats[2].base_stat}</li>
                    <li>${data.stats[3].base_stat}</li>
                    <li>${data.stats[4].base_stat}</li>
                    <li>${data.stats[5].base_stat}</li>
                `;

      types.innerHTML = ''; // Clear previous types
      data.types.forEach((type) => {
         let typeItem = document.createElement('li');
         typeItem.textContent = type.type.name.toUpperCase();
         types.appendChild(typeItem);
      });
   } catch (err) {
      console.error('Error fetching data:', err);
      alert('An error occurred while fetching data.');
   }
};

searchButton.addEventListener('click', () => fetchPokemon(searchInput.value));
searchInput.addEventListener('keydown', (event) => {
   if (event.key === 'Enter') {
      fetchPokemon(searchInput.value);
   }
});

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

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

2

Could you explain how each pokemon stat is getting into the correct element?

3

You’re talking about their not having any IDs in the pokemonStatsList.innerHTML assignment?

4

Yeah, each stat is expected in a specific element.

5

interesting, got some different errors now - brb

6

So yeah, those missing IDs were the issue. Thanks :+1: