script.js

const API_URL = "https://api.freeapi.app/api/v1/public/cats/cat/random";

const catImage = document.getElementById("catImage");
const catName = document.getElementById("catName");
const catOrigin = document.getElementById("catOrigin");
const catTemperament = document.getElementById("catTemperament");
const catDescription = document.getElementById("catDescription");
const catStats = document.getElementById("catStats");
const loader = document.getElementById("loader");
const fetchBtn = document.getElementById("fetchBtn");

// Fetch Cat Data
async function fetchCat() {
  loader.style.display = "block";
  catImage.style.opacity = "0.5";

  try {
    const res = await fetch(API_URL);
    const result = await res.json();
    const cat = result.data;

    updateUI(cat);
  } catch (err) {
    catName.textContent = "Failed to load cat 😿";
  }

  loader.style.display = "none";
  catImage.style.opacity = "1";
}

// Update UI
function updateUI(cat) {
  catImage.src = cat.image;
  catName.textContent = cat.name;
  catOrigin.textContent = `🌍 ${cat.origin}`;

  // Temperament tags
  catTemperament.innerHTML = "";
  cat.temperament.split(",").forEach(tag => {
    const span = document.createElement("span");
    span.textContent = tag.trim();
    catTemperament.appendChild(span);
  });

  catDescription.textContent = cat.description;

  // Stats
  catStats.innerHTML = `
    <div class="stat">❤️ Affection: ${cat.affection_level}/5</div>
    <div class="stat">⚡ Energy: ${cat.energy_level}/5</div>
    <div class="stat">🧠 Intelligence: ${cat.intelligence}/5</div>
    <div class="stat">🐶 Dog Friendly: ${cat.dog_friendly}/5</div>
  `;
}

// Button click
fetchBtn.addEventListener("click", fetchCat);

// Initial load
fetchCat();