Biuld a pokemon search app

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())
});

Hi @GavinEscanilla

image

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 is not producing the text as required.

Pokemon name needs to be uppercase.
All the values after #height need to be numbers only, no text.

  • #hp
    Hp: 35 ✗
    35 ✓

Happy coding

I changed the topic from General to JavaScript