Tell us what’s happening:
Describe your issue in detail here.
Can someone please explain why the follow rules arent working?
-
When the
#search-input
element contains the valuePikachu
and the#search-button
element is clicked, the#types
element should contain a single inner element with the valueELECTRIC
. Make sure the#type
element content is cleared between searches. -
When the
#search-input
element contains the value94
and the#search-button
element is clicked, the#types
element should contain two inner elements with the text valuesGHOST
andPOISON
, respectively. Make sure the#type
element content is cleared between searches.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link src="stylesheet" href="./styles.css"
</head>
<body>
<h1>Pokémon Search App</h1>
<label for="search-input">Enter Pokemon name:</label><br>
<input id="search-input" name="search-input" required>
<button id="search-button" type="button">Search</button>
<div id="pokemon-info">
<h2 id="pokemon-name">
<h3 id="pokemon-id">
<h3 id="weight">
<h3 id="height">
<h3 id="types">
</div>
<div id="img"></div>
<table>
<tr>
<th>Base:</th>
<th>Stats:</th>
</tr>
<tr>
<td>HP:</td>
<td id="hp"></t>
</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"></t>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
/* file: script.js */
const search_btn = document.getElementById("search-button")
const pokemon_name = document.getElementById("pokemon-name")
const pokemon_id = document.getElementById("pokemon-id")
const weight = document.getElementById("weight")
const height = document.getElementById("height")
const types = document.getElementById("types")
const hp = document.getElementById("hp")
const attack = document.getElementById("attack")
const defense = document.getElementById("defense")
const sp_attack = document.getElementById("special-attack")
const sp_defense = document.getElementById("special-defense")
const speed = document.getElementById("speed")
const img = document.getElementById("img")
const pokemon_info = async ()=>{
types.innerHTML = "";
try{
const input_info = document.getElementById("search-input").value.toLowerCase()
const pokemon_info = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${input_info}`)
const pokemon_data = await pokemon_info.json()
pokemon_name.innerHTML = pokemon_data.name.toUpperCase();
pokemon_id.innerHTML = pokemon_data.id;
weight.innerHTML = pokemon_data.weight;
types.innerHTML = pokemon_data.types.map(obj => obj.type.name).join(" ").toUpperCase()
height.innerHTML = pokemon_data.height;
hp.innerHTML = pokemon_data.stats[0].base_stat;
attack.innerHTML = pokemon_data.stats[1].base_stat;
defense.innerHTML = pokemon_data.stats[2].base_stat;
sp_attack.innerHTML = pokemon_data.stats[3].base_stat;
sp_defense.innerHTML = pokemon_data.stats[4].base_stat;
speed.innerHTML = pokemon_data.stats[5].base_stat;
const img_url = pokemon_data.sprites.front_default;
img.innerHTML = `<img id="sprite" src="${img_url}">`;
console.log(pokemon_data.types.map(obj => obj.type.name).join(" ").toUpperCase())
} catch (err){
clearScreen()
alert("Pokemon not found")
}
}
const clearScreen = () => {
pokemon_name.innerHTML = "";
pokemon_id.innerHTML = "";
weight.innerHTML = "";
types.innerHTML = "";
height.innerHTML = "";
hp.innerHTML = "";
attack.innerHTML = "";
defense.innerHTML = "";
sp_attack.innerHTML = "";
sp_defense.innerHTML = "";
speed.innerHTML = "";
img.innerHTML = "";
}
search_btn.addEventListener("click", (e)=>{
e.preventDefault()
pokemon_info()
});
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