Create a Search Filter Using JavaScript

Feeling Hungry while studying So let’s make our own Search Filter (filterable website) for the food menu.

Wait…
Don’t know How to make a Search Filter website using HTML, CSS, and Javascript. So today I will help you to make a website having a menu of your choices. So let’s move forward, First of all, take a look at the website’s look.

Live Preview Of Search Filter Using JavaScript:-

HTML Code for the Search Filter website:-

HTML is the frame of the webpage. As we know before building anything the first thing on which we should work is the basic frame of that thing.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

So, starting with the frame of the webpage.

Firstly I made a div in which three divs are inserted. First div for the heading, second for the categories list, and third for the food items.

1. In the first div class write the heading.

2. In the second add the food categories (lunch, dinner, Chinese, Indian, Mexican, etc) any categories that you want to insert inside it in between a div class named title and category name(like Mexican, Chinese, etc). As we are adding the elements dynamically(adding the food item details through javascript or through an API) we will not add more than two or three categories or only one as when we write javascript code we will add the new categories there.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

3. Finally the part where we can add favorite food items like chowmein , ice cream or etc. As we add items dynamically so we will not so much Html code for it we will just write code for only one item then we will add items dynamically. Inside the item, we will have more divs for image-container, title, price, and category.

4. As our HTML code is completed let’s link the CSS and add the javascript file.

<!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="./foodmenu.css">
</head>
<body>
<div class="content">
<div class="heading">OUR MENU</div>
<div class="cateogaries">
<a class="ctitle all" >All</a>
</div>
<div class="container">
<div class="items">
<div class="img-conatiner"><img src="https://wallpapercave.com/wp/wp3151363.jpg"
alt="Burger" class="img"></div>
<div class="details">
<div class="title">burger</div>
<div class="price">$4</div>
</div>
<div class="cateogary">FAST FOOD</div>
</div>
<div class="items">
<div class="img-conatiner"><img src="https://static.toiimg.com/thumb/73514385.cms?imgsize=1468833&width=800&height=800"
alt="Burger" class="img"></div>
<div class="details">
<div class="title">burger</div>
<div class="price">$4</div>
</div>
<div class="cateogary">FAST FOOD</div>
</div>
</div>
</div>
<script src="./foodmenu.js"></script>
</body>
</html>

CSS ( styling the webpage):-

After framing the frame of the webpage. Now it’s time to style the webpage.

As always set the margin and padding of the whole page using the universal container asterisk(*).

Restaurant Website Using HTML and CSS

1. As the content class is our main class of the webpage. Firstly I set the display to flex It will align all the direct child divs in a horizontal line then set the flex-direction to the column which will align the divs vertically.

2. In the heading class set some basic styling properties.

3. set the styling to the categories class and set the display as flex because we want that the categories name align in an l horizontal line and set some other styling properties.

