Biuld a pokemon search app

right now im not concerned about the placing in html and only wanted press search and it would apear id and name threw console.log() for testing , it didnt work i tried creating function go threw data and then use data.results with loop but i still couldnt figure out to display name and id in console i also haver problems with

if (searchinput.value.toLowerCase === data.results.name || searchinput.value === data.results.id){
}
<!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>
<img src ="https://archives.bulbagarden.net/media/upload/2/28/0383Groudon.png" />
        </div>
        <div id="weight" >


        </div>
        <div id="height">


        </div>
        <div id="types">


        </div>
        <div id="hp">


        </div>
        <div id="attack">


        </div>
        <div id="defense">


        </div>
        <div id="special-attack">


        </div>
        <div id="special-defense">


        </div>
        <div id="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{
  border: 1px solid pink;
  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: 300px;
   }
   #info-box{
     border: 1px solid blue
   }
const searchinput = document.getElementById("search-input");
const searchbtn = document.getElementById("search-button");
const pokedex = 'https://pokeapi-proxy.freecodecamp.rocks/api/pokemon';


const  fetchData = async () => {
  try {
    const res = await fetch(pokedex);
    const data = await res.json();
   console.log(data);
   
  } catch (err) {
    console.log(err);
  }
  
};

searchbtn.addEventListener('click',fetchData());

You are fetching all the data this way (All Pokémons) because you didn’t specify the name or id of a Pokémon.

Use the endpoint https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/{name-or-id} to get data for a Pokémon, where {name-or-id} is the Pokémon’s name or id number.


Whenever you add () to a function’s name, it will execute it.

But you want to execute it only when the button is clicked. Therefore, remove the () to make it just a reference to the function without executing it.

i was able to figure out how to get the id and name but how do ecces the endpoint i need results to make sure the search value === name or id

<!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>
<img id="profile"src ="https://archives.bulbagarden.net/media/upload/2/28/0383Groudon.png" />
        </div>
        <div id="weight" >


        </div>
        <div id="height">


        </div>
        <div id="types">


        </div>
        <div id="hp">


        </div>
        <div id="attack">


        </div>
        <div id="defense">


        </div>
        <div id="special-attack">


        </div>
        <div id="special-defense">


        </div>
        <div id="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{
  border: 1px solid pink;
  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{
     border: 1px solid blue
   }
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('profile');
const info = document.getElementById("info-box");
const pokedex = 'https://pokeapi-proxy.freecodecamp.rocks/api/pokemon';


const  fetchData = async () => {
  try {
    const res = await fetch(pokedex);
    const data = await res.json();
  //console.log(data)
  searchbtn.addEventListener('click', ()=>{search(data)})
  
  } catch (err) {
    console.log(err);
  }
  
};
const search = (data) =>{
 const {results} = data;
 for(let i = 0; i < results.length;i++){
   if(searchinput.value.toLowerCase().trim()  === results[i].name||searchinput.value === String(results[i].id ) ){
     
 pokename.textContent = results[i].name;
 pokeid.textContent = '#'+results[i].id;
 profile.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${results[i].id}.png`;
   return
   }else{
 return alert("Pokémon not found");
   }
 
}
 
}

fetchData();


So, you are fetching all the data and then searching for the desired Pokémon.
Although this method works, it is not the best way to do it. As I mentioned, you should use the endpoint with {name-or-id}.


Your code isn’t working because you used return in both if and else statements.

if the desired Pokémon is found → return statement stops the function.
if the desired Pokémon is not found → return statement also stops the function.

Notice that it will only check the first item in your array because you used return in both cases.


You should subtract 1 from the length because the index is less than the length by 1
(the index starts at 0).

i have question could i just scrap everything and put fetchdata in searchbtn click with the searchinput being the name or value to replace pokedex an then i use catch to replace the else and use it for the alert

check what is the API response for when a pokemon is not present, does it throw an error?