Product Filter Gallery

Product Filter Gallery - JavaScript

A Product Filter Gallery in JavaScript is a script that allows users to filter a product gallery based on specific categories or criteria. The script typically retrieves the product information from a data source (such as an API or a JSON file) and uses JavaScript to dynamically filter and display the products based on user selections.

The script will likely include the following elements:

Variables to store the product data and the selected filters
Event handlers (e.g. on button click or select change) to update the selected filters and call the filtering function
A function to filter the products based on the selected filters and update the product gallery on the page
Form elements (e.g. buttons or select options) for the user to specify the filters
The ability to show/hide the products based on the selected filter

In addition, the script should be able to handle multiple filters at the same time and also the reset option to show all the products. This script can be used in an e-commerce website, an online catalog or any other website where a product gallery is required.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="control">
 
  <div class="btn-group">
    <button class="btn btn-clicked" data-filter="all">All</button>
    <button class="btn" data-filter="pizza">Pizza</button>
    <button class="btn" data-filter="cake">Cake</button>
    <button class="btn" data-filter="icecream">Ice Cream</button>
  </div>

  <input type="text" placeholder="Search Food" id="search">
</div>
<div class="container">

  <div class="box" data-item="icecream"> 
    <img src="images/41.jpg">
  </div>
  <div class="box"  data-item="cake">
    <img src="images/61.jpg">
  </div>
  <div class="box"  data-item="pizza">
    <img src="images/81.jpg">
  </div>


  <div class="box" data-item="icecream"> 
    <img src="images/42.jpg">
  </div>
  <div class="box"  data-item="cake">
    <img src="images/62.jpg">
  </div>
  <div class="box"  data-item="pizza">
    <img src="images/82.jpg">
  </div>


  <div class="box" data-item="icecream"> 
    <img src="images/43.jpg">
  </div>
  <div class="box"  data-item="cake">
    <img src="images/63.jpg">
  </div>
  <div class="box"  data-item="pizza">
    <img src="images/83.jpg">
  </div>

  <div class="box" data-item="icecream"> 
    <img src="images/44.jpg">
  </div>
  <div class="box"  data-item="cake">
    <img src="images/64.jpg">
  </div>
  <div class="box"  data-item="pizza">
    <img src="images/84.jpg">
  </div>


  <div class="box" data-item="icecream"> 
    <img src="images/45.jpg">
  </div>
  <div class="box"  data-item="cake">
    <img src="images/65.jpg">
  </div>
  <div class="box"  data-item="pizza">
    <img src="images/85.jpg">
  </div>

</div>


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

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

html{
  font-size:22px;
}


body{
  background-color: #353b48;
  padding: 1rem;
}


.box{
  height: 8rem;
  border: 5px solid white;
  border-radius: 3px;
  overflow: hidden;
}

.box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
  transform-origin: top;
}
.box img:hover{
transform: scale(1.5);

}
.container{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 1rem;
}

.control{
  max-width: 1200px;
  height: 100px;
  margin: 0 auto;
  padding: 10px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-group button{
    width: 100px;
    height: 30px;
    border: none;
    font-size: 0.7rem;
    background-color: #00b894;
    color:#fff;
    border: 2px solid #00b894;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 3px;
}

.btn-group button:hover,
.btn-group .btn-clicked
{
  background-color: #353b48;
}

#search{
  width: 200px;
  height: 30px;
  outline: none;
  padding: 0 10px;
  border:2px solid #00b894;
  border-radius: 3px;
  font-size: 0.6rem;
}

This script is for a product filter gallery that allows users to filter products based on specific categories, or by searching for a specific product using a search box.

The script starts by fetching all the necessary elements from the HTML page, such as the filter buttons, product boxes, and the search box. Then it adds an event listener to the search box, so that when the user types in the search box, the script filters the products based on the text entered by the user. It does this by converting the entered text to lowercase, trimming any whitespaces, and then checking if the product data includes the entered text. If it does, the product box is shown, otherwise it's hidden. And also it removes the active class from all the buttons and adds it to the first button.

The script also adds event listeners to each filter button, so that when a button is clicked, the script filters the products based on the data-filter attribute of the button. It then loops through all the product boxes and checks if the data-item attribute of the box matches the data-filter attribute of the button. If it does, the product box is shown, otherwise it's hidden. It also removes the active class from all the buttons and adds it to the clicked button.

The function setActiveBtn(e) is to set the active class to the clicked button and removes the active class from the other buttons. The active class is used to indicate which button is currently selected and it is used for styling purposes.

js/script.js

const buttons=document.querySelectorAll('.btn');
const boxes=document.querySelectorAll('.box');
const searchBox=document.querySelector("#search");

/* Search Product by Textbox */
searchBox.addEventListener('keyup',(e)=>{
  searchText=e.target.value.toLowerCase().trim();

  boxes.forEach((box)=>{
    const data=box.dataset.item;
    if(data.includes(searchText)){
      box.style.display='block';
    }else{
      box.style.display='none';
    }
  });

  buttons.forEach((button)=>{
    button.classList.remove('btn-clicked');
  });
  buttons[0].classList.add('btn-clicked');
});

buttons.forEach((button)=>{
  button.addEventListener('click',(e)=>{

    e.preventDefault();
    setActiveBtn(e);
    const btnfilter=e.target.dataset.filter;
    
    boxes.forEach((box=>{
      if(btnfilter=='all'){
        box.style.display="block";
      }else{

        const boxfilter=box.dataset.item;
        if(btnfilter==boxfilter){
          box.style.display="block";
        }else{
          box.style.display="none";
        }
        
      }
    }));


  });
});


function  setActiveBtn(e){
  buttons.forEach((button)=>{
    button.classList.remove('btn-clicked');
  });
  e.target.classList.add('btn-clicked');
}

Output

Live Preview

Overall, this script allows users to filter a product gallery by category or by searching for a specific product, and it updates the product gallery dynamically based on user input.