Skip to content

Commit 431f6cb

Browse files
guneyuralguneyural
authored
Meal filter app
1 parent 91798ad commit 431f6cb

File tree

3 files changed

+150
-0
lines changed

3 files changed

+150
-0
lines changed

‎restaurant-menu/app.js

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
const menu = [
2+
{
3+
id: 1,
4+
title: "buttermilk pancakes",
5+
category: "breakfast",
6+
price: 15.99,
7+
img: "https://images.unsplash.com/flagged/photo-1553505192-acca7d4509be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1967&q=80",
8+
desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,
9+
},
10+
{
11+
id: 2,
12+
title: "diner double",
13+
category: "lunch",
14+
price: 13.99,
15+
img: "https://images.unsplash.com/photo-1549399541-54e16138e7ec?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80",
16+
desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,
17+
},
18+
{
19+
id: 3,
20+
title: "godzilla milkshake",
21+
category: "shakes",
22+
price: 6.99,
23+
img: "https://images.unsplash.com/photo-1528597469186-bddab681a37f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80",
24+
desc: `ombucha chillwave fanny pack 3 wolf moon street art photo booth before they sold out organic viral.`,
25+
},
26+
{
27+
id: 4,
28+
title: "country delight",
29+
category: "breakfast",
30+
price: 20.99,
31+
img: "https://images.unsplash.com/photo-1549399542-7e3f8b79c341?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
32+
desc: `Shabby chic keffiyeh neutra snackwave pork belly shoreditch. Prism austin mlkshk truffaut, `,
33+
},
34+
{
35+
id: 5,
36+
title: "egg attack",
37+
category: "lunch",
38+
price: 22.99,
39+
img: "https://images.unsplash.com/photo-1601362840469-51e4d8d58785?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
40+
desc: `franzen vegan pabst bicycle rights kickstarter pinterest meditation farm-to-table 90's pop-up `,
41+
},
42+
{
43+
id: 6,
44+
title: "oreo dream",
45+
category: "shakes",
46+
price: 18.99,
47+
img: "https://images.unsplash.com/photo-1601362840608-942cdd122b52?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
48+
desc: `Portland chicharrones ethical edison bulb, palo santo craft beer chia heirloom iPhone everyday`,
49+
},
50+
{
51+
id: 7,
52+
title: "bacon overflow",
53+
category: "breakfast",
54+
price: 8.99,
55+
img: "https://images.unsplash.com/photo-1601362839562-eac9b79d2e7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
56+
desc: `carry jianbing normcore freegan. Viral single-origin coffee live-edge, pork belly cloud bread iceland put a bird `,
57+
},
58+
{
59+
id: 8,
60+
title: "american classic",
61+
category: "lunch",
62+
price: 12.99,
63+
img: "https://images.unsplash.com/photo-1601362839860-88a6a13f4acc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
64+
desc: `on it tumblr kickstarter thundercats migas everyday carry squid palo santo leggings. Food truck truffaut `,
65+
},
66+
{
67+
id: 9,
68+
title: "quarantine buddy",
69+
category: "shakes",
70+
price: 16.99,
71+
img: "https://images.unsplash.com/photo-1601362840367-ebe42a6bda53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
72+
desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
73+
},
74+
{
75+
id: 10,
76+
title: "steak dinner",
77+
category: "dinner",
78+
price: 39.99,
79+
img: "https://images.unsplash.com/photo-1601362840138-44bca7a80305?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80",
80+
desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
81+
},
82+
];
83+
const meals = document.querySelector('.meals');
84+
const btns = document.querySelectorAll('button');
85+
window.onload = function () {
86+
this.getMeals();
87+
}
88+
function addMealsToDocument(item) {
89+
let div = document.createElement('div');
90+
div.setAttribute('id', item.id);
91+
div.setAttribute('class', item.category);
92+
div.innerHTML = `
93+
<div class="meal-item">
94+
<img src="${item.img}" alt="image of ${item.title}" height="300px" style="object-fit: fit;"/>
95+
<h4 class="meal-name">${item.title}</h4>
96+
<p class="text-muted">${item.desc}</p>
97+
<p>$ ${item.price}</p>
98+
</div>
99+
`;
100+
meals.appendChild(div);
101+
}
102+
function getMeals() {
103+
menu.forEach(item => {
104+
addMealsToDocument(item);
105+
});
106+
}
107+
function getMealsByCategory(category="all") {
108+
meals.innerHTML = "";
109+
if(category != 'all') {
110+
const filteredResults = menu.filter(item => item.category == category);
111+
filteredResults.forEach(item => {
112+
addMealsToDocument(item);
113+
});
114+
} else {
115+
getMeals();
116+
}
117+
}
118+
btns.forEach(btn => {
119+
btn.addEventListener('click', e => {
120+
getMealsByCategory(e.target.value);
121+
});
122+
})

‎restaurant-menu/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
8+
<link rel="stylesheet" type="text/css" href="style.css">
9+
<title>Restaurant Menu</title>
10+
</head>
11+
<body class="bg-light">
12+
13+
<div class="container">
14+
<h1 class="text-center">Our Menu</h1>
15+
<div class="button-group mt-5 mb-5">
16+
<button value="all">All</button>
17+
<button value="breakfast">Breakfast</button>
18+
<button value="lunch">Lunch</button>
19+
<button value="shakes">Shakes</button>
20+
<button value="dinner">Dinner</button>
21+
</div>
22+
<div class="meals"></div>
23+
</div>
24+
25+
<script src="app.js"></script>
26+
</body>
27+
</html>

‎restaurant-menu/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
body {margin: 0;padding:0;font-family: 'Montserrat', Arial, Helvetica, sans-serif;}

0 commit comments

Comments
 (0)