I know y my type tests isnt passing bc i havent put them down yet but the tests that ask for the stats wont pass even though I have them displayed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pokemon search app</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 id="title">pokemon search app</h1>
<div id="frame">
<p id="search">Search for Pokémon Name or ID:</p>
<div id="search-frame">
<input id="search-input" required>
<button id="search-button" >search</button>
</div>
<div id="info-box">
<div id="avatar">
<h3 id="pokemon-name">groudon</h2>
<h3 id="pokemon-id">#0383</h3>
</div>
<div id="weight" >
</div>
<div id="height">
</div>
<img id="sprite"src ="https://archives.bulbagarden.net/media/upload/2/28/0383Groudon.png" />
<div id="types">
</div>
<div id="hp">
Hp:
</div>
<div id="attack">
Attack:
</div>
<div id="defense">
Defense:
</div>
<div id="special-attack">
Sp. Attack:
</div>
<div id="special-defense">
Sp. Defense:
</div>
<div id="speed">
Speed:
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body{
display: flex;
flex-direction: column;
align-items: center;
}
#title{
text-align: center;
}
#frame{
display: block;
border: 1px solid red;
width: 60%;
height: 100%;
}
#search{
text-align: center;
}
#search-frame{
display:flex;
justify-content: center;
}
#search-button{
border-radius: 100px;
width: 20%;
}
#info-box{
height: fit-content;
}
#pokemon-name{
display: inline-block;
}
#pokemon-id{
display: inline-block;
}
img{
display: block;
height: 250px;
}
#info-box{
}
#weight{
display: inline-block;
}
#height{
display: block;
}
#avatar{
}
const searchinput = document.getElementById("search-input");
const searchbtn = document.getElementById("search-button");
const pokename = document.getElementById('pokemon-name');
const pokeid = document.getElementById("pokemon-id");
const profile = document.getElementById('sprite');
const info = document.getElementById("info-box");
const pokeweight = document.getElementById("weight");
const pokeheight = document.getElementById("height");
const poketype = document.getElementById("types");
const pokehp = document.getElementById("hp");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const sa = document.getElementById("special-attack");
const sd = document.getElementById("special-defense");
const speed = document.getElementById("speed");
const pokedex = 'https://pokeapi-proxy.freecodecamp.rocks/api/pokemon';
const fetchData = async (input) => {
const err = 'Pokémon not found';
try {
const res = await fetch(`${pokedex}/${input}`);
const data = await res.json();
const {height,id,name,sprites,stats,types,weight} = data;
console.log(weight);
pokename.textContent = name;
pokeid.textContent ='#'+ id;
pokeweight.textContent = `Weight: ${weight}`;
pokeheight.textContent = `Height: ${height}`;
pokehp.textContent = `Hp: ${stats[0].base_stat}`;
attack.textContent =`Attack: ${stats[1].base_stat}`;
defense.textContent =`Defense: ${stats[2].base_stat}`;
sa.textContent =`Sp. Attack: ${stats[3].base_stat}`;
sd.textContent =`Sp. Defense: ${stats[4].base_stat}`;
speed.textContent =`Speed: ${stats[5].base_stat}`;
profile.src = sprites.front_default;
} catch (err) {
err = "Pokémon not found";
alert(err);
}
};
searchbtn.addEventListener('click', () => {
fetchData(searchinput.value.toLowerCase().trim())
});
