refactor: updated filters for projects

SerhiiRepinskyi · Oct 20, 2023 · 7ffc62f · 7ffc62f
1 parent 1ebe88e
commit 7ffc62f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 29 deletions.
diff --git a/js/filter.js b/js/filter.js
@@ -0,0 +1,18 @@
+const refs = {
+  buttonsFilter: document.querySelectorAll('.filters-list button'),
+  projects: document.querySelectorAll('.grid-portfolio__item'),
+};
+
+refs.buttonsFilter.forEach(button => {
+  button.addEventListener('click', () => {
+    const btnCategory = button.dataset.category;
+
+    refs.projects.forEach(project => {
+      const projectCategory = project.dataset.category;
+      if (btnCategory === 'all' || btnCategory === projectCategory) {
+        return (project.style.display = 'block');
+      }
+      return (project.style.display = 'none');
+    });
+  });
+});
diff --git a/portfolio.html b/portfolio.html
@@ -123,31 +123,21 @@ <h1 class="title-section hidden">Portfolio</h1>
 
           <ul class="filters-list">
             <li>
-              <button
-                type="button"
-                class="btn-secondary btn-secondary--all"
-                onclick="filterProjects('all')"
-              >
+              <button type="button" class="btn-secondary btn-secondary--all" data-category="all">
                 Усі
               </button>
             </li>
             <li>
-              <button type="button" class="btn-secondary" onclick="filterProjects('web')">
-                Веб-сайти
-              </button>
+              <button type="button" class="btn-secondary" data-category="web">Веб-сайти</button>
             </li>
             <li>
-              <button type="button" class="btn-secondary" onclick="filterProjects('app')">
-                Додатки
-              </button>
+              <button type="button" class="btn-secondary" data-category="app">Додатки</button>
             </li>
             <li>
-              <button type="button" class="btn-secondary" onclick="filterProjects('design')">
-                Дизайн
-              </button>
+              <button type="button" class="btn-secondary" data-category="design">Дизайн</button>
             </li>
             <li>
-              <button type="button" class="btn-secondary" onclick="filterProjects('marketing')">
+              <button type="button" class="btn-secondary" data-category="marketing">
                 Маркетинг
               </button>
             </li>
@@ -609,19 +599,6 @@ <h2 class="project__card-title">Growing Business</h2>
       </div>
     </footer>
     <script src="./js/menu.js"></script>
-
-    <script>
-      function filterProjects(category) {
-        const projects = document.querySelectorAll('.grid-portfolio__item');
-        projects.forEach(project => {
-          const projectCategory = project.getAttribute('data-category');
-          if (category === 'all' || category === projectCategory) {
-            project.style.display = 'block';
-          } else {
-            project.style.display = 'none';
-          }
-        });
-      }
-    </script>
+    <script src="./js/filter.js"></script>
   </body>
 </html>