Este ejercicio tiene como objetivo practicar el uso de la API Fetch en JavaScript para obtener información sobre Pokémon y mostrarla en una página web.
-
Clona este repositorio a tu entorno local.
-
Abre el archivo "index.html". En la página, encontrarás un selector que te permite elegir un Pokémon (Bulbasaur, Charmander o Squirtle) y un botón "Obtener Información".
-
Cuando selecciones un Pokémon y hagas clic en el botón "Obtener Información", se tendrá que mostrar la información en pantalla del Pokémon, incluyendo su nombre, imagen, tipo, altura y peso.
-
Aquí tenéis la documentación para poder encontrar el endpoint https://pokeapi.co/. Como ejemplo, si hacemos un fetch a https://pokeapi.co/api/v2/pokemon/ditto nos dará el dato de ese pokemon. Actualiza la página con la información obtenida para esos 3 pokemons. Puedes revisar y modificar este archivo según sea necesario.
-
Asegúrate de que el endpoint de la API de Pokémon en el archivo "script.js" sea correcto.
-
Puedes personalizar la lista de Pokémon en el selector añadiendo más opciones al elemento
select
en el archivo "index.html". -
Si deseas personalizar el estilo de la página, puedes modificar el archivo "styles.css" para ajustar la apariencia de los elementos HTML.
-
Consejo: Usa el "value" del selector para poder sacar el valor del pokemon que queremos que nos de la información.
document.getElementById('pokemon-select').value
Este ejercicio es una introducción al uso de Fetch para obtener datos de una API y es una oportunidad para practicar habilidades básicas de JavaScript y CSS. Si tienes alguna pregunta o te enfrentas a problemas, no dudes en buscar en la documentación de la API Fetch y la API de Pokémon.
Let´s CODE!