Фильтр как в made on tilda на тильде

<div class="container">
  <!-- Фильтр -->
  <ul class="filter">
    <li>Все</li>
    <li>Бизнес</li>
    <li>Магазин</li>
    <li>Событие</li>
    <li>Медиа</li>
    <li>Портфолио</li>
    <li>Образование</li>
    <li>Персональные</li>
    <li>Другое</li>
  </ul>
  <!-- Проекты (карточки) -->
  <ul class="projects"></ul>
  <!-- Кнопка 'Загрузить ещё' -->
  <button class="download-more">Загрузить ещё</button>
</div>

<style>
  /*Стили контейнера*/
  .container {
    /*Ширина контейнера для разрешения экрана 1201 и выше*/
    width: 1160px;
    margin: 0 auto !important;
    /*Отступ блока сверху*/
    padding-top: 80px !important;
    /*Отступ блока снизу*/
    padding-bottom: 80px !important;
    /*Шрифт, который применится на весь блок*/
    font-family: "TildaSans", Arial, sans-serif;
  }

  .container > * {
    margin: 0px !important;
    padding: 0px !important;
  }

  /*Стили блока с элементами фильтра*/
  .filter {
    list-style: none;
    display: flex;
    /*Расстояние между элементами фильтра по вертикали и горизонатли*/
    gap: 8px 5px;
    /*Нижний отступ от фильтра до проектов (карточек)*/
    margin-bottom: 43px !important;
    flex-wrap: wrap;
  }

  /*Стили для всех элементов фильтра*/
  .filter > li {
    /*Внутренний отступ каждого элемента фильтра*/
    padding: 5px 18px !important;
    /*Рзамер шрифта*/
    font-size: 15px;
    font-weight: 300;
    line-height: 1.23;
    /*Ширина обводки, тип обводки, цвет обводки*/
    border: 1px solid #878787;
    /*Радиус элемента фильтра*/
    border-radius: 100px;
    cursor: pointer;
  }

  /*Стили для активного элемента фильтра*/
  .selected-item-in-filter {
    /*Фон активного элемента*/
    background-color: #ffa282 !important;
    /*Цвет обводки активного элемента*/
    border-color: #ffa282 !important;
    /*Цвет шрифта активного элемента*/
    color: #ffffff !important;
  }

  /*Стили для блока с проектами (карточками)*/
  .projects {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    /*Расстояние между проектами (карточками) по вертикали и горизонтали*/
    gap: 95px 40px;
  }

  /*Стили для картинки проектов*/
  .projects > li > img {
    /*Ширина картинки проекта*/
    width: 360px;
    /*Высота картинки проекта*/
    height: 489px;
    /*Радиус картинки проекта*/
    border-radius: 3px;
    object-fit: cover;
    object-position: top;
    cursor: pointer;
  }

  /*Стили для названия проектов*/
  .projects > li > p {
    font-weight: 300;
    color: #000000;
    font-size: 19px;
    line-height: 1.27;
    /*Верхний отступ от названия проекта до картинки проекта*/
    margin-top: 25px !important;
    margin-bottom: 0px !important;
  }

  /*Стили для кнопки 'Загрузить ещё'*/
  .download-more {
    margin: 0 auto !important;
    /*Верхний отступ от кнопки до проектов*/
    margin-top: 90px !important;
    display: block;
    /*Внутренние отступы внутри кнопки*/
    padding: 14px 34px 16px !important;
    color: #ffffff;
    font-family: "TildaSans", Arial, sans-serif;
    background-color: #ffa282;
    border: 1px solid #ffa282;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.3;
    cursor: pointer;
  }

  /*Адаптив под разрешение от 961px до 1200px */
  @media (max-width: 1200px) {
    .container {
      width: 890px;
    }

    .filter li {
      font-weight: 400;
    }

    .projects {
      gap: 95px 20px;
    }

    .projects > li > img {
      width: 283px;
      height: 488px;
    }

    .projects > li > p {
      font-weight: 300;
    }
  }

  /*Адаптив под разрешение от 641px до 960px */
  @media (max-width: 960px) {
    .container {
      width: 570px;
    }

    .projects {
      gap: 75px 20px;
    }

    .projects > li > img {
      width: 275px;
      height: 474px;
    }
  }

  /*Адаптив под разрешение от 481px до 640px */
  @media (max-width: 640px) {
    .container {
      width: 411px;
    }

    .projects {
      gap: 50px 15px;
    }

    .projects > li > img {
      width: 198px;
      height: 341px;
    }

    .projects > li > p {
      font-size: 16px;
      margin-top: 20px !important;
    }
  }

  /*Адаптив под разрешение от 320px до 480px */
  @media (max-width: 480px) {
    .container {
      width: 280px;
    }

    .filter {
      gap: 8px 5px;
    }

    .projects > li > img {
      width: 281px;
      height: 484px;
    }
  }
</style>

