Skip to content

Commit 5e5afcf

Browse files
john-smilgajohn-smilga
committed
menu project complete
1 parent a4a8220 commit 5e5afcf

1,668 files changed

Lines changed: 130870 additions & 23 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎6-modal/setup/app.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
// select modal-btn,modal-overlay,close-btn
22
// listen for click events on modal-btn and close-btn
3-
// when user clicks modal-btn add .OPEN-MODAL to modal-overlay
4-
// when user clicks close-btn remove .OPEN-MODAL from modal-overlay
3+
// when user clicks modal-btn add .open-modal to modal-overlay
4+
// when user clicks close-btn remove .open-modal from modal-overlay

‎7-questions/final/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ <h2>general questions</h2>
7878
<!-- question title -->
7979
<div class="question-title">
8080
<p>do you use organic ingredients?</p>
81+
<!-- button -->
8182
<button type="button" class="question-btn">
8283
<span class="plus-icon">
8384
<i class="far fa-plus-square"></i>

8-menu/final/1-basic.txt renamed to 8-menu/final/1-basic.js

File renamed without changes.

‎8-menu/final/app.js‎

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -71,32 +71,22 @@ const menu = [
7171
img: "./images/item-9.jpeg",
7272
desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
7373
},
74+
{
75+
id: 10,
76+
title: "bison steak",
77+
category: "dinner",
78+
price: 22.99,
79+
img: "./images/item-10.jpeg",
80+
desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
81+
},
7482
];
7583
// get parent element
7684
const sectionCenter = document.querySelector(".section-center");
7785
const btnContainer = document.querySelector(".btn-container");
78-
const filterBtns = document.querySelectorAll(".filter-btn");
7986
// display all items when page loads
8087
window.addEventListener("DOMContentLoaded", function () {
8188
diplayMenuItems(menu);
82-
});
83-
84-
filterBtns.forEach(function (btn) {
85-
btn.addEventListener("click", function (e) {
86-
// console.log(e.currentTarget.dataset);
87-
const category = e.currentTarget.dataset.id;
88-
const menuCategory = menu.filter(function (menuItem) {
89-
// console.log(menuItem.category);
90-
if (menuItem.category === category) {
91-
return menuItem;
92-
}
93-
});
94-
if (category === "all") {
95-
diplayMenuItems(menu);
96-
} else {
97-
diplayMenuItems(menuCategory);
98-
}
99-
});
89+
displayMenuButtons();
10090
});
10191

