I’m doing the final proyect, but i don’t know why is failing the test from the 14 to 20.
I don’t know the errors that i made, i can’t find it.
If someone can help me pls…
This is my code
script.js
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const pokemonNameElem = document.getElementById("pokemon-name");
const pokemonIdElem = document.getElementById("pokemon-id");
const weightElem = document.getElementById("weight");
const heightElem = document.getElementById("height");
const imagenPokemon = document.querySelector(".contenedor-imagen");
const typesElem = document.getElementById("types");
const hpElem = document.getElementById("hp");
const attackElem = document.getElementById("attack");
const defenseElem = document.getElementById("defense");
const spAttackElem = document.getElementById("special-attack");
const spDefenseElem = document.getElementById("special-defense");
const speedElem = document.getElementById("speed");
searchButton.addEventListener("click", e => {
e.preventDefault();
const pokemonBuscado = searchInput.value
? searchInput.value.trim().toLowerCase()
: null;
if (!pokemonBuscado) {
alert("Por favor, ingrese un pokemon");
return;
}
busquedaPokemon(pokemonBuscado);
});
const busquedaPokemon = async (pokemon) => {
try {
const response = await fetch(
`https://pokeapi.co/api/v2/pokemon/${pokemon}`
);
if (!response.ok) {
throw new Error("Pokémon not found");
}
const data = await response.json();
const pokemonStats = data.stats;
displayInfoPokemon(data.name, data.id, data.weight, data.height);
displayImagen(data.sprites.front_default);
displayTipos(data.types);
displayEstadisticas(pokemonStats);
} catch (err) {
resetDisplay();
alert(err.message);
console.error(`Pokémon not found: ${err}`);
}
};
const displayEstadisticas = (estadisticas) => {
hpElem.innerHTML = estadisticas[0].base_stat;
attackElem.innerHTML = estadisticas[1].base_stat;
defenseElem.innerHTML = estadisticas[2].base_stat;
spAttackElem.innerHTML = estadisticas[3].base_stat;
spDefenseElem.innerHTML = estadisticas[4].base_stat;
speedElem.innerHTML = estadisticas[5].base_stat;
};
const displayImagen = (imagen) => {
imagenPokemon.innerHTML = `<img id="sprite" src="${imagen}" alt="Pokémon sprite">`;
};
const displayInfoPokemon = (nombre, id, peso, altura) => {
pokemonNameElem.innerHTML = nombre.toUpperCase();
pokemonIdElem.innerHTML = `#${id}`;
weightElem.innerHTML = `Weight: ${peso}`;
heightElem.innerHTML = `Height: ${altura}`;
};
const displayTipos = (tipos) => {
typesElem.innerHTML = tipos
.map(
(tipo) =>
`<span class="type ${
tipo.type.name
}">${tipo.type.name.toUpperCase()}</span>`
)
.join("");
};
const resetDisplay = () => {
const imagen = document.getElementById("sprite");
if (imagen) {
imagen.remove();
}
pokemonNameElem.innerHTML = "";
pokemonIdElem.innerHTML = "";
weightElem.innerHTML = "";
heightElem.innerHTML = "";
imagenPokemon.innerHTML = "";
typesElem.innerHTML = "";
hpElem.innerHTML = "";
attackElem.innerHTML = "";
defenseElem.innerHTML = "";
spAttackElem.innerHTML = "";
spDefenseElem.innerHTML = "";
speedElem.innerHTML = "";
};
and this is the html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Buscador de Pokemon</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<h1>Buscador de Pokemon</h1>
<h3>byJoaquinLallana</h3>
<div>
<div class="contenedor-input">
<input id="search-input" class="search-input" required/>
<label class="form__label"> Ingrese un Pokemon</label>
<button id="search-button" class="search-button">Buscar</button>
</div>
<div class="contenedor-output">
<div class="contenerdor-top">
<div class="contenedor-nombre">
<span id="pokemon-name"></span>
<span id="pokemon-id"></span>
</div>
<div class="info-pokemon">
<span id="weight"></span>
<span id="height"></span>
</div>
<div class="contenedor-imagen"></div>
<div id="types"
></div>
</div>
<div class="estadisticas-tabla">
<table>
<thead>
<tr>
<th class="tabla-header">Base</th>
<th class="tabla-header">Estadisticas</th>
</tr>
</thead>
<tbody class="tabla-stats">
<tr class="tabla-fila">
<th>HP:</th>
<td id="hp"></td>
</tr>
<tr class="tabla-fila">
<th>Ataque:</th>
<td id="attack"></td>
</tr>
<tr class="tabla-fila">
<th>Defensa:</th>
<td id="defense"></td>
</tr>
<tr class="tabla-fila">
<th>Ataque Especial:</th>
<td id="special-attack"></td>
</tr>
<tr class="tabla-fila">
<th>Defensa Especial:</th>
<td id="special-defense"></td>
</tr>
<tr class="tabla-fila">
<th>Velocidad:</th>
<td id="speed"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="scripts.js"></script>
</main>
</body>
</html>
i hope someone could help me thanks