* {
    margin: 0;
    padding: 0;
}
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.heading {
    font-size: 40px;
    font-weight: 800;
    margin: 60px auto;
}
.cateogaries {
    display: flex;
    flex-wrap: wrap;
}
.ctitle:active {
    background-color: rgba(255, 0, 0, 0.9);
}
.cateogaries .ctitle {
    margin: 10px;
    border: 2px solid red;
    padding: 10px 25px;
    border-radius: 8px;
}
a {
    text-decoration: none;
    color: black;
}
.container {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    justify-content: center;
    margin: 20px;
}
.items {
    width: 200px;
    height: 300px;
    display: flex;
    border: 2px solid red;
    padding: 4px;
    border-radius: 10px;
    margin: 20px;
    flex-direction: column;
}
.img {
    width: 200px;
    height: 200px;
}
.title {
    font-size: 20px;
}
.cateogary {
    text-align: center;
    margin: 10px 0px;
}
.details {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.items:hover {
    background-color: red;
    color: white;
    transition-duration: 0.7s;
    box-shadow: 8px 8px 10px rgba(255, 0, 0, 0.4);
    transform: translate(-8px, -8px);
}
.items:hover .img {
    transform: scale(1.2);
    transition-duration: 1s;
}
.img-conatiner {
    height: 200px;
    width: 200px;
    overflow: hidden;
}
.cateogaries .ctitle:hover {
    transform: translate(3px, -5px);
    transition-duration: 0.7s;
    box-shadow: 5px 5px 10px rgba(255, 0, 0, 0.5);
}

Similarly, styling for the items (food items) and the divs inside it and some hover properties to it like box-shadow, transform, etc.

Create A Travel Website Using HTML & CSS

So, Finally, your styling is ended let’s check How’s your website is looking after the HTML and CSS code.

Javascript code for search filter:-

Now the queen of our whole content comes into role. As our main aim is to filter the items according to category and add food item details dynamically(through javascript).

You should have a proper knowledge of the following topics:-

1.DOM(Document Object Model).

2. Map, Filter and Reduce functions.

50+ HTML, CSS & JavaScript Projects With Source Code

3. Basics of Javascript.

1. We will create javascript objects which include id, image-link, item name, and category name.

const food = [
    {
        id: 1,
        name: "BURGER",
        img: "https://wallpapercave.com/wp/wp3151363.jpg",
        price: 3,
        cateogary: "FASTFOOD",
    },
    {
        id: 2,
        name: "CHEESE BURGER",
        img:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8Cw7DLr9RY9FnQBQn7WS5J-1un-895x5pQg&usqp=CAU",
        price: 4,
        cateogary: "FASTFOOD",
    },
    {
        id: 3,
        name: "FRENCH FRIES",
        img:
            "https://image.freepik.com/free-photo/front-view-tasty-ham-sandwiches-with-french-fries-dark-surface_179666-34646.jpg",
        price: 2.8,
        cateogary: "FASTFOOD",
    },
    {
        id: 4,
        name: "DAL",
        img:
            "https://image.freepik.com/free-photo/indian-dhal-spicy-curry-bowl-spices-herbs-rustic-black-wooden-background_2829-4752.jpg",
        price: 7,
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 5,
        name: "RICE",
        img:
            "https://image.freepik.com/free-photo/cooked-plain-white-basmati-rice-steamed-rice-bowl_466689-74933.jpg",
        price: 5,
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 6,
        name: "PLAIN ROTI",
        img:
            "https://image.freepik.com/free-photo/chapati-tanturi-roti_57665-1758.jpg",
        price: 1,
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 7,
        name: "FRUIT SALAD",
        img:
            "https://image.freepik.com/free-photo/fresh-fruit-berry-salad-healthy-eating_114579-20466.jpg",
        price: 1.5,
        cateogary: "BREAKFAST",
    },
    {
        id: 8,
        name: "SALAD",
        img:
            "https://image.freepik.com/free-photo/greek-salad-with-fresh-tomato-cucumber-red-onion-basil-feta-cheese-black-olives-italian-herbs_2829-4480.jpg",
        price: 1.5,
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 9,
        name: "MATAR PANEER",
        img:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-lPaLy7Hf9pOD2j66L0-N7Y6pUX4AnfNa9g&usqp=CAU",
        price: 7,
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 9,
        name: "SAAHI PANEER",
        img:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvHFMNPyqk648viJIh6EAOI1y98OJPpfydpg&usqp=CAU",
        price: 8,
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 10,
        name: "KADAHI PANEER",
        img:
            "https://c.ndtvimg.com/hoqnolg8_kadai-paneer,-recipe_625x300_20_July_18.jpg",
        price: 6,
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 11,
        name: "CHOLLE BHATURE",
        img:
            "https://img-global.cpcdn.com/recipes/ff515314282d0608/751x532cq70/punjabi-chole-bhature-recipe-chole-bhature-recipe-recipe-main-photo.jpg",
        price: 7,
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 12,
        name: "CHOLLE KULCHE",
        img:
            "https://static.toiimg.com/thumb/73514385.cms?imgsize=1468833&width=800&height=800",
        price: "5",
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 13,
        name: "NAAN",
        img:
            "https://spicesnflavors.com/wp-content/uploads/2019/09/naan-bread-3-500x500.jpg",
        price: 3,
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 14,
        name: "BUTTERED NAAN",
        img:
            "https://s3-ap-south-1.amazonaws.com/betterbutterbucket-silver/mekhla-rashmi2018050315402018.jpeg",
        price: 2.4,
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 15,
        name: "MASALA DAAL",
        img: "https://i.ytimg.com/vi/7ws90bPThx0/maxresdefault.jpg",
        price: 4,
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 16,
        name: "RAJMA CHAWAL",
        img:
            "https://www.secondrecipe.com/wp-content/uploads/2017/08/rajma-chawal-1.jpg",
        price: 7,
        cateogary: "LUNCH/DINNER",
    },
    {
        id: 17,
        name: "PIZZA",
        img:
            "https://image.freepik.com/free-photo/top-view-pepperoni-pizza-with-mushroom-sausages-bell-pepper-olive-corn-black-wooden_141793-2158.jpg",
        price: 4,
        cateogary: "FASTFOOD",
    },
    {
        id: 18,
        name: "CHEESY CORN PIZZA",
        img:
            "https://image.freepik.com/free-photo/slice-crispy-pizza-with-meat-cheese_140725-6974.jpg",
        price: 5,
        cateogary: "FASTFOOD",
    },
    {
        id: 19,
        name: "VEG FRIED RICE",
        img:
            "https://image.freepik.com/free-photo/vegetarian-hyderabadi-dum-biryani-ramadan-food_158388-2268.jpg",
        price: 5,
        cateogary: "FASTFOOD",
    },
    {
        id: 20,
        name: "CHAAT/TIKKI",
        img:
            "https://static.toiimg.com/thumb/52727664.cms?width=1200&height=900",
        price: 5,
        cateogary: "FASTFOOD",
    },
    {
        id: 21,
        name: "CHOWMEIN",
        img:
            "https://image.freepik.com/free-photo/fried-noodles-plate_1339-2157.jpg",
        price: 5,
        cateogary: "FASTFOOD",
    },
    {
        id: 22,
        name: "PANI PURI",
        img:
            "https://static.toiimg.com/thumb/61048461.cms?imgsize=1981854&width=800&height=800",
        price: 3,
        cateogary: "FASTFOOD",
    },
    {
        id: 23,
        name: "MANCHURIAN BALLS",
        img: "https://i.ytimg.com/vi/xkMbJCtaaqA/maxresdefault.jpg",
        price: 5,
        cateogary: "FASTFOOD",
    },
    {
        id: 24,
        name: "AALOO PARATHA",
        img:
            "https://static.toiimg.com/thumb/53109843.cms?imgsize=244340&width=800&height=800",
        price: 4,
        cateogary: "BREAKFAST",
    },
    {
        id: 25,
        name: "PYAZ PARATHA",
        img:
            "https://cdn3.foodviva.com/static-content/food-images/roti-paratha-recipes/onion-paratha-recipe/onion-paratha-recipe.jpg",
        price: 4,
        cateogary: "BREAKFAST",
    },
    {
        id: 26,
        name: "SATOO PARATHA",
        img:
            "https://static.toiimg.com/thumb/54444357.cms?imgsize=128894&width=800&height=800",
        price: 4,
        cateogary: "BREAKFAST",
    },
    {
        id: 27,
        name: "PLAIN PARATHA",
        img:
            "https://indianvegrecipe.com/wp-content/uploads/2019/10/paratha-recipe.jpg",
        price: 3,
        cateogary: "BREAKFAST",
    },
    {
        id: 28,
        name: "BREAD AND BUTTER",
        img:
            "https://media.istockphoto.com/photos/bread-and-butter-picture-id463179229",
        price: 2,
        cateogary: "BREAKFAST",
    },
    {
        id: 29,
        name: "BREAD AND JAM",
        img:
            "https://media.istockphoto.com/photos/strawberry-preserves-on-bread-picture-id525057795",
        price: 2,
        cateogary: "BREAKFAST",
    },
    {
        id: 30,
        name: "BOILED EGGS",
        img: "https://images.media-allrecipes.com/userphotos/9188544.jpg",
        price: 4,
        cateogary: "BREAKFAST",
    },
    {
        id: 31,
        name: "EGG OMELATE",
        img:
            "https://i2.wp.com/mygorgeousrecipes.com/wp-content/uploads/2018/02/Worlds-Best-Vegetarian-Omelette-Quick-and-Easy-500x375.jpg",
        price: 5,
        cateogary: "BREAKFAST",
    },
    {
        id: 32,
        name: "TEA",
        img:
            "https://img.onmanorama.com/content/dam/mm/en/food/features/images/2021/10/22/tea.jpg",
        price: 3,
        cateogary: "DRINKS",
    },
    {
        id: 33,
        name: "COFFEE",
        img:
            "https://media-cldnry.s-nbcnews.com/image/upload/t_nbcnews-fp-1200-630,f_auto,q_auto:best/newscms/2019_33/2203981/171026-better-coffee-boost-se-329p.jpg",
        price: 3,
        cateogary: "DRINKS",
    },
    {
        id: 34,
        name: "COLD DRINK",
        img: "https://cdn.cdnparenting.com/articles/2018/07/361921454-H.jpg",
        price: 5,
        cateogary: "DRINKS",
    },
    {
        id: 35,
        name: "SHAKES",
        img:
            "https://dairyfarmersofcanada.ca/sites/default/files/styles/recipe_image/public/image_file_browser/conso_recipe/summer-of-shakes.jpg.jpeg?itok=OUDvbdfl",
        price: 4.5,
        cateogary: "DRINKS",
    },
    {
        id: 36,
        name: "COLD COFFEE",
        img:
            "https://www.mygingergarlickitchen.com/wp-content/rich-markup-images/1x1/1x1-cold-coffee-recipe.jpg",
        price: 3,
        cateogary: "DRINKS",
    },
    {
        id: 37,
        name: "NIMBU PAANI",
        img:
            "https://simmertoslimmer.com/wp-content/uploads/2016/07/Nimbu-Pani.jpg",
        price: 2,
        cateogary: "DRINKS",
    },
];

Above we have declared the array of objects. Now it’s time to use it in codes. Now its time uses it.

Firstly we will tag the element categories and container through query selector so that we can work on it in javascript.

cateogaries=document.querySelector(".cateogaries");  
 container=document.querySelector(".container");  
 
window.addEventListener("DOMContentLoaded",function(){  
   filterMenu("ALL")  
   var cat=food.reduce(function(values,items){  
 if(!values.includes(items.cateogary)){  
   values.push(items.cateogary);  
 }  
 return values;  
   },["ALL"])  
   var catBtn=cat.map(function(item){  
     return`<a href="#" class="ctitle ${item}">${item}</a>`;  
   })  
    var catBtns=catBtn.join("")  
   cateogaries.innerHTML=catBtns;  
   var button=document.getElementsByClassName("ctitle")  
 for(var i=0;i<button.length;i++){  
     button[i].addEventListener("click",(e)=>{  
 var val=e.target.className.split(" ");  
 filterMenu(val[1])  
     })  
   }})  
 function displayMenu(food){  
   var displayMenu=food.map(function(item){  
     return(  
       `<div class="items">  
       <div class="img-conatiner"><img src=${item.img}  
       alt="${item.title}" class="img"></div>   
        <div class="details">  
          <div class="title">${item.name}</div>  
          <div class="price">$${item.price}</div>  
         </div>  
       <div class="cateogary">${item.cateogary}</div>  
     </div>`)  
   })  
   displayMenu=displayMenu.join("");  
   container.innerHTML=displayMenu  
 }  
 var lists=food.reduce(function(values,items){  
   if(!values.includes(items.cateogary)){  
     values.push(items.cateogary);  
   }  
   return values;  
     },["ALL"]);  
 function filterMenu(cateogary){  
    var filter1=food.filter(function(item){  
 if(item.cateogary===cateogary){  
   return item;  
 }})  
 if(cateogary==="ALL"){  
   displayMenu(food);  
 }  
 else{  
   displayMenu(filter1);  
 }  
 }

So here is the code Now it’s your turn to implement it.

Movie App using HTML, CSS, and Javascript

I hope you have liked your food menu. Wait, Did you still not implement it So why are you waiting, go and implement it now and enjoy your food😎.

If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

Written by @Himanshu Singh

CodeWithRandom

Create a Search Filter Using JavaScript

Create a Search Filter Using JavaScript

HTML Code for the Search Filter website:-

CSS ( styling the webpage):-

Javascript code for search filter:-

Leave a Reply Cancel reply

Navigate

Subscribe Now

Create a Search Filter Using JavaScript

HTML Code for the Search Filter website:-

CSS ( styling the webpage):-

Javascript code for search filter:-

You Might Also Like

Create Image Slider Using HTML, CSS And JavaScript Code

25+ CSS Background Particle

How to Center a Div in CSS? 3 Ways to Center Div

Leave a Reply Cancel reply

Navigate

Subscribe Now