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

JavaScript
1

Tell us what’s happening:

Not sure why test 15 on are not passing. Also I’m not sure why when searching up “red” after successfully searching a Pokémon prior, the code runs weird, like it does not clear everything before giving the alert of (no Pokémon found)

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content='width=device-width, initial-scale=1.0'>
<link href='styles.css'/>
<title>Pokemon App</title>
</head>
<body>
<img id="logo" src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Pok%C3%A9_Ball_icon.svg/2052px-Pok%C3%A9_Ball_icon.svg.png'/>
<h1>Pokemon Search App</h1>
<div id="card">
  <form>
  <label>Search for Pokemon Name or ID:</label>
  <input id="search-input" required/>
  <button id="search-button">Search</button>
  </form>

  <div id="top-card">
    <div>
      <span id="pokemon-name"></span>
      <span id="pokemon-id"></span>
    </div>
    <div>
      <span id="weight"></span>
      <span id="height"></span>
    </div>
    <img id="pic"></img>
    <div>
      <span id="types"></span>
    </div>

  </div>

  <div id="bottom-card">
    <span class="left-stat">Base</span>
  <span class="right-stat">Stats</span>
  <span id="hp" class="left-stat">HP:</span>
  <span class="right-stat"></span>
  <span id="attack" class="left-stat">Attack:</span>
  <span class="right-stat"></span>
  <span id="defense" class="left-stat">Defense:</span>
  <span class="right-stat"></span>
  <span id="special-attack" class="left-stat">Sp. Attack:</span>
  <span class="right-stat"></span>
  <span id="special-defense" class="left-stat">Sp. Defense</span>
  <span class="right-stat"></span>
  <span id="speed" class="left-stat">Speed:</span>
  <span class="right-stat"></span>
  </div>

</div>

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

/* file: script.js */
let endpoint = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";

const input= document.getElementById('search-input');
const searchBtn= document.getElementById('search-button');
const pokemonName = document.getElementById('pokemon-name');
const pokemonId = document.getElementById('pokemon-id');
const pokemonPic = document.getElementById('pic');
const pokemonWeight= document.getElementById('weight');
const pokemonHeight = document.getElementById('height');
const pokemonType = document.getElementById('types');
const rightStats = document.getElementsByClassName('right-stat');


// show name and number
const displayPokemon = (data) =>{

  if(data){
    console.log('there is data here');
  }else{
    console.log('there is no data');
  }
  pokemonName.innerHTML = data.name.toUpperCase(); 
  pokemonId.innerHTML = ` #`+data.id;
  pokemonWeight.innerHTML = 'Weight: '+data.weight;
  pokemonHeight.innerHTML = 'Height: '+data.height;
  pokemonPic.src = data.sprites.front_default;
  pokemonPic.style.display = 'block';
    
  data.types.forEach((el) =>{ 
    pokemonType.innerHTML += `<p>${el.type.name} </p>`
    console.log('yeh '+el.type.name)
  })

  for(let x = 0; x<6; x++){
    rightStats[x+1].innerHTML = data.stats[x].base_stat; 
  };

}

const clearPokemon = () =>{
   pokemonName.innerHTML = ''; 
  pokemonId.innerHTML = ''; 
  pokemonWeight.innerHTML = ''; 
  pokemonHeight.innerHTML = ''; 
  pokemonPic.src = ''; 
  pokemonPic.style.display = ''; 
  pokemonType.innerHTML = '';
   for(let x = 0; x<=5; x++){
    rightStats[x+1].innerHTML = '';
  };
}

//fetch data
const fetchData = async(pokemon) =>{
try{
  const response = await fetch(pokemon);
  const data = await response.json();
  console.log(data.types);
  displayPokemon(data);


}catch(error){
  clearPokemon();
  alert('Pokémon not found');
  console.log('the err msg'+error.message);
  }
}



//getting value of input
searchBtn.addEventListener('click', ()=>{
  if(input.value){
  console.log('input value is '+input.value)
  }
  endpoint = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${input.value.toLowerCase()}`;
  pokemonType.innerHTML ='';
  fetchData(endpoint);
})

/* file: styles.css */
body{
  background-color:#0a0a23;
  text-align: center;
  
}

#logo{
  width:75px;
  height:75px;
}

h1{
  color: white;
}

#card{
  width: 325px;
  background: white;
  margin: auto;
  border-radius: 25px;
  box-shadow: 10px 10px grey;
}

button{
  background-color: #7f21ab;
  color: white;
  border-radius: 5px;
}

form{
  padding:8px;
}
form input, form button{
  margin-top: 5px;
}

#top-card{
  min-height: 325px;
  display: flex;
  flex-direction: column;
}
#pokemon-name, #pokemon-id, #weight, #height{
  float: left;
  margin-left: 10px;
}

#bottom-card{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 3px;
  color: white;
  padding-bottom: 15px;
}

#bottom-card span{
  background-color: #7f21ab;
  border: 2px solid black;
  padding: 3px;
}

.left-stat{
 margin-left: 7px;
}

.right-stat{
  margin-right: 7px;
}

#types{
  display: flex;
  gap: 5px;
  margin-left:10px;
}

#pic{
  width: 150px;
  height: 150px;
  margin: auto;
  display: none;
}

Your browser information:

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

Challenge Information:

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

2
  • this is updating your intended data in correct places but, test script is looking for those “values” to be in some specific “id” containing html elements, currently they are on “Label” spans and not on “Values” span

see addressing that passes or not, hapy coding :slight_smile:

3

thanks rookie mistake by me

4

dont worry, you’re doing awesome, it can happen to best of us, happy coding :slight_smile: