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

JavaScript
1

Tell us what’s happening:

Hello All!

Screenshot 2025-03-22 at 1.19.55 AM
Screenshot 2025-03-22 at 1.19.55 AM3408×2382 883 KB

Screenshot 2025-03-22 at 1.26.49 AM
Screenshot 2025-03-22 at 1.26.49 AM3408×2382 1.03 MB

Screenshot 2025-03-22 at 1.27.12 AM
Screenshot 2025-03-22 at 1.27.12 AM3408×2382 1.01 MB

I am trying to finish my final Javascript certification project (the build a Pokemon search app project), and while on my end I appear to satisfy all 22 “stories” as fCC calls them; I seem to NEVER pass stories 15, 17, 19, and 21. However, on my end I meet every single required part of every single story to the T; so I am not sure why I continue to fail these four checks. I have attached some pics to show this. I’m so close - please help.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Jeff's Pokemon Search App
    </title>
  </head>
  <body>
    <h1 class="main-header">Searchémon:  The Pokémon Search App</h1>
    <br>
      <input id="search-input" class="search-input" type="text" placeholder="Pokémon name or id" autofocus required>
      <br>
      <button id="search-button" class="button" type="Submit">Searchémon</button>
      <br>
      <div id="cards" class="cards">
        <div id="header" class="header">
          <p id="pokemon-name"></p>
          <p id="pokemon-id"></p>
          <div id="types-container">
            <p id="types"></p>
          </div>
          <div id="sprite-container">
          </div>
        </div>
        <br>
        <div class="divider"></div>
        <br>
        <table id="stats" class="stats">
          <tr>
            <th>STAT:</th>
            <th>VALUE:</th>
          </tr>
          <tr>
            <td>weight:</td>
            <td id="weight"></td>
          </tr>
          <tr>
            <td>height:</td>
            <td id="height"></td>
          </tr>
          <tr>
            <td>hp:</td>
            <td id="hp"></td>
          </tr>
          <tr>
            <td>attack:</td>
            <td id="attack"></td>
          </tr>
          <tr>
            <td>defense:</td>
            <td id="defense"></td>
          </tr>
          <tr>
            <td>special-attack:</td>
            <td id="special-attack"></td>
          </tr>
          <tr>
            <td>special-defense:</td>
            <td id="special-defense"></td>
          </tr>
          <tr>
            <td>speed:</td>
            <td id="speed"></td>
          </tr>
        </table>
        
      </div>
  <script src="script.js"></script>
  </body>
  </html>


const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const typesContainer = document.getElementById("types-container");
const pokeTypes = 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");

let resolveUrl = "";
let typeNamesArr = [];

searchInput.addEventListener("click", clearContent);

let count = 0;

searchButton.addEventListener("click", () => {
  if (count === 0) {
  const input = searchInput.value.trim().toLowerCase();
  let resolveUrl = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${input}`;
  resumeSearch(resolveUrl);
  count += 1;
  } else {
    clearContent();
  }
});

function resumeSearch(resolveUrl) {
  console.log(`resolveUrl: ${resolveUrl}`);
  async function getData() {
  try {
    const response = await fetch(resolveUrl);
    if (!response.ok) {
      console.log("An error has occurred");
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();
    console.log(data);

    pokemonName.innerHTML = `${data.name.toUpperCase()}`;
    pokemonId.innerHTML = `#${data.id}`;
    weight.innerHTML = `${data.weight}`;
    height.innerHTML = `${data.height}`;
    
    hp.innerHTML = `${data.stats[0].base_stat.valueOf()}`;
    attack.innerHTML = `${data.stats[1].base_stat.valueOf()}`;
    defense.innerHTML = `${data.stats[2].base_stat.valueOf()}`;
    specialAttack.innerHTML = `${data.stats[3].base_stat.valueOf()}`;
    specialDefense.innerHTML = `${data.stats[4].base_stat.valueOf()}`;
    speed.innerHTML = `${data.stats[5].base_stat.valueOf()}`;

    const pokemonImage = document.createElement("img");
    pokemonImage.setAttribute("id", "sprite");
    pokemonImage.setAttribute("src", `${data.sprites.front_default}`);
    spriteContainer.appendChild(pokemonImage);
    pokemonImage.style.display = "block";

    for (let i = 0; i < data.types.length; i++) {
      if (data.types[i]) {
        typeNamesArr.push(`${data.types[i].type.name.toUpperCase()}`);
        if (typeNamesArr.length > 1) {
        typeNamesArr.shift();
        }
      }

      typeNamesArr.forEach(displayIt);
      
      function displayIt(item) {
        item = typeNamesArr[typeNamesArr.indexOf(item)];
        const singleItemDisplay = document.createElement("p");
        singleItemDisplay.setAttribute("id", "single-item-display");
        pokeTypes.appendChild(singleItemDisplay);
        singleItemDisplay.style.display = "block";
        return singleItemDisplay.innerHTML = `${item}`;
      }
    }

  } catch (error) {
    console.error(error);
    alert("Pokémon not found");
  }

  }
getData();
}

