scripts.js

// Pokemon Card Generator;

// Define a mapping of Pokemon types to color codes in the typeColor object; ✅
const typeColor = {
  bug: "#26de81",
  dragon: "#ffeaa7",
  electric: "#fed330",
  fairy: "#FF0069",
  fighting: "#30336b",
  fire: "#f0932b",
  flying: "#81ecec",
  grass: "#00b894",
  ground: "#EFB549",
  ghost: "#a55eea",
  ice: "#74b9ff",
  normal: "#95afc0",
  poison: "#6c5ce7",
  psychic: "#a29bfe",
  rock: "#2d3436",
  water: "#0190FF",
};

// Set the base URL for fetching Pokemon data from the PokeAPI; ✅
const url = " https://pokeapi.co/api/v2/pokemon/";

// Retrieve references to the card and button elements in the HTML; ✅
const card = document.getElementById("card");
const btn = document.getElementById("btn");

/* 
Implement a function getPokeData to:
    1. Generate a random Pokemon ID between 1 and 150. ✅
    2. Construct the final URL by combining the base URL with the generated ID. ✅
    3. Fetch data from the generated URL using the Fetch API. ✅
    4. Call the generateCard function with the fetched data. ✅
*/
let getPokeData = () => {
  // Generate a random number between 1 and 150;
  let id = Math.floor(Math.random() * 150) + 1;
  // console.log(id);

  // Combine the PokeAPI url with Pokemon id;
  const finalUrl = url + id;
  // console.log(finalUrl);

  // Fetch generated URL;
  fetch(finalUrl)
    .then((response) => response.json())
    .then((data) => {
      generateCard(data);
      // console.log(data);
    });
};

/*
Define the generateCard function to:
    1. Extract necessary data from the fetched Pokemon data. ✅
    2. Capitalize the first letter of the Pokemon name. ✅
    3. Determine the theme color based on the primary Pokemon type. ✅
    4. Populate the card element with the extracted data and styling. ✅
    5. Append the Pokemon types to the card and style them accordingly. ✅
*/
let generateCard = (data) => {
  // Get the necessary data and asign it to variables;
  // console.log(data);
  const hp = data.stats[0].base_stat;
  const imgSrc = data.sprites.other.dream_world.front_default;
  const pokeName = data.name[0].toUpperCase() + data.name.slice(1);
  const statAttack = data.stats[1].base_stat;
  const statDefense = data.stats[2].base_stat;
  const statSpeed = data.stats[5].base_stat;

  // Set themeColor based on pokemon type;
  const themeColor = typeColor[data.types[0].type.name];

  card.innerHTML = `
  <p class="hp">
    <span>HP</span>
    ${hp}
  </p>
  <img src=${imgSrc} alt="Pokemon Image" />
  <h2 class="poke-name">${pokeName}</h2>
  <div class="types">

  </div>
  <div class="stats">
    <div>
      <h3>${statAttack}</h3>
      <p>Attack</p>
    </div>
    <div>
      <h3>${statDefense}</h3>
      <p>Defense</p>
    </div>
    <div>
      <h3>${statSpeed}</h3>
      <p>Speed</p>
    </div>
  </div>
  `;
  appendTypes(data.types);
  styleCard(themeColor);
};

// Create the appendTypes function to iterate over the Pokemon types and add them as spans within the card. ✅
let appendTypes = (types) => {
  types.forEach((item) => {
    let span = document.createElement("SPAN");
    span.textContent = item.type.name;
    document.querySelector(".types").appendChild(span);
  });
};

// Implement the styleCard function to set the background color of the card with a radial gradient and style the Pokemon type spans with the theme color. ✅
let styleCard = (color) => {
  card.style.background = `radial-gradient(circle at 50% 0%, ${color} 36%, #ffffff 36%)`;
  card.querySelectorAll(".types span").forEach((typeColor) => {
    typeColor.style.background = color;
  });
};

// Add event listeners to the button for fetching Pokemon data on click and to the window for loading Pokemon data on page load. ✅
btn.addEventListener("click", getPokeData);
window.addEventListener("load", getPokeData);