StyleVault/menu_script.js at main · satishbabu0/StyleVault · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
const foods = [
    {
        name: "Idli Sambhar",
        price: "Rs.80",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2015/12/poha-idli-recipe-280x280.jpg",
        cuisine: "South Indian"
    },
    {
        name: "Masala Dosa",
        price: "Rs.100",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2021/06/masala-dosa-recipe-1-280x280.jpg",
        cuisine: "South Indian"
    },
    {
        name: "Upma",
        price: "Rs.50",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2009/08/upma-recipe-1-280x280.jpg",
        cuisine: "South Indian"
    },
    {
        name: "Bharli Vangi",
        price: "Rs.120",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2022/12/bharli-vangi-recipe-280x280.jpg",
        cuisine: "Maharashtrian"
    },
    {
        name: "Jowar Roti",
        price: "Rs.40",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2015/04/jowar-roti-recipe-280x280.jpg",
        cuisine: "Maharashtrian"
    },
    {
        name: "Pav Bhaji",
        price: "Rs.80",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2021/04/pav-bhaji-1-280x280.jpg",
        cuisine: "Maharashtrian"
    },{
        name: "Rasam",
        price: "Rs.180",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2014/02/rasam-recipe-1-280x280.jpg",
        cuisine: "South Indian"
    },{
        name: "Mango Rice",
        price: "Rs.75",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2015/04/raw-mango-rice-recipe-280x280.jpg",
        cuisine: "South Indian"
    },{
        name: "Matar Paneer",
        price: "Rs.125",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2017/06/matar-paneer-dhaba-style-recipe-280x280.jpg",
        cuisine: "Punjabi"
    },{
        name: "Pot Dal Makhani",
        price: "Rs.75",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2009/08/instant-pot-dal-makhani-280x280.jpg",
        cuisine: "Punjabi"
    },{
        name: "Dahi Bhalla",
        price: "Rs.55",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2015/11/dahi-bhalla-recipe-280x280.jpg",
        cuisine: "Punjabi"
    },{
        name: "Aloo Kofta",
        price: "Rs.75",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2015/08/aloo-kofta-gravy-recipe-280x280.jpg",
        cuisine: "Punjabi"
    },{
        name: "Peas PulaoL",
        price: "Rs.95",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2021/01/peas-pulao-recipe-280x280.jpg",
        cuisine: "Punjabi"
    },{
        name: "Lassi",
        price: "Rs.45",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2021/04/lassi-recipe-1-280x280.jpg",
        cuisine: "Punjabi"
    },{
        name: "Sabudana Vada",
        price: "Rs.35",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2021/05/sabudana-vada-recipe-3-280x280.jpg",
        cuisine: "Maharashtrian"
    },{
        name: "Chakli",
        price: "Rs.60",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2014/10/chakli-3-280x280.jpg",
        cuisine: "Maharashtrian"
    },{
        name: "Rice Puri",
        price: "Rs.55",
        image: "https://www.vegrecipesofindia.com/wp-content/uploads/2014/07/rice-pooris-recipe-280x280.jpg",
        cuisine: "Maharashtrian"
    }

];

// Function to generate food items based on the selected cuisine
function displayFoodItems(cuisine = 'All') {
    const foodList = document.getElementById('food-list');
    foodList.innerHTML = ''; // Clear previous items

    const filteredFoods = (cuisine === 'All') ? foods : foods.filter(food => food.cuisine === cuisine);

    filteredFoods.forEach(food => {
        // Create a food item box
        const foodItem = document.createElement('div');
        foodItem.classList.add('food-item');

        // Add image
        const foodImage = document.createElement('img');
        foodImage.src = food.image;

        // Add info section
        const foodInfo = document.createElement('div');
        foodInfo.classList.add('info');

        // Add name
        const foodName = document.createElement('h2');
        foodName.textContent = food.name;

        // Add price
        const foodPrice = document.createElement('p');
        foodPrice.classList.add('price');
        foodPrice.textContent = food.price;

        // Append everything together
        foodInfo.appendChild(foodName);
        foodInfo.appendChild(foodPrice);
        foodItem.appendChild(foodImage);
        foodItem.appendChild(foodInfo);
        foodList.appendChild(foodItem);
    });
}

// Event listener for navbar links
document.querySelectorAll('.nav-links a').forEach(link => {
    link.addEventListener('click', (event) => {
        event.preventDefault(); // Prevent default link behavior
        const selectedCuisine = event.target.getAttribute('data-cuisine');
        displayFoodItems(selectedCuisine);
    });
});

// Call the function to display all food items on page load
displayFoodItems();