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

JavaScript
1

Tell us what’s happening:

I have several issues with this project that I need your assistance with:

  1. Are the freeCodeCamp tests working okay? I’ve run code that seems valid severally but I still don’t pass.
  2. When I try to assign data to the innerHTML of my variable ‘types’ it refuses but when I use the query statement it works.

Please help

Your code so far

<!-- file: index.html -->


/* file: script.js */
const input = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const pokeName = document.getElementById("pokemon-name");
const pokeId = document.getElementById("pokemon-id");
const pokeWeight = document.getElementById("weight");
const pokeHeight = document.getElementById("height");
const pokeDisplay = document.getElementById("pokemon-display");

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 types = document.getElementById("types");

let data = [];


const searchPokemon = async () => {
  try {
    const res = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${input.value.toLowerCase()}`);
    data = await res.json();
    const { name, id, weight, height, stats, sprites, types } = data;

    pokeName.innerHTML = name.toUpperCase();
    pokeId.innerHTML = `#${id}`;
    pokeWeight.innerHTML = `Weight: ${weight}`;
    pokeHeight.innerHTML = `Height: ${height}`;
    pokeDisplay.innerHTML = `<img id="sprite" src="${sprites.front_default}">`

    

const typeList = data.types.map((type) => `${type.type.name}`).join(", ").toUpperCase();

console.log(typeList);
document.getElementById("typesContainer").innerHTML = typeList;

    hp.innerHTML = stats[0].base_stat;
    attack.innerHTML = stats[1].base_stat;
    defense.innerHTML= stats[2].base_stat;
    specialAttack.innerHTML = stats[3].base_stat;
    specialDefense.innerHTML = stats[4].base_stat;
    speed.innerHTML = stats[5].base_stat;
    console.log(data);
  }
  catch (err) {
    alert("Pokemon not found");
    console.log(err.message);
  }
 };

searchBtn.addEventListener("click", (e) => {
  e.preventDefault();
  searchPokemon();
  
});
input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    searchPokemon();
  }
})


/* file: styles.css */

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

Can you post your HTML and CSS please?

3

I’ve posted it
Could the problem be there?

4

It could very well be that the issue is some place else in your code. the insturctions are for for HTML but no requirement for CSS so that is not going to matter much.
Note: The code for HTML and CSS didnt show up for some reason.

5 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="style sheet" 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=Mukta:wght@200;300;400;500;600;700;800&family=Playball&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <title>Pokémon Search App</title>
  </head>
  <body>  
    <h1>Pokémon Search App</h1>
    <div id="main-div">
      
      <p>Enter Pokémon Name or ID:</p>
      <div id="input-btn-div" >
        <input id="search-input" required/>
      <button type="button" id="search-button">Search</button>
      </div>
      
      <div id="display">
        <div class="profile-div">
          <span id="pokemon-name"></span>
          <span id="pokemon-id"></span>
        </div>
        <div class="profile-div">
          <span id="weight"></span>
          <span id="height"></span>
        </div>
        <div id="pokemon-display"></div>
        <div id="typesContainer"><span id="types" ></span></div>
        
      </div>
      <div>
        <table>
          <tbody>
        <tr>
          <th>Base</th>
          <th>Stats</th>
        </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>Sp. Attack:</td>
          <td id="special-attack"></td>
        </tr>

        <tr>
          <td>Sp. Defense:</td>
          <td id="special-defense"></td>
        </tr>

        <tr>
          <td>Speed:</td>
          <td id="speed"></td>
        </tr>
      </tbody>
        </table>
      </div>
      
    </div>
    <script src="./script.js"></script>
  </body>
</html>
6 
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #0a0a23;
  font-size: 16px;
  font-family: roboto;
}
h1 {
  color: linen;
  text-align: center;
  margin: 40px auto 30px;
  font-size: 2.5em;
}
#main-div {
  background-color: linen;
  width: 450px;
  height: 700px;
  border-radius: 20px;
  filter :drop-shadow(17px 8px 1px #999);
  margin: auto
}
p {
  text-align: center;
  font-size: 1.3em;
  padding: 20px 0px 15px;
}
#input-btn-div {
  display: flex;
  justify-content: center;
}
input {
  height: 30px;
  margin-right: 10px; 
  font-size: 1em
}
button {
  background-color: orange;
  color: #333;
  width: 60px;
  font-size: em;
  font-weight: 200;
  border-radius: 8px;
  border: 1px solid orange;
}
#display {
  width: 90%;
  height: 41%;
  background-color: white;
  margin: 20px auto;
}
table {
  width: 90%;
  height: 260px;
  margin: auto;
  color: #222;
}
tbody {
  background-color: orange;
}
td {
  text-align: center;
  font-weight: 500;
}
th, td {
  border: 2px solid orange;
}
th {
  font-size: 1.2em;
}
.profile-div {
  width: 200px;
  height:20px;
  padding: 5px 5px;
}
#pokemon-name {
  font-weight: bold;
}
#pokemon-id {
  margin-left: 5px;
  font-weight: bold;
}

#height {
  margin-left: 5px;
}
#pokemon-display {
  display: flex;
  width: 250px;
  height: 185px;
  margin: auto;
  align-content: center;
  justify-content: center
}
#typesContainer {
  height:20px;
  padding: 5px 5px;
}
7

Hey I wasn’t aware it didn’t reflect. I think now it’s up for sure

8

You can check GitHub to see if there are any open issues relating to the pokeman project.

As for the 2nd issue, you should explain what you mean by “it refuses”.
If you are having problems, you can also check the browser console for error messages.

9

It looks like this is related to the id=type you have this listed in a const object but type is grayed out. Looking at the FCC project there is code using type.innerHTML like this: types.innerHTML = data.types
.map(obj => <span class="type ${obj.type.name}">${obj.type.name}</span>)
.join(‘’);
} catch (err) {
resetDisplay();
alert(‘Pokémon not found’);
console.log(Pokémon not found: ${err});
}
};

1 Like
10

the #types element should contain a single inner element with the value ELECTRIC .

the #types element should contain two inner elements with the text values GHOST and POISON ,

You are not adding it to the #types element. But the typesContainer element.

11

I couldn’t find that line in your current code. But I think it’s because you have a global variable called types and another local variable called types as well inside your function.

So when you just use types it will use the local variable which isn’t an element and when you use the query statement it will work.

12

It would be best to not look at solution code when trying to write the code for a certification project because doing so may mean that the work was not fully your own. This also makes it too easy to become dependant on others to solve coding problems instead of developing personal problem-solving skills through personal struggle.

Ideally we want everyone to make their own attempt at writing these projects and get help on the forum as needed.

1 Like
13

Thank you all so much, I made the necessary corrections and it workes

14

Wait so does it mean while doing projects I don’t have to do the CSS and I can just focus all my energy on JS and HTML?

15

it is up to you. The test doesn’t care about the css.

1 Like
16

I guess I could of left that out I didtnt realize this was a certification project.

1 Like
17

Technically, you are not allowed to copy any code from the example. Sure, it doesn’t really matter much because the CSS isn’t tested, but using code you didn’t write is still against the rules. I would avoid doing so.