CodePen Embed - food menu


    
    

<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>

*{
    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);
}

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",

    },
];


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);
}
}

This Pen is owned by Himanshu Singh on CodePen.

See more by @himanishu on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.