Tell us what’s happening:
I think my code works like it should. But still dont pass the test, because there is something wrong in how i handle the types.
Your code so far
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokedex</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" id="search-input" required>
<button type="button" id="search-button">Search</button>
<br>
<tr>
<div id="pokemon-name"></div>
<div id="pokemon-id"></div>
</tr>
<div id="pic"></div>
<tr>
<div id="weight"></div>
<div id="height"></div>
</tr>
<div id="types"></div>
<br>
<table>
<thead>
<td>Base</td>
<td>Stats</td>
</thead>
<tbody>
<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>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
// DOM-Elements
const input = document.getElementById("search-input");
const btn = document.getElementById("search-button");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const weightStat = document.getElementById("weight");
const heightStat = document.getElementById("height");
const typesStat = document.getElementById("types");
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 pic = document.getElementById("pic");
// Variables
const allValidPokemons = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";
const pokemonNameorId ="https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/"
// Functions
const UseData =(data)=>{
const{name,id,height,stats,types,weight,sprites}=data;
types.forEach(element => typesStat.innerHTML += `<td id="type">${element.type.name.toUpperCase()}</td><br>`)
pokemonName.innerHTML = `<td>${name.toUpperCase()}</td>`;
pokemonId.innerHTML = `<td>#${id}</td>`;
heightStat.innerHTML = `<td>Height: ${height}</td>`;
weightStat.innerHTML = `<td>Weight: ${weight}</td>`;
hp.innerHTML = `<td>${stats[0].base_stat}</td>`;
attack.innerHTML = `<td>${stats[1].base_stat}</td>`;
defense.innerHTML = `<td>${stats[2].base_stat}</td>`;
specialAttack.innerHTML = `<td>${stats[3].base_stat}</td>`;
specialDefense.innerHTML = `<td>${stats[4].base_stat}</td>`;
speed.innerHTML = `<td>${stats[5].base_stat}</td>`;
pic.innerHTML= `<img id="sprite" src="${sprites.
front_default}">`
};
const fetchData = async (name)=>{
const enteredNameOrID = pokemonNameorId + name
try {
const res = await fetch(enteredNameOrID);
const data = await res.json();
console.log(data)
UseData(data)
} catch (err) {
alert("Pokémon not found");
}
}
const searchPokemon = ()=>{
typesStat.innerHTML ="";
const inputVal = input.value;
fetchData(inputVal.toLowerCase())
}
btn.addEventListener("click",searchPokemon)
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
Challenge Information:
Build a Pokémon Search App Project