script.js

// script.js

// ===== 1. Interactive Feature: Search players =====
const searchInput = document.getElementById("searchInput");
const playerCards = document.querySelectorAll(".card");

if (searchInput) {
  searchInput.addEventListener("keyup", () => {
    let query = searchInput.value.toLowerCase();
    playerCards.forEach(card => {
      let name = card.querySelector("h3").textContent.toLowerCase();
      if (name.includes(query)) {
        card.style.display = "block";
      } else {
        card.style.display = "none";
      }
    });
  });
}

// ===== 2. Interactive Feature: Toggle dark/light mode =====
const themeBtn = document.getElementById("themeBtn");

if (themeBtn) {
  themeBtn.addEventListener("click", () => {
    document.body.classList.toggle("light-mode");
    if (document.body.classList.contains("light-mode")) {
      themeBtn.textContent = "🌙 Dark Mode";
    } else {
      themeBtn.textContent = "☀️ Light Mode";
    }
  });
}

// ===== 3. Custom Form Validation =====
const form = document.getElementById("contactForm");

if (form) {
  form.addEventListener("submit", (e) => {
    e.preventDefault(); // prevent auto-submit

    const name = document.getElementById("name").value.trim();
    const email = document.getElementById("email").value.trim();
    const message = document.getElementById("message").value.trim();

    let errors = [];

    // name must be at least 3 characters
    if (name.length < 3) {
      errors.push("Name must be at least 3 characters.");
    }

    // custom email validation (basic regex)
    const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
    if (!emailPattern.test(email)) {
      errors.push("Please enter a valid email address.");
    }

    // message must not be empty
    if (message === "") {
      errors.push("Message cannot be empty.");
    }

    // show errors or success
    const errorBox = document.getElementById("errorBox");
    if (errors.length > 0) {
      errorBox.innerHTML = errors.join("<br>");
      errorBox.style.color = "red";
    } else {
      errorBox.innerHTML = "Form submitted successfully ✅";
      errorBox.style.color = "green";
      form.reset();
    }
  });
}