Cómo usar la PokéAPI con JavaScript | Mostrar un Pokémon aleatorio con una API

Cómo usar la PokéAPI con JavaScript (ejemplo práctico)

Las APIs públicas son una excelente forma de aprender programación web. En este ejemplo utilizamos la PokéAPI, una API gratuita que permite consultar información sobre Pokémon como su tipo, altura, peso e imágenes oficiales.

La pequeña aplicación que construimos en esta página obtiene un Pokémon al azar y muestra su información básica utilizando JavaScript y la función fetch().

¿Qué hace esta aplicación?

• Selecciona un Pokémon aleatorio
• Consulta la API pública de Pokémon
• Muestra su imagen oficial
• Muestra información básica como tipo, altura y peso

Este tipo de proyectos es ideal para aprender conceptos importantes de programación web como:

• Consumo de APIs REST
• Uso de fetch() en JavaScript
• Manipulación del DOM
• Uso de datos JSON
  
  
  
• https://www.programacionparatodos.com/p/carta-pokemon-curiosa-del-dia-descubre.html

API utilizada

Para este ejemplo utilizamos la API pública:

https://pokeapi.co/api/v2/pokemon/

Esta API devuelve información en formato JSON que puede ser procesada fácilmente con JavaScript.

Ejemplo de llamada a la API

fetch("https://pokeapi.co/api/v2/pokemon/25")

  .then(response => response.json())

  .then(data => {

    console.log(data.name);

  });

La aplicación selecciona un número aleatorio de Pokémon y consulta la API para mostrar su información automáticamente.

Si te interesa aprender más sobre APIs en JavaScript, en este blog también encontrarás ejemplos con:

• API de Dragon Ball
• API de Rick and Morty
• API de Fórmula 1
• API de Banxico
• API del clima

Todas estas APIs son gratuitas y perfectas para practicar programación.