<repo_name>Varunastra/SpringTest<file_sep>/js/main.js
const projectsData = [
  {
    title: "Spring boot",
    description: `Takes an opinionated view of building Spring applications and gets
    you up and running as quickly as possible.`,
    imageClass: "boot-logo"
  },
  {
    title: "Spring framework",
    description: `Provides core support for dependency injection, transaction
    management, web apps, data access, messaging and more.`,
    imageClass: "leaf-logo"
  },
  {
    title: "Spring cloud data flow",
    description: `An orchestration service for composable data microservice
    applications on modern runtimes.`,
    imageClass: "flow-logo"
  },
  {
    title: "Spring cloud",
    description: `Provides a set of tools for common patterns in distributed
    systems. Useful for building and deploying microservices.`,
    imageClass: "spring-logo"
  },
  {
    title: "Spring data",
    description: `Provides a consistent approach to data access – relational,
    non-relational, map-reduce, and beyond.`,
    imageClass: "data-logo"
  },
  {
    title: "Spring integration",
    description: `Supports the well-known
    <em>Enterprise Integration Patterns</em> via lightweight messaging
    and declarative adapters.`,
    imageClass: "integration-logo"
  }
];

function serializeProject(project) {
  return `<div class="project">
    <div class="project__img__${project.imageClass}"></div>
    <h2 class="project__title">${project.title}</h2>
    <div class="project__description">
      ${project.description}
    </div>
  </div>`;
}

function serializeProjects(projects) {
  return projects.map(serializeProject);
}

function loadProjects(data = null) {
  const projects = document.querySelector(".projects");
  data
    ? (projects.innerHTML = data)
    : (projects.innerHTML = serializeProjects(projectsData));
}

function setDesktopEvents() {
  const searchBtn = document.querySelector("#searchBtn-desktop");

  searchBtn.addEventListener("click", () => {
    const searchBar = document.querySelector(".searchbar-desktop");
    const searchImg = searchBtn.childNodes[1];

    if (!searchBar.className.includes("show")) {
      searchBar.classList.add("searchbar-show");
      searchImg.className = searchImg.className.replace(
        "search-btn",
        "close-btn"
      );
      searchBtn.className = searchBtn.className.replace(
        "--normal",
        "--selected"
      );
    } else {
      searchBar.className = "searchbar-desktop";
      searchBtn.className = searchBtn.className.replace(
        "--selected",
        "--normal"
      );
      searchImg.className = searchImg.className.replace(
        "close-btn",
        "search-btn"
      );
    }
  });

  const searchBarBtn = document.querySelector(".searchbar-desktop__btn");

  searchBarBtn.addEventListener("click", () => {
    searchProjectsDesktop();
  });

  const desktopInput = document.getElementById("searchInput-desktop");

  desktopInput.addEventListener("change", () => {
    searchProjectsDesktop();
  });
}

function setMobileEvents() {
  const panelBtn = document.querySelector(".header-mobile__links");
  const sidePanel = document.querySelector(".sidepane");
  const headerMobile = document.querySelector(".header-mobile");
  const navCapture = document.querySelector("#nav-capture");

  panelBtn.addEventListener("click", () => {
    sidePanel.classList.add("sidepane-transform");
    headerMobile.classList.add("header-transform");
    navCapture.classList.add("sidepane-capture");
    document.body.style.overflowY = "hidden"; 
  });

  navCapture.addEventListener("click", () => {
    sidePanel.classList.remove("sidepane-transform");
    headerMobile.classList.remove("header-transform");
    navCapture.classList.remove("sidepane-capture");
    document.body.style.overflowY = "scroll";
  });

  const mobileInput = document.getElementById("searchInput-mobile");

  mobileInput.addEventListener("change", () => {
    searchProjectsMobile();
  });

  const searchBtnSidepane = document.querySelector(".sidepane__search-btn");

  searchBtnSidepane.addEventListener("click", () => {
    searchProjectsMobile();
  });
}

function searchProjects(title) {
  const desktopInput = document.getElementById("searchInput-desktop");
  const mobileInput = document.getElementById("searchInput-mobile");

  desktopInput.value = mobileInput.value = title;

  const newData = projectsData.filter(elem => {
    if (elem.title.toLowerCase().includes(title.toLowerCase())) return true;
  });
  if (newData.length) {
    const serliazedData = serializeProjects(newData);
    loadProjects(serliazedData);
  } else {
    document.querySelector(".projects").innerHTML = "<h1>No results</h1>";
  }
}

function searchProjectsDesktop() {
  const desktopInput = document.getElementById("searchInput-desktop").value;
  searchProjects(desktopInput);
}

function searchProjectsMobile() {
  const mobileInput = document.getElementById("searchInput-mobile").value;
  searchProjects(mobileInput);
}

window.onload = () => {
  setDesktopEvents();
  setMobileEvents();
  loadProjects();
};
