script.js

const container = document.getElementById("cards");
const pokemonNames = [
  "eevee",
  "vaporeon",
  "jolteon",
  "flareon",
  "espeon",
  "umbreon",
  "leafeon",
  "glaceon",
  "sylveon"
];

// Function to fetch Pokémon data
async function fetchPokemonData(pokemon) {
  const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}`);
  const data = await response.json();
  return data;
}

// Function to generate card HTML
function createCard(pokemon) {
  const type = pokemon.types[0].type.name;
  const abilities = pokemon.abilities.map((a) => a.ability.name);
  const imageUrl =
    pokemon.sprites.other["official-artwork"].front_default ||
    pokemon.sprites.front_default;
  const cardHTML = `
    <div class="card card--${type}">
      <div class="card-image">
        <img src="${imageUrl}" alt="${pokemon.name}" class="card__image">
        <span class="card__type card__type--${type}">${type}</span>
      </div>
      <div class="card-text">
        <h2>${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}</h2>
        <div class="stats-container">
          <div><span>HP:</span> ${pokemon.stats[0].base_stat}</div>
          <div><span>Attack:</span> ${pokemon.stats[1].base_stat}</div>
          <div><span>Defense:</span> ${pokemon.stats[2].base_stat}</div>
          <div><span>Sp. Atk:</span> ${pokemon.stats[3].base_stat}</div>
          <div><span>Sp. Def:</span> ${pokemon.stats[4].base_stat}</div>
          <div><span>Speed:</span> ${pokemon.stats[5].base_stat}</div>
        </div>
        <div class="abilities-container">
          <h4 class="card__ability"><span class="card__label">Ability:</span> ${abilities[0]}</h4>
          ${
            abilities[1]
              ? `<h4 class="card__ability"><span class="card__label">Hidden Ability:</span> ${abilities[1]}</h4>`
              : ""
          }
        </div>
      </div>
    </div>
  `;
  container.insertAdjacentHTML("beforeend", cardHTML);
}

// Clear existing cards and fetch new ones
document.addEventListener("DOMContentLoaded", async () => {
  container.innerHTML = ""; // Clear existing content
  for (let name of pokemonNames) {
    const pokemon = await fetchPokemonData(name);
    createCard(pokemon);
  }
});