Today #Day138 of #365DaysOfCode, I am Building Responsive Filterable Image Gallery using HTML CSS & JavaScript.

JavaScript Start

create a script.js file

include the script.js file in HTML,

<script src="/script.js"></script>

selecting all required elements

const filterItem = document.querySelector('.items')
const filterImg = document.querySelector('.image')

Making all images filterable (JS)

Add data attribute to all span and div with images,

The code below removes the active class and adds it to the clicked item, and it stores the data attribute in the filterName variable.

filterItem.onclick = (selectedItem)=>{
    if(selectedItem.target.classList.contains('item')){
        filterItem.querySelector('.active').classList.remove('active')
        selectedItem.target.classList.add('active')
        let filterName = selectedItem.target.getAttribute('data-name')
    }
}

Now, filtering the images,

add these CSS hide and show classes,

add animation,

.gallery .image.hide {
  display: none;
}
.gallery .image.show {
  animation: animate 0.4s ease;
}
@keyframes animate {
  0%{
    transform: scale(0.5);
  }
  100%{
    transform: scale(1);
  }
}

The code below adds show class if filterImage and filterName is equal or all.

if not adds hide class and removes show class.

filterImg.forEach((image) => {
        let filterImages = image.getAttribute("data-name");
        if (filterImages == filterName || filterName == "all") {
          image.classList.remove("hide");
          image.classList.add("show");
        } else {
          image.classList.add("hide");
          image.classList.remove("show");
        }
      });

Conclusion

I completed filtering images in JavaScript for the Filterable Image Gallery project.

Code

1. code

   

   preview

   

Source: Filter Image Gallery[Link]

Author: Dheeraj.y

Connect with me:

• My Twitter

• My LinkedIn

• My GitHub

• My Hashnode