Skip to content

Commit a4a8220

Browse files
john-smilgajohn-smilga
committed
menu project without dynamic setup
1 parent 754e288 commit a4a8220

File tree

1,661 files changed

+130933
-0
lines changed

Some content is hidden

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

1,661 files changed

+130933
-0
lines changed

‎8-menu/final/1-basic.txt

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/final/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+
}

‎8-menu/final/app.js

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

‎8-menu/final/fontawesome-free-5.12.0-web/LICENSE.txt

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
Font Awesome Free License
2+
-------------------------
3+
4+
Font Awesome Free is free, open source, and GPL friendly. You can use it for
5+
commercial projects, open source projects, or really almost whatever you want.
6+
Full Font Awesome Free license: https://fontawesome.com/license/free.
7+
8+
# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
9+
In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
10+
packaged as SVG and JS file types.
11+
12+
# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
13+
In the Font Awesome Free download, the SIL OFL license applies to all icons
14+
packaged as web and desktop font files.
15+
16+
# Code: MIT License (https://opensource.org/licenses/MIT)
17+
In the Font Awesome Free download, the MIT license applies to all non-font and
18+
non-icon files.
19+
20+
# Attribution
21+
Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
22+
Awesome Free files already contain embedded comments with sufficient
23+
attribution, so you shouldn't need to do anything additional when using these
24+
files normally.
25+
26+
We've kept attribution comments terse, so we ask that you do not actively work
27+
to remove them from files, especially code. They're a great way for folks to
28+
learn about Font Awesome.
29+
30+
# Brand Icons
31+
All brand icons are trademarks of their respective owners. The use of these
32+
trademarks does not indicate endorsement of the trademark holder by Font
33+
Awesome, nor vice versa. **Please do not use brand logos for any purpose except
34+
to represent the company, product, or service to which they refer.**

0 commit comments

Comments
 (0)