10292
function diplayMenuItems(menuItems) {
@@ -121,3 +111,43 @@ function diplayMenuItems(menuItems) {
121111

122112
sectionCenter.innerHTML = displayMenu;
123113
}
114+
function displayMenuButtons() {
115+
const categories = menu.reduce(
116+
function (values, item) {
117+
if (!values.includes(item.category)) {
118+
values.push(item.category);
119+
}
120+
return values;
121+
},
122+
["all"]
123+
);
124+
const categoryBtns = categories
125+
.map(function (category) {
126+
return `<button type="button" class="filter-btn" data-id=${category}>
127+
${category}
128+
</button>`;
129+
})
130+
.join("");
131+
132+
btnContainer.innerHTML = categoryBtns;
133+
const filterBtns = btnContainer.querySelectorAll(".filter-btn");
134+
console.log(filterBtns);
135+
136+
filterBtns.forEach(function (btn) {
137+
btn.addEventListener("click", function (e) {
138+
// console.log(e.currentTarget.dataset);
139+
const category = e.currentTarget.dataset.id;
140+
const menuCategory = menu.filter(function (menuItem) {
141+
// console.log(menuItem.category);
142+
if (menuItem.category === category) {
143+
return menuItem;
144+
}
145+
});
146+
if (category === "all") {
147+
diplayMenuItems(menu);
148+
} else {
149+
diplayMenuItems(menuCategory);
150+
}
151+
});
152+
});
153+
}

‎8-menu/final/images/item-10.jpeg‎

70.8 KB
Loading

‎8-menu/final/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@ <h2>our menu</h2>
2121
</div>
2222
<!-- filter buttons -->
2323
<div class="btn-container">
24-
<button type="button" class="filter-btn" data-id="all">all</button>
24+
<!-- <button type="button" class="filter-btn" data-id="all">all</button>
2525
<button type="button" class="filter-btn" data-id="breakfast">
2626
breakfast
2727
</button>
2828
<button type="button" class="filter-btn" data-id="lunch">lunch</button>
2929
<button type="button" class="filter-btn" data-id="shakes">
3030
shakes
31-
</button>
31+
</button> -->
3232
</div>
3333
<!-- menu items -->
3434
<div class="section-center">

‎8-menu/setup/1-basic.js‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
const menu = [
2+
{
3+
id: 1,
4+
title: "buttermilk pancakes",
5+
category: "breakfast",
6+
price: 15.99,
7+
img: "./images/item-1.jpeg",
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: "./images/item-2.jpeg",
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: "./images/item-3.jpeg",
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: "./images/item-4.jpeg",
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: "./images/item-5.jpeg",
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: "./images/item-6.jpeg",
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: "./images/item-7.jpeg",
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: "./images/item-8.jpeg",
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: "./images/item-9.jpeg",
72+
desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
73+
},
74+
];
75+
76+
const sectionCenter = document.querySelector(".section-center");
77+
78+
window.addEventListener("DOMContentLoaded", function () {
79+
let displayMenu = menu.map(function (item) {
80+
// console.log(item);
81+
82+
return `<article class="menu-item">
83+
<img src=${item.img} alt=${item.title} class="photo" />
84+
<div class="item-info">
85+
<header>
86+
<h4>${item.title}</h4>
87+
<h4 class="price">$${item.price}</h4>
88+
</header>
89+
<p class="item-text">
90+
${item.desc}
91+
</p>
92+
</div>
93+
</article>`;
94+
});
95+
displayMenu = displayMenu.join("");
96+
console.log(displayMenu);
97+
98+
sectionCenter.innerHTML = displayMenu;
99+
});

‎8-menu/setup/2-naive.txt‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
const menu = [
2+
{
3+
id: 1,
4+
title: "buttermilk pancakes",
5+
category: "breakfast",
6+
price: 15.99,
7+
img: "./images/item-1.jpeg",
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: "./images/item-2.jpeg",
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: "./images/item-3.jpeg",
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: "./images/item-4.jpeg",
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: "./images/item-5.jpeg",
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: "./images/item-6.jpeg",
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: "./images/item-7.jpeg",
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: "./images/item-8.jpeg",
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: "./images/item-9.jpeg",
72+
desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
73+
},
74+
];
75+
// get parent element
76+
const sectionCenter = document.querySelector(".section-center");
77+
const btnContainer = document.querySelector(".btn-container");
78+
const filterBtns = document.querySelectorAll(".filter-btn");
79+
// display all items when page loads
80+
window.addEventListener("DOMContentLoaded", function () {
81+
diplayMenuItems(menu);
82+
});
83+
84+
filterBtns.forEach(function (btn) {
85+
btn.addEventListener("click", function (e) {
86+
// console.log(e.currentTarget.dataset);
87+
const category = e.currentTarget.dataset.id;
88+
const menuCategory = menu.filter(function (menuItem) {
89+
// console.log(menuItem.category);
90+
if (menuItem.category === category) {
91+
return menuItem;
92+
}
93+
});
94+
if (category === "all") {
95+
diplayMenuItems(menu);
96+
} else {
97+
diplayMenuItems(menuCategory);
98+
}
99+
});
100+
});
101+
102+
function diplayMenuItems(menuItems) {
103+
let displayMenu = menuItems.map(function (item) {
104+
// console.log(item);
105+
106+
return `<article class="menu-item">
107+
<img src=${item.img} alt=${item.title} class="photo" />
108+
<div class="item-info">
109+
<header>
110+
<h4>${item.title}</h4>
111+
<h4 class="price">$${item.price}</h4>
112+
</header>
113+
<p class="item-text">
114+
${item.desc}
115+
</p>
116+
</div>
117+
</article>`;
118+
});
119+
displayMenu = displayMenu.join("");
120+
// console.log(displayMenu);
121+
122+
sectionCenter.innerHTML = displayMenu;
123+
}

0 commit comments

Comments
 (0)