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

JavaScript
1

Tell us what’s happening:

My code is not passing the check below:

"When the #search-input element contains the value Pikachu and the #search-button element is clicked, the #types element should contain a single inner element with the value ELECTRIC (…) "

The HTML of the #types appears to be correct when I print it in the console. Also it is cleaned every time a new search is requested. Could someone help me see what I’m missing here?

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pokemon Searcher</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lilita+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <h1 class='lilita-one-regular'>Pokemon Searcher</h1>
    <main>
        <label for="search-input" class='std-font std-spacing'>Type the pokemon name or ID:</label>
        <input id="search-input" class='std-input' required ></input>
        <button id="search-button" class='std-font std-spacing std-button'>Check</button>
        <div id='pokemon-data' class='hidden' >
          <div id='image-box' class='image-box'>
      <button id='change-sprite-left' class='sprite-button'><i class="fa fa-arrow-circle-o-left fa-2x" aria-hidden="true"></i></button>
        <img id="sprite" width='200px'>
        <button id='change-sprite-right' class='sprite-button'><i class="fa fa-arrow-circle-o-right fa-2x" aria-hidden="true"></i></button></div>
        <div id='pokemon-info'>
          <h2 id='pokemon-name' class='std-spacing'>${nameUpper}</h2>
        <h3 id='pokemon-id' class='std-spacing'>#${order}</h3>
        <h4 id='weight' class='std-spacing'>Weight: ${weight}</h4>
        <h4 id='height' class='std-spacing'>Height: ${height}</h4>
        </div>
        <div id='types' class='std-spacing'>
        </div>
        <div id='pokemon-stats'>
    <table class='std-spacing table'>
      <tr>
        <th>Base</th>
        <th>Stats</th>
      </tr>
      <tr>
        <td>HP</td>
        <td id='hp'>${arrayStats[0]}</td>
      </tr>
      <tr>
        <td>Attack</td>
        <td id='attack'>${arrayStats[1]}</td>
      </tr>
      <tr>
        <td>Defense</td>
        <td id='defense'>${arrayStats[2]}</td>
      </tr>
      <tr>
        <td>Special Attack</td>
        <td id='special-attack'>${arrayStats[3]}</td>
      </tr>
      <tr>
        <td>Special Defense</td>
        <td id='special-defense'>${arrayStats[4]}</td>
      </tr>
      <tr>
        <td>Speed</td>
        <td id='speed'>${arrayStats[5]}</td>
      </tr>
    </table>
    </div>
  </main>
</body>

  <script src="./script.js"></script>
</html>



const srcInput = document.getElementById('search-input');
const srcButton = document.getElementById('search-button');
const pokemonInfo = document.getElementById('pokemon-info');
const pokemonStats = document.getElementById('pokemon-stats');
const pokemonData = document.getElementById('pokemon-data');
const imageBox = document.getElementById('image-box');
const spriteImg = document.getElementById('sprite');
const pokemonType = document.getElementById('types');

