Tell us what’s happening: keeps getting these X When the #search-input element contains the value Pikachu and the #search-button element is clicked, the values in the #pokemon-name , #pokemon-id , #weight , #height , #hp , #attack , #defense , #special-attack , #special-defense , and #speed elements should be PIKACHU , #25 or 25 , Weight: 60 or 60 , Height: 4 or 4 , 35 , 55 , 40 , 50 , 50 , and 90 , respectively.
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">
<title>Pokémon Search App</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<!--body starts here-->
<body>
<header>
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freecodecamplogo">
<h1>Pokémon Search App</h1>
</header>
<!--start of the search part-->
<div class="container">
<div class="app">
<div class="top-part">
<div>
<p class="top-paragraph">Search for Pokémon Name or ID:</p>
</div>
<div>
<input type="text" id="search-input" required>
<button type="button" id="search-button">Search</button>
</div>
</div>
<div class="result">
<div id="pokemon-name"></div>
<div id="pokemon-id"></div>
<div id="height"></div>
<div id="weight"></div>
</div>
<div id="poke-img"> <img src="" alt="" id="i"></div>
<div id="types">
</div>
<div id="stats">
<div class="box"><p>Base</p></div>
<div class="box"><p>Stats</p></div>
<div id="hp-box" class="box"><p>HP</p></div>
<div class="box" id="hp" ></div>
<div id="attack-box" class="box"><p>Attack</p></div>
<div class="box" id="attack"></div>
<div id="defense-box" class="box"><p>Defense</p></div>
<div class="box" id="defense"></div>
<div id="special-attack-box" class="box"><p>Sp. attack</p></div>
<div class="box" id="special-attack"></div>
<div id="special-defense-box" class="box"><p>Sp. defense</p></div>
<div class="box" id="special-defense"></div>
<div id="speed-box" class="box"><p>Speed</p></div>
<div class="box" id="speed"></div>
</div>
</div>
</div>
<script src="script.js">
</script>
</body>
</html>
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 pokeImg = document.getElementById('poke-img');
const hpBox = document.getElementById('hp');
const attackBox = document.getElementById('attack');
const defenseBox = document.getElementById('defense');
const specialAttackBox = document.getElementById('special-attack');
const specialDefenseBox = document.getElementById('special-defense');
const speed = document.getElementById('speed');
const types = document.getElementById('types');
//const namePoke = searchInput;
//const latest =`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${namePoke}`;
const fetchData = async()=>{
try{
const searchInput = document.getElementById('search-input').value.toLowerCase();
const latest =`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchInput}`;
const res = await fetch(latest);
const data = await res.json();
console.log(data);
console.log(searchInput);
showPoke(data);
typeViewer(data);
}
catch(err){
alert('pokemon not found');
}
};
const showPoke =(data)=>{
const {name, weight, height,id} = data;
pokeName.textContent = name.toUpperCase();
pokeId.textContent = `#${id}` ;
pokeHeight.textContent = `Hieght: ${height}`;
pokeWeight.textContent = `Weight: ${weight}`;
const {avatar} = data.sprites.front_default;
pokeImg.innerHTML = `<img width="150px" src='${data.sprites.front_default}' alt='${name}' id='sprite'>`;
hpBox.innerHTML = `<p>${data.stats[0].base_stat}</p>`;
attackBox.innerHTML =`<p> ${data.stats[1].base_stat}</p>`;
defenseBox.innerHTML =`<p> ${data.stats[2].base_stat}</p>`;
specialAttackBox.innerHTML=`<p>${data.stats[3].base_stat}</p>`;
specialDefenseBox.innerHTML = `<p> ${data.stats[4].base_stat}</p>`;
speed.innerHTML= `<p>${data.stats[5].base_stat}</p>`;
console.log(name);
};
const typeViewer = (data)=>{
if(data.types.length === 1 ){
types.innerHTML = `<p>${data.types[0].type.name.toUpperCase()}</p>`;
console.log(data.types[0].type.name);
return;}
if(data.types.length === 2){
types.innerHTML =`<p class="type-text">${data.types[0].type.name.toUpperCase()}</p>
<p class="type-text">${data.types[1].type.name.toUpperCase()}</p>`;
return;
}
}
searchBtn.addEventListener('click', fetchData);
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App
