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

JavaScript
1

Tell us what’s happening:

I am spinning in circles with tests requiring me to add elements to this project (the sprite image and the types elements). I have tested them various times, and am able to display the image for example if I pull the innerHTML out of my try function (and use my console.log statement to choose an image based on a fixed character’s image), but it doesn’t work within the function itself (either trying to fix the image, or using the object that is returned from the API).

Your code so far

HTML

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <meta type='viewport' content='width=device-width, initial-scale=1' />
    <title>Pokemon search app</title> 
    <link rel='stylesheet' href='styles.css' />
  </head>
  <body>
    <p>Enter a Pokemon character to obtain their vital stats</p>

    <form id='user-form'>
      <input id='search-input' required></input>
      <button type='submit' id='search-button'>Search
      </button>
    </form>
    <div id='identification'>
      <h1 id='pokemon-name'></h1>
      <h1 id='pokemon-id'</h1>
      <div id='sprite-container'>  
      </div>
      <div id='types'>
      </div>
    </div>
    <div id='stature'>
      <h2 id='weight'>Weight: </h2>
      <h2 id='height'>Height: <h2>
    </div>
    <img src='' />
    <p id='types'></p>
    <table>
      <thead>
        <th id='col1'>Trait</th>
        <th id='col2'>Rating</th>
      </thead>
      <tbody>
        <tr>
          <th>HP</th>
          <td id='hp'></td>
        </tr>
        <tr>
          <th>Attack</th>
          <td id='attack'></td>
        </tr>
        <tr>
          <th>Defense</th>
          <td id='defense'></td>
        </tr>
        <tr>
          <th>Special Attack</th>
          <td id='special-attack'></td>
        </tr>
        <tr>
          <th>Special Defense</th>
          <td id='special-defense'></td>
        </tr>
        <tr>
          <th>Speed</th>
          <td id='speed'></td>
        </tr>
      </tbody>
    </table>
    <script src='script.js' ></script>
  </body>
</html>

JS
let pokemonData = 'https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/';

const userInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const form = document.getElementById('user-form');

const pokeName = document.getElementById('pokemon-name');
const pokeId = document.getElementById('pokemon-id');
const types = document.getElementById('types');
const spriteContainer = document.getElementById('sprite-container');
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 findPokemon = async (search) => {
  try{
const response = await fetch(`${pokemonData}${search}`);

const pokemonInfo = await response.json();

//This following code does not generate the image in my html
spriteContainer.innerHTML=`<img id="sprite" src="${pokemonInfo.sprites.front_default}" alt="Image of ${pokemonInfo.name}">`;

console.log(`<img id="sprite" src="${pokemonInfo.sprites.front_default}" alt="Image of ${pokemonInfo.name}">`)

pokeName.textContent=pokemonInfo.name.toUpperCase();
pokeId.textContent=pokemonInfo.id;
for(let i=0; i<pokemonInfo.types.length; i++)
{
  types.innerHTML+=`<p>${pokemonInfo.types[i].type.name}</p> `;
  console.log(`<p>${pokemonInfo.types[i].type.name}</p> `);
};
weight.textContent=`Weight: ${pokemonInfo.weight}`;
height.textContent=`Height: ${pokemonInfo.height}`;
hp.textContent = pokemonInfo.stats[0].base_stat;
attack.textContent = pokemonInfo.stats[1].base_stat;
defense.textContent = pokemonInfo.stats[2].base_stat;
specialAttack.textContent = pokemonInfo.stats[3].base_stat;
specialDefense.textContent = pokemonInfo.stats[4].base_stat;
speed.textContent = pokemonInfo.stats[5].base_stat;

      } catch(e) {
    alert('Pokémon not found')
}
} 

const clearFields = () => {
pokeName.textContent= '';
pokeId.textContent= '';
spriteContainer.innerHTML='';
weight.textContent='';
height.textContent='';
hp.textContent = '';
attack.textContent = '';
defense.textContent = '';
specialAttack.textContent = '';
specialDefense.textContent = '';
speed.textContent = '';
types.innerHTML = '';
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  findPokemon(userInput.value.toLowerCase());
 })

Your browser information:

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

Challenge Information:

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

2
  1. You need to close the start tag correctly in the HTML for this element.
<h1 id='pokemon-id'</h1>
  1. You need to clear the types element content between searches.
3

oof! Thanks for catching that so quickly. I’ve gone in circles looking at my JS file, but good lesson to pay attention to tags around the items giving me trouble.

I’m curious - was there a tool that helped identify this in terms of debugging it so quickly? I spent my time in the console testing the issue to ensure all that code was correct, but didn’t think to look at the html file.

4

For the HTML element, the browser dev tools did help a bit.

Get started with viewing and changing the DOM

It is more about what should happen vs what really happens and then putting it together. That helps you know where to look and what to look for.

There is no silver bullet, but learning and using the browser dev tools is definitely worth it. I guess some of it is also just experience you gain over time.

1 Like