function fetchPokemon() {
  const input = srcInput.value
  const formattedInput = input.toLowerCase().replace(' ', '-');
  fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${formattedInput}`)
  .then((res) => res.json())
  .then((data) => {
    createSpriteArray(data);
    postPokemon(data);
  })
  .catch((err) => {
    console.log(err);
    alert("Pokémon not found");
    srcInput.value = '';
  });
}

let spriteArray = [];
let spriteIndex = 1;

const createSpriteArray = (data) => {
  spriteArray = [];
  const {sprites} = data;
  const regex = /default/;
  for (let link in sprites) 
    if (link.match(regex)) {
      spriteArray.push(sprites[link])
    }
  }

const postPokemon = (data) => {
  pokemonType.innerHTML = '';
  const {name, id, height, weight, stats, sprites, types} = data;
  const nameUpper = name.toUpperCase();
  let arrayStats = [];
  stats.forEach((statObj) => {
    arrayStats.push(statObj.base_stat);
  });
  spriteImg.src = sprites.front_default;
  pokemonData.classList.remove('hidden');
  pokemonInfo.innerHTML = `
          <h2 id='pokemon-name' class='std-spacing'>${nameUpper}</h2>
        <h3 id='pokemon-id' class='std-spacing'>#${id}</h3>
        <h4 id='weight' class='std-spacing'>Weight: ${weight}</h4>
        <h4 id='height' class='std-spacing'>Height: ${height}</h4>
        <div id='types' class='std-spacing'>
        </div>
        `;
  
  for (let object of types) {
    const type = object.type.name.toUpperCase();
    pokemonType.innerHTML += `
    <p style='background-color: var(--${object.type.name}'>${type}</p>
    `;
  }

  pokemonStats.innerHTML = `
    <table class='std-spacing table'>
      <tr>
        <th>Base</th>
        <th>Stats</th>
      </tr>
      <tr>
        <td>HP</td>
        <td id='hp'>${arrayStats[0]}</td>
      </tr>
      <tr>
        <td>Attack</td>
        <td id='attack'>${arrayStats[1]}</td>
      </tr>
      <tr>
        <td>Defense</td>
        <td id='defense'>${arrayStats[2]}</td>
      </tr>
      <tr>
        <td>Special Attack</td>
        <td id='special-attack'>${arrayStats[3]}</td>
      </tr>
      <tr>
        <td>Special Defense</td>
        <td id='special-defense'>${arrayStats[4]}</td>
      </tr>
      <tr>
        <td>Speed</td>
        <td id='speed'>${arrayStats[5]}</td>
      </tr>
    </table>
        </div>
        </div>
  `
}

const changeSpriteLeftButton = document.getElementById('change-sprite-left');
const changeSpriteRightButton = document.getElementById('change-sprite-right');

changeSpriteLeftButton.addEventListener('click', () => {
  if (spriteIndex > 0) {
  spriteIndex--;
  spriteImg.src = spriteArray[spriteIndex];
  };
});
changeSpriteRightButton.addEventListener('click', () => {
  if (spriteIndex < spriteArray.length - 1) {
  spriteIndex++;
  spriteImg.src = spriteArray[spriteIndex];
  };
});
srcButton.addEventListener('click', fetchPokemon);



*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --dark-grey: #1b1b32;
  --light-grey: #f5f6f7;
  --beige: #F9DBBA;
  --blue: #5B99C2;
  --dark-blue: #1A4870;
  --navy: #1F316F;
  --electric: #f8d030;
  --normal: #a8a878;
  --fire: #f08030;
  --water: #6890f0;
  --grass: #78c850;
  --ice: #98d8d8;
  --fighting: #c03028;
  --poison: #a040a0;
  --ground: #e0c068;
  --flying: #a890f0;
}

body {
  background-color: var(--dark-blue);
  padding: 50px 0;
  font-family: "Noto Sans", sans-serif;
}

h1 {
  color: white;
  text-align: center;
  font-size: 40px;
}

main 
{background-color: var(--light-grey);
  width: 800px;
  margin: 20px auto;
  padding: 30px 20px 20px 20px;
  border-radius: 2%;
  text-align: center;
}

.std-font {
  font-size: 1.2rem;
}

#types {
  display: flex;
justify-content: center;
}

#types p {
  color: white;
  width: 5rem;
  padding: 5px 5px 10px 5px;
  margin: 5px;
  border-radius: 10%;
}

.std-spacing {
  margin: 5px;
  padding: 5px;
}

.std-input {
  margin: 10px 5px;
  width: 40%;
  padding: 5px;
  font-size: 1.2rem;
  text-align: center;
  border-radius: 10%;
  border: 1px solid black;
}

.std-button {
  background-color: var(--beige);
  padding: 5px;
  border: 1px solid black;
  border-radius: 10%;


}

.table {
  margin: 20px auto;
  padding: 10px;
  text-align: left;
  width:80%;
}

td, th {
  padding: 10px 15px;background-color: white;
  border-radius: 5%;
}

.image-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sprite-button {
  border: none;
  margin: 0 10px;
}

.sprite-button:hover {
  cursor: pointer;
}

.hidden {
  display: none;
}

.lilita-one-regular {
  font-family: "Lilita One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.image {
  height:200px;
}

@media (max-width: 900px) {
  main {
    width: 500px;
  }
}

@media (max-width: 600px) {
  main {
    width: 350px;
  }
}

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

You have two elements with the types id.

You have the initial one in the HTML and then you add it again inside the pokemon-info element, and that one is empty but it comes before the initial one, so it is the one that gets tested. Besides you do not need to add that element again.

 <div id='types' class='std-spacing'></div>

  pokemonInfo.innerHTML = `
          <h2 id='pokemon-name' class='std-spacing'>${nameUpper}</h2>
        <h3 id='pokemon-id' class='std-spacing'>#${id}</h3>
        <h4 id='weight' class='std-spacing'>Weight: ${weight}</h4>
        <h4 id='height' class='std-spacing'>Height: ${height}</h4>
         <!-- here you add it again -->
        <div id='types' class='std-spacing'>
        </div>
        `;
3

Thank you very much!