script.js

document.getElementById("uploadBtn").addEventListener("click", () => {
    const fileInput = document.getElementById("photoInput");
    const category = document.getElementById("photoCategory").value.trim();
    const view = document.getElementById("photoView").value.trim();
  
    if (!fileInput.files.length || !category || !view) return;
  
    const reader = new FileReader();
    reader.onload = function (e) {
      const gallery = document.getElementById("gallery");
  
      const card = document.createElement("div");
      card.className = "photo-card";
      card.dataset.category = category.toLowerCase();
      card.dataset.view = view.toLowerCase();
  
      card.innerHTML = `
        <span class="menu">&#8286;
          <div class="menu-options">
            <button class="delete-btn">Delete</button>
          </div>
        </span>
        <img src="${e.target.result}" alt="Uploaded Photo">
        <div class="meta">Category: ${category}</div>
        <div class="meta">View: ${view}</div>
        <div class="likes">❤️ 0</div>
      `;
  
      card.querySelector(".likes").addEventListener("click", function () {
        const count = this.textContent.match(/\d+/)[0];
        this.textContent = `❤️ ${+count + 1}`;
      });
  
      card.querySelector(".delete-btn").addEventListener("click", function () {
        gallery.removeChild(card);
      });
  
      gallery.appendChild(card);
      fileInput.value = "";
      document.getElementById("photoCategory").value = "";
      document.getElementById("photoView").value = "";
    };
  
    reader.readAsDataURL(fileInput.files[0]);
  });
  
  // Filtering by Category or View
  const dropdowns = document.querySelectorAll(".dropdown div[data-filter], .dropdown div[data-view]");
  dropdowns.forEach(item => {
    item.addEventListener("click", () => {
      const gallery = document.getElementById("gallery");
      const cards = gallery.querySelectorAll(".photo-card");
      const type = item.dataset.filter ? "category" : "view";
      const value = item.dataset.filter || item.dataset.view;
  
      cards.forEach(card => {
        const show = card.dataset[type].toLowerCase() === value.toLowerCase();
        card.style.display = show ? "block" : "none";
      });
    });
  });