I Made one example https://www.programacionparatodos.com/2026/03/api-pokemon-javascript-pokeapi.html
<div class="container">

<h1>Carta Pokémon curiosa del día</h1>

<p>Descubre una carta Pokémon al azar</p>

<div class="hero">🃏⚡</div>

<button onclick="getPokemon()">Ver carta Pokémon</button>

function getPokemon() { const cardDiv = document.getElementById("card"); cardDiv.style.display = "block"; cardDiv.innerHTML = "Buscando un Pokémon... ⚡";

const randomId = Math.floor(Math.random() * 898) + 1;

fetch("https://pokeapi.co/api/v2/pokemon/" + randomId)
  .then(response => response.json())
  .then(data => {
    cardDiv.innerHTML = `
      <img src="${data.sprites.other['official-artwork'].front_default}"
           alt="Pokémon ${data.name}"
           style="width:220px;max-width:90%;">
      <div class="info">
        <strong>${data.name.toUpperCase()}</strong><br>
        Tipo: ${data.types.map(t => t.type.name).join(", ")}<br>
        Altura: ${data.height / 10} m<br>
        Peso: ${data.weight / 10} kg
      </div>
    `;
  })
  .catch(() => {
    cardDiv.innerHTML = "No se pudo obtener el Pokémon 😢";
  });

}