Tell us what’s happening:
ı don’t understand why it’s doesn’t work
When the #search-input element contains the value 94 and the #search-button element is clicked, the values in the #pokemon-name , #pokemon-id , #weight , #height , #hp , #attack , #defense , #special-attack , and #special-defense elements should be GENGAR , #94 or 94 , Weight: 405 or 405 , Height: 15 or 15 , 60 , 65 , 60 , 130 , 75 , and 110 , respectively.
why this is give me error ?
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" href="styles.css">
</head>
<body>
<div class="container">
<h1>Pokémon Search App</h1>
<div class="main">
<form>
<label>Search for Pokémon Name or Id:</label><br>
<input type="text" id="search-input" required>
<button type="submit" id="search-button">Search</button>
</form>
<div class="results">
<h2 id="pokemon-name"></h2>
<span id="pokemon-id"></span>
<div class="skill">
<h4 id="weight"></h4>
<h4 id="height"></h4>
</div>
<div id="types"></div>
</div>
<div class="stats">
<table>
<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>
</table>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
background-color: rgb(175, 232, 137);
color:rgb(149, 100, 17)
}
.container{
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
}
h2{
margin: 20px auto;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode';
text-align: left;
}
.skill{
display: flex;
gap: 15px;
}
h4{
font-weight: 100;
font-style: italic;
}
.poketypes{
display: flex;
flex-direction: row;
}
.pokemon-types{
display: flex;
justify-content: center;
background-color: yellow;
padding: 5px 8px;
margin: 10px 0px 10px 10px;
width: 60px;
border-radius: 5px;
border: 1px solid rgb(250, 198, 100);
color: black;
font-size: 0.9em;
}
.main{
margin:20px auto;
padding: 20px 10px;
background-color: azure;
border-radius: 30px;
filter: drop-shadow(10px 10px 1px rgb(160, 175, 175));
}
label{
display: block;
font-size: 1.2em;
margin-bottom: 0px;
font-family: monospace;
}
input{
height: 35px;
width: 200px;
}
img{
width: 80%;
margin-top:10px;
margin-bottom:10px;
}
button{
width: 80px;
height: 40px;
margin-left: 10px;
background-image: linear-gradient(42deg,rgb(252, 214, 167),rgb(164, 123, 46),rgb(252, 214, 167));
color:white;
font-weight: 600;
font-style: oblique;
border: 0;
border-radius: 15px;
}
.results{
margin: 25px 0 10px 0;
background-color: rgb(222, 249, 249);
height: 400px;
padding: 5px 10px;
}
.stats{
display: flex;
justify-content: center;
margin:0px;
}
th,td{
background-image: linear-gradient(30deg,rgb(180, 154, 119),rgb(202, 177, 143),rgb(180, 154, 119));
color: black;
font-size: 1.45em;
text-align: center;
padding: 5px 25px;
border-radius: 3px;
}
th{
font-style: italic;
}
td{
font-family: 'Gill Sans','Trebuchet MS', sans-serif;
}
table{
border-spacing: 15px 5px;
}
/*
rgb(180, 154, 119)
rgb(202, 177, 143)
*/
const input = document.getElementById('search-input');
const searchBtn = document.getElementById('search-button');
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 results = document.querySelector('.results')
const pokeWeb = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon`;
searchBtn.addEventListener('click',searchPoke)
function searchPoke(e){
e.preventDefault();
let input2 = input.value.toLowerCase()
const fetchData = async ()=>{
try {
const res = await fetch(`${pokeWeb}/${input2}`);
const data = await res.json()
results.innerHTML = `<h2 id="pokemon-name">${data.name.toUpperCase()} <span id="pokemon-id">#${data.id}</span></h2>
<div class="skill">
<h4 id="weight">Weight: ${data.weight}</h4>
<h4 id="height">Height: ${data.height}</h4>
</div>
<img src="${data.sprites.front_default}" alt="${data.name}" id="sprite">
<div class="poketypes" id="types"></div>`;
for(let i = 0; i < data.types.length; i++){
document.querySelector('.poketypes').innerHTML += `<div class="pokemon-types">${data.types[i].type.name.toUpperCase()}</div>`
}
hp.innerText = data.stats[0].base_stat;
attack.innerText = data.stats[1].base_stat;
defense.innerText = data.stats[2].base_stat;
specialAttack.innerText = data.stats[3].base_stat;
specialDefense.innerText = data.stats[4].base_stat;
speed.innerText = data.stats[5].base_stat;
} catch (err) {
alert('Pokémon not found')
results.innerHTML = '';
hp.innerText = '';
attack.innerText = '';
defense.innerText = '';
specialAttack.innerText = '';
specialDefense.innerText = '';
speed.innerText = '';
input.value = '';
console.clear();
}
}
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/120.0.0.0 Safari/537.36 Edg/120.0.0.0
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App
