Filter portfolio & improve code

billalben · May 5, 2024 · 6b664c3 · 6b664c3
1 parent a3c0964
commit 6b664c3
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 24 deletions.
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -12,23 +12,57 @@ const lightbox = GLightbox({
 });
 
 // BACK TO TOP BUTTON
+document.addEventListener("DOMContentLoaded", () => {
 const backToTop = document.querySelector(".back-to-top");
 window.addEventListener("scroll", () => {
   backToTop.classList[window.scrollY > 200 ? "add" : "remove"]("active");
 });
+});
 
 // Active nav link
-const navLinks = document.querySelectorAll(".nav-link");
-let lastActiveNavLink = navLinks[0];
-
-navLinks.forEach((navLink) => {
-  navLink.addEventListener("click", () => {
-    lastActiveNavLink.classList.remove("active");
-    navLink.classList.add("active");
-    lastActiveNavLink = navLink;
+document.addEventListener("DOMContentLoaded", () => {
+  const navLinks = document.querySelectorAll(".nav-link");
+  let lastActiveNavLink = navLinks[0];
+
+  navLinks.forEach((navLink) => {
+    navLink.addEventListener("click", () => {
+      lastActiveNavLink.classList.remove("active");
+      navLink.classList.add("active");
+      lastActiveNavLink = navLink;
+    });
   });
 });
 
 // Dynamic copyright year
-const copyrightYear = document.querySelector("span.copyright-yr");
-copyrightYear.textContent = new Date().getFullYear();
+document.addEventListener("DOMContentLoaded", () => {
+  const copyrightYear = document.querySelector("span.copyright-yr");
+  copyrightYear.textContent = new Date().getFullYear();
+});
+
+// Filters for portfolio
+document.addEventListener("DOMContentLoaded", function () {
+  const buttons = document.querySelectorAll("[data-filter]");
+  const items = document.querySelectorAll("[data-category]");
+
+  let lastActiveButton = buttons[0];
+  lastActiveButton.classList.add("active");
+
+  buttons.forEach(function (button) {
+    button.addEventListener("click", function () {
+      lastActiveButton.classList.remove("active");
+      lastActiveButton = button;
+      lastActiveButton.classList.add("active");
+
+      const category = this.getAttribute("data-filter");
+      filterItems(category);
+    });
+  });
+
+  function filterItems(category) {
+    items.forEach(function (item) {
+      const itemCategory = item.getAttribute("data-category");
+      item.style.display =
+        category === "all" || category === itemCategory ? "block" : "none";
+    });
+  }
+});
diff --git a/index.html b/index.html
@@ -700,22 +700,24 @@ <h1 class="display-3 fw-bold text-capitalize">Latest work</h1>
         <!-- FILTER BUTTONS  -->
         <div class="row mt-5 mb-4 g-3 text-center">
           <div class="col-md-12">
-            <button class="btn btn-outline-primary" type="button">All</button>
-            <button class="btn btn-outline-primary" type="button">
+            <button class="btn btn-outline-primary" data-filter="all" type="button">
+              All
+            </button>
+            <button class="btn btn-outline-primary" type="button" data-filter="website">
               websites
             </button>
-            <button class="btn btn-outline-primary" type="button">
+            <button class="btn btn-outline-primary" type="button" data-filter="design">
               design
             </button>
-            <button class="btn btn-outline-primary" type="button">
+            <button class="btn btn-outline-primary" type="button" data-filter="mockup">
               mockup
             </button>
           </div>
         </div>
 
         <!-- START THE PORTFOLIO ITEMS  -->
         <div class="row">
-          <div class="col-lg-4 col-md-6">
+          <div class="col-lg-4 col-md-6" data-category="mockup">
             <div class="portfolio-box shadow">
               <img
                 src="./assets/images/portfolio/portfolio-1.jpg"
@@ -732,7 +734,7 @@ <h4>project name goes here 1</h4>
               </div>
             </div>
           </div>
-          <div class="col-lg-4 col-md-6">
+          <div class="col-lg-4 col-md-6" data-category="design">
             <div class="portfolio-box shadow">
               <img
                 src="./assets/images/portfolio/portfolio-2.jpg"
@@ -749,7 +751,7 @@ <h4>project name goes here 2</h4>
               </div>
             </div>
           </div>
-          <div class="col-lg-4 col-md-6">
+          <div class="col-lg-4 col-md-6" data-category="website">
             <div class="portfolio-box shadow">
               <img
                 src="./assets/images/portfolio/portfolio-3.jpg"
@@ -766,7 +768,7 @@ <h4>project name goes here 3</h4>
               </div>
             </div>
           </div>
-          <div class="col-lg-4 col-md-6">
+          <div class="col-lg-4 col-md-6" data-category="website">
             <div class="portfolio-box shadow">
               <img
                 src="./assets/images/portfolio/portfolio-4.jpg"
@@ -783,7 +785,7 @@ <h4>project name goes here 4</h4>
               </div>
             </div>
           </div>
-          <div class="col-lg-4 col-md-6">
+          <div class="col-lg-4 col-md-6" data-category="website">
             <div class="portfolio-box shadow">
               <img
                 src="./assets/images/portfolio/portfolio-5.jpg"
@@ -800,7 +802,7 @@ <h4>project name goes here 5</h4>
               </div>
             </div>
           </div>
-          <div class="col-lg-4 col-md-6">
+          <div class="col-lg-4 col-md-6" data-category="website">
             <div class="portfolio-box shadow">
               <img
                 src="./assets/images/portfolio/portfolio-6.jpg"
@@ -817,7 +819,7 @@ <h4>project name goes here 6</h4>
               </div>
             </div>
           </div>
-          <div class="col-lg-4 col-md-6">
+          <div class="col-lg-4 col-md-6" data-category="design">
             <div class="portfolio-box shadow">
               <img
                 src="./assets/images/portfolio/portfolio-7.jpg"
@@ -834,7 +836,7 @@ <h4>project name goes here 7</h4>
               </div>
             </div>
           </div>
-          <div class="col-lg-4 col-md-6">
+          <div class="col-lg-4 col-md-6" data-category="mockup">
             <div class="portfolio-box shadow">
               <img
                 src="./assets/images/portfolio/portfolio-8.jpg"
@@ -851,7 +853,7 @@ <h4>project name goes here 8</h4>
               </div>
             </div>
           </div>
-          <div class="col-lg-4 col-md-6">
+          <div class="col-lg-4 col-md-6" data-category="design">
             <div class="portfolio-box shadow">
               <img
                 src="./assets/images/portfolio/portfolio-9.jpg"
@@ -1129,7 +1131,8 @@ <h5 class="text-capitalize fw-bold">contact</h5>
           <div class="row text-center text-white">
             <div class="col-12">
               <div class="footer-bottom__copyright">
-                &COPY; Copyright <span class="copyright-yr">2024</span> <a href="#">Company</a> | Created by
+                &COPY; Copyright <span class="copyright-yr">2024</span>
+                <a href="#">Company</a> | Created by
                 <a href="https://github.com/billalben" target="_blank">
                   Billal
                 </a>