<script>
  // Элементы фильтра
  let itemsInFilter = document.querySelectorAll(".filter>li");
  // Кнопка 'Загрузить ещё'
  let buttonDownloadMore = document.querySelector(".download-more");
  // Дополнительное кол-во проектов при нажатии на кнопку 'Загрузить ещё'
  let additionalCountProjects = 0;
  // Текущий элемент фильтра
  let currentFilter = "Все";
  // Проекты (карточки)
  let projects = [
    {
      filter: "Бизнес",
      img:
        "https://static.tildacdn.com/tild3366-3365-4233-b739-393531353439/coolsite.jpg",
      name: "Coolsite",
      link: "https://webcoolsite.ru/"
    },
    {
      filter: "Бизнес",
      img:
        "https://static.tildacdn.com/tild3266-3531-4061-b631-383534653837/_.jpg",
      name: "Таёжная изба",
      link: "https://taiga-hut.tilda.ws/"
    },
    {
      filter: "Бизнес",
      img:
        "https://static.tildacdn.com/tild3330-3161-4765-b536-616561663634/photo.jpg",
      name: "СОВРИСК",
      link: "https://www.behance.net/gallery/131133339/sovrisk-website"
    },
    {
      filter: "Бизнес",
      img:
        "https://static.tildacdn.com/tild3366-3365-4233-b739-393531353439/coolsite.jpg",
      name: "Coolsite",
      link: "https://webcoolsite.ru/"
    },
    {
      filter: "Бизнес",
      img:
        "https://static.tildacdn.com/tild3266-3531-4061-b631-383534653837/_.jpg",
      name: "Таёжная изба",
      link: "https://taiga-hut.tilda.ws/"
    },
    {
      filter: "Бизнес",
      img:
        "https://static.tildacdn.com/tild3330-3161-4765-b536-616561663634/photo.jpg",
      name: "СОВРИСК",
      link: "https://www.behance.net/gallery/131133339/sovrisk-website"
    },
    {
      filter: "Магазин",
      img:
        "https://static.tildacdn.com/tild3930-3530-4662-a362-343134373062/overbank.jpg",
      name: "OverBank",
      link: "https://www.behance.net/gallery/137303321/OverBank"
    },
    {
      filter: "Магазин",
      img:
        "https://static.tildacdn.com/tild3161-6632-4166-b938-636130656239/forum-digital.jpg",
      name: "Forum.Digital",
      link: "https://forum.digital/smart_city_2021"
    }
  ];

  //Вызов функций

  addEventListenerOnItemsInFilter();
  addEventListenerOnButtonDownloadMore();
  changeSelectedItemInFilter();

  // Функции

  // Вешаем слушатель на элементы фильтра, чтобы при клике на них менялся активный элемент фильтра
  function addEventListenerOnItemsInFilter() {
    itemsInFilter.forEach((item) => {
      item.addEventListener("click", (event) => {
        currentFilter = event.target.textContent;
        changeSelectedItemInFilter(event.target.textContent);
      });
    });
  }

  // Вешаем слушатель на кнопку 'Загрузить ешё', чтобы при клике на неё загружалось больше проектов
  function addEventListenerOnButtonDownloadMore() {
    buttonDownloadMore.addEventListener("click", () => {
      if (window.screen.width > 960) {
        additionalCountProjects += 3;
      } else if (window.screen.width > 480) {
        additionalCountProjects += 2;
      } else {
        additionalCountProjects += 2;
      }
      createProjects();
    });
  }

  // Изменить активный элемент фильтра
  function changeSelectedItemInFilter() {
    itemsInFilter.forEach((item) => {
      if (item.textContent === currentFilter) {
        item.classList.add("selected-item-in-filter");
      } else {
        item.classList.remove("selected-item-in-filter");
      }
    });
    additionalCountProjects = 0;
    createProjects();
  }

  // Создание списка проектов
  function createProjects() {
    document
      .querySelectorAll(".projects>li")
      .forEach((project) => project.remove());
    let result;
    if (currentFilter === "Все") {
      result = projects;
    } else {
      result = projects.filter((project) => project.filter === currentFilter);
    }
    if (result.length < 3 + additionalCountProjects + 1) {
      buttonDownloadMore.style.display = "none";
    } else {
      buttonDownloadMore.style.display = "block";
    }
    let countProjects = getCountProjects();
    result = result.slice(0, countProjects + additionalCountProjects);
    result.forEach((project) => {
      document
        .querySelector(".projects")
        .appendChild(createProject(project.img, project.name, project.link));
    });
  }

  // Создание проекта (карточки)
  function createProject(imgLink, name, link) {
    // тег li
    let li = document.createElement("li");
    // тег img
    let img = document.createElement("img");
    // тег p
    let p = document.createElement("p");

    img.setAttribute("src", imgLink);
    img.addEventListener("click", () => {
      window.open(link);
    });
    p.textContent = name;
    li.appendChild(img);
    li.appendChild(p);
    return li;
  }

  // Функция, которая считает сколько проетов изначально выводить в зависимости от ширины экрана
  function getCountProjects() {
    if (window.screen.width > 960) {
      return 3;
    } else if (window.screen.width > 480) {
      return 2;
    } else {
      return 2;
    }
  }
</script>Language:HTML, XML