forked from john-smilga/javascript-basic-projects
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path2-naive.txt
More file actions
123 lines (119 loc) · 3.56 KB
/
2-naive.txt
File metadata and controls
123 lines (119 loc) · 3.56 KB
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
const menu = [
{
id: 1,
title: "buttermilk pancakes",
category: "breakfast",
price: 15.99,
img: "./images/item-1.jpeg",
desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,
},
{
id: 2,
title: "diner double",
category: "lunch",
price: 13.99,
img: "./images/item-2.jpeg",
desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,
},
{
id: 3,
title: "godzilla milkshake",
category: "shakes",
price: 6.99,
img: "./images/item-3.jpeg",
desc: `ombucha chillwave fanny pack 3 wolf moon street art photo booth before they sold out organic viral.`,
},
{
id: 4,
title: "country delight",
category: "breakfast",
price: 20.99,
img: "./images/item-4.jpeg",
desc: `Shabby chic keffiyeh neutra snackwave pork belly shoreditch. Prism austin mlkshk truffaut, `,
},
{
id: 5,
title: "egg attack",
category: "lunch",
price: 22.99,
img: "./images/item-5.jpeg",
desc: `franzen vegan pabst bicycle rights kickstarter pinterest meditation farm-to-table 90's pop-up `,
},
{
id: 6,
title: "oreo dream",
category: "shakes",
price: 18.99,
img: "./images/item-6.jpeg",
desc: `Portland chicharrones ethical edison bulb, palo santo craft beer chia heirloom iPhone everyday`,
},
{
id: 7,
title: "bacon overflow",
category: "breakfast",
price: 8.99,
img: "./images/item-7.jpeg",
desc: `carry jianbing normcore freegan. Viral single-origin coffee live-edge, pork belly cloud bread iceland put a bird `,
},
{
id: 8,
title: "american classic",
category: "lunch",
price: 12.99,
img: "./images/item-8.jpeg",
desc: `on it tumblr kickstarter thundercats migas everyday carry squid palo santo leggings. Food truck truffaut `,
},
{
id: 9,
title: "quarantine buddy",
category: "shakes",
price: 16.99,
img: "./images/item-9.jpeg",
desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
},
];
// get parent element
const sectionCenter = document.querySelector(".section-center");
const btnContainer = document.querySelector(".btn-container");
const filterBtns = document.querySelectorAll(".filter-btn");
// display all items when page loads
window.addEventListener("DOMContentLoaded", function () {
diplayMenuItems(menu);
});
filterBtns.forEach(function (btn) {
btn.addEventListener("click", function (e) {
// console.log(e.currentTarget.dataset);
const category = e.currentTarget.dataset.id;
const menuCategory = menu.filter(function (menuItem) {
// console.log(menuItem.category);
if (menuItem.category === category) {
return menuItem;
}
});
if (category === "all") {
diplayMenuItems(menu);
} else {
diplayMenuItems(menuCategory);
}
});
});
function diplayMenuItems(menuItems) {
let displayMenu = menuItems.map(function (item) {
// console.log(item);
return `<article class="menu-item">
<img src=${item.img} alt=${item.title} class="photo" />
<div class="item-info">
<header>
<h4>${item.title}</h4>
<h4 class="price">$${item.price}</h4>
</header>
<p class="item-text">
${item.desc}
</p>
</div>
</article>`;
});
displayMenu = displayMenu.join("");
// console.log(displayMenu);
sectionCenter.innerHTML = displayMenu;
}