Tell us what’s happening:
siempre me da problema en javaScript apesar de estar bien el codigo por mas que cambie siempre me da el mismo error
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">
<title>Pokémon Search App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Pokémon Search</h1>
<!-- Input para la búsqueda -->
<input type="text" id="search-input" placeholder="Search by name or ID" />
<button id="search-button">Search</button>
<!-- Mostrar información del Pokémon -->
<div>
<p id="pokemon-name"></p>
<p id="pokemon-id"></p>
<p id="weight"></p>
<p id="height"></p>
<p id="types"></p>
<p id="hp"></p>
<p id="attack"></p>
<p id="defense"></p>
<p id="special-attack"></p>
<p id="special-defense"></p>
<p id="speed"></p>
<!-- Imagen del sprite -->
<img id="sprite" src="" alt="Pokémon Sprite" />
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
// Elementos DOM
const searchButton = document.getElementById('search-button');
const searchInput = document.getElementById('search-input');
// Función para hacer la solicitud a la API de Pokémon
async function searchPokemon() {
const input = searchInput.value.trim().toLowerCase();
if (!input) return; // No hacer nada si el campo está vacío
const url = `https://pokeapi.co/api/v2/pokemon/${input}`;
try {
// Hacer la solicitud a la API
const response = await fetch(url);
const data = await response.json();
// Mostrar los datos del Pokémon en la página
displayPokemonData(data);
} catch (error) {
// Si el Pokémon no se encuentra, mostrar una alerta
alert("Pokémon not found");
}
}
// Función para mostrar los datos del Pokémon
function displayPokemonData(data) {
// Limpiar elementos anteriores
document.getElementById('pokemon-name').innerText = data.name.toUpperCase();
document.getElementById('pokemon-id').innerText = `ID: ${data.id}`;
document.getElementById('weight').innerText = `Weight: ${data.weight}`;
document.getElementById('height').innerText = `Height: ${data.height}`;
document.getElementById('hp').innerText = `HP: ${data.stats[0].base_stat}`;
document.getElementById('attack').innerText = `Attack: ${data.stats[1].base_stat}`;
document.getElementById('defense').innerText = `Defense: ${data.stats[2].base_stat}`;
document.getElementById('special-attack').innerText = `Special Attack: ${data.stats[3].base_stat}`;
document.getElementById('special-defense').innerText = `Special Defense: ${data.stats[4].base_stat}`;
document.getElementById('speed').innerText = `Speed: ${data.stats[5].base_stat}`;
// Mostrar imagen del sprite
const sprite = document.getElementById('sprite');
sprite.src = data.sprites.front_default;
// Mostrar tipos del Pokémon
const typesElement = document.getElementById('types');
typesElement.innerHTML = ""; // Limpiar tipos anteriores
data.types.forEach(typeInfo => {
const type = document.createElement('p');
type.innerText = typeInfo.type.name.toUpperCase();
typesElement.appendChild(type);
});
}
// Agregar evento al botón de búsqueda
searchButton.addEventListener('click', searchPokemon);
/* file: styles.css */
/* Fondo y diseño general */
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(to bottom, #3a7bd5, #00d2ff);
color: white;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
text-align: center;
}
/* Título principal */
h1 {
font-size: 3rem;
margin-bottom: 20px;
font-weight: 700;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
/* Estilo del input de búsqueda */
input {
width: 300px;
padding: 12px;
font-size: 1re
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App