Create a filter list with JavaScript | Search Filter - Codewithrandom

Create a filter list with JavaScript | Search Filter - Codewithrandom

Create a filter list with JavaScript | Search Filter - Codewithrandom


Feeling Hungry while studying So let's make our own filterable website of food menu.

Wait...
Don't know How to make a Filterable 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 server:-

See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.


HTML Code for the 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.
So, starting with the frame of the webpage.

Create a filter list with JavaScript | Search Filter - Codewithrandom
 
Firstly I made a div in which three divs are inserted. First div for the heading, second for 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 ctitle 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.
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 an only one item then we will add items dynamically.Inside the item we will 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(*).

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

2. In the heading class set some basic styling properties.
3. set the styling to categories class set the display as flex because we want that the categories name align in a 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 done styling for the items (food items) and the divs inside it and some hover properties to it like box-shadow, transform,etc.

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

Create a filter list with JavaScript | Search Filter - Codewithrandom

Create a filter list with JavaScript | Search Filter - Codewithrandom

Javascript code :-

Now the queen of our whole content comes into role.As our main aim to filter the items according to cateogary and adding food item details dynamically(through javascript).
You should have a proper knowledge of  following topics:-

1.DOM(Document Object Model).
2.Map,Filter and Reduce functions.
3.Basics of Javascript.

1.We will create javascript objects which includes 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 use it.

Firstly we will tag the element cateogaries 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.


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(Instagram).

Post a Comment

Previous Post Next Post