function clearContent() {
  count = 0;
  searchInput.value = "";
  typeNamesArr = [];
  pokemonName.innerHTML = "";
  pokemonId.innerHTML = "";
  pokeTypes.innerHTML = "";
  

  if (sprite) {
    sprite.remove();
    spriteContainer.remove(pokemonImage);
    pokemonImage.remove();
  }
  
  spriteContainer.innerHTML = "";
  singleItemDisplay.remove();
  weight.innerHTML = "";
  height.innerHTML = "";
  hp.innerHTML = "";
  attack.innerHTML = "";
  defense.innerHTML = "";
  specialAttack.innerHTML = "";
  specialDefense.innerHTML = "";
  speed.innerHTML = "";
  return;
};


* {
  justify-content: center;
  margin: auto;
  font-family: futura;
}

body {
  background-image: linear-gradient(blue, yellow 90%);
  height: 1000px;
}

h1 {
  display: block;
  position: relative;
  font-size: 30px;
  width: 400px;
  font-variant: small-caps;
  text-align: center;
  color: yellow;
  text-shadow: 1px 1px 2px white;
}

#search-input {
  display: block;
  position: relative;
  margin: auto;
  color: white;
  padding: 1px, 1px, 1px, 1px;
  background-color: black;
  border: 2px solid yellow;
  font-size: 22px;
  width: 275px;
  height: 33px;
}

#search-button {
  display: block;
  position: relative;
  margin: auto;
  background-color: yellow;
  color: black;
  height: 35px;
  width: 130px;
  padding: 0px, 0px, 5px, 2px;
  font-size: 22px;
  font-variant: small-caps;
  text-shadow: 1px solid blue;
}

#pokemon-image, #img {
  display: none;
  position: relative;
  height: auto;
  width: auto;
  border: 2px black;
}

#types {
  display: block;
  position: relative;
  color: black;
  font-size: 25px;
  height: auto;
  background-color: white;
  border: 2px solid blue;
}

#single-item-display {
  display: block;
  position: relative;
  color: black;
  font-size: 25px;
  height: 33px;
  width: auto;
  background-color: yellow;
  border: 1px solid blue;
}

.divider {
  border: 1px solid blue;
  background-color: yellow;
  height: 5px;
  width: 350px;
}

.cards {
  display: block;
  position: relative;
  height: auto;
  width: 400px;
  border: 5px solid black;
  font-size: 28px;
  background-color: white;
}

#stats {
  font-family: Arial, Helvetica, sans-serif;
  text-transform: capitalize;
  border-collapse: collapse;
  width: 100%;
}

#stats td, #stats th {
  border: 1px solid #ddd;
  padding: 5px;
}

#stats tr:nth-child(even){background-color: #f2f2f2;}

#stats tr:hover {background-color: yellow;}

#stats th {
  padding-top: 7px;
  padding-bottom: 7px;
  text-align: left;
  background-color: blue;
  color: white;
}

.header {
  font-size: 33px;
  text-align: left;
}

.types {
  font-size: 25px;
}

table {
  border: 1px solid black;
}

th {
  font-size: 25px;
  text-align: left;
}

td {
  font-size: 20px;
  text-align: left;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Challenge Information:

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

2

Could you share your full code with us please? Otherwise it’s tricky to see where you might be going wrong.
Edit your post above and paste your code where indicated, between the set of triple backticks.

3

I would do that but every time I post any code someone yells at me not to.

4

There’s no issue with you posting code if you’re needing help with it. Please don’t post screenshots of code however.

5

Ok, good to know. I’ve edited my post with my HTML, CSS, and JS. I didn’t realize those three boxes were below the forum post creation form. That actually helps a lot…I’ve tried to get help in the past thinking that I had to put my code into the actual text body of my post and always ran into the character limit. So I usually would give up or post a question that didn’t make sense.

Back to my code here…I know it’s not perfect, or elegant, or the most simplified. But it is all my code - and it works for all 22 stories completely (at least on my end).

6

You shouldn’t have global variables like this to stash data in

7

ok, well I had those two there because while I was working on the code I needed to be able to access these outside of the getData function. As I understand it, I would have to make it global (or at least within a higher level block. When I got my code working I decided to leave them there because I didn’t want to risk messing up my code again and having to start over. I figured that because the code satisfies all stories completely - that it wouldn’t matter (especially in this context). If completely perfect code is what you are expecting from people that are teaching this to themselves at home then maybe the instructions should state that.

8

You should use function arguments and return values instead of stashing data in the global scope. Global variable abuse makes your logic harder to trace and often breaks function reusability.

I am not talking about ‘completely perfect code’. Global variables can break the basic functionality. You have failing tests - that means the code is not meting all of the user stories correctly. Global variable misuse is one of the most common reasons why someone mistakenly believes their code works when it doesn’t handle calling the function multiple times with different inputs.