Skip to content

Commit 07d5111

Browse files
visolavisola
committed
Duplicate files for Lesson01/Exercise07
1 parent 4044822 commit 07d5111

30 files changed

+713
-5
lines changed

‎Lesson01/Exercise07/create_elements.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
function createContent(product) {
2+
const content = document.createElement('div');
3+
content.className = 'content';
4+
5+
const tagsHTML = product.tags.map(createTagElement)
6+
.map(el => el.outerHTML)
7+
.join('');
8+
9+
content.innerHTML = `
10+
<a class="header">${product.name}</a>
11+
<div class="meta"><span>$${product.price} / ${product.unit}</span></div>
12+
<div class="description">${product.description}</div>
13+
<div class="extra">${tagsHTML}</div>
14+
`;
15+
16+
return content;
17+
}
18+
19+
function createProductItem(product) {
20+
const root = document.createElement('div');
21+
root.className = 'item';
22+
23+
root.appendChild(createProductImage(product.image));
24+
root.appendChild(createContent(product));
25+
return root;
26+
}
27+
28+
function createProductImage(imageSrc) {
29+
const imageContainer = document.createElement('div');
30+
imageContainer.className = 'image';
31+
32+
const image = document.createElement('img');
33+
image.setAttribute('src', imageSrc);
34+
imageContainer.appendChild(image);
35+
36+
return imageContainer;
37+
}
38+
39+
function createTagElement(tag) {
40+
const tagEl = document.createElement('div');
41+
tagEl.className = 'ui label teal';
42+
tagEl.innerText = tag;
43+
return tagEl;
44+
}
45+
46+
function createListForProducts(products) {
47+
const itemsEl = document.querySelector('.items');
48+
itemsEl.innerHTML = '';
49+
products.forEach((product) => {
50+
itemsEl.appendChild(createProductItem(product));
51+
});
52+
}
53+
54+
createListForProducts(products);

‎Lesson01/Exercise07/css/semantic.min.css

+372
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Lesson01/Exercise07/css/store_with_header.css

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
body {
2+
background-attachment: fixed;
3+
background-image: url('../images/brick-wall-1245825_1920.jpg');
4+
overflow: hidden;
5+
}
6+
7+
body > #content {
8+
background: rgba(200, 200, 200, 0.4);
9+
margin: 0 auto;
10+
padding: 10px 20px;
11+
width: 1024px;
12+
}
13+
14+
section.header {
15+
height: 115px;
16+
}
17+
18+
h1.title {
19+
color: #6b2a13;
20+
font-size: 3em;
21+
}
22+
23+
.ui.items {
24+
height: calc(100% - 160px);
25+
overflow-y: auto;
26+
padding: 10px;
27+
}
28+
29+
.ui.items .item {
30+
background: rgba(250, 250, 250, 0.8);
31+
border-radius: 5px;
32+
box-shadow: #444 2px 2px 5px;
33+
margin-bottom: 10px;
34+
padding: 10px;
35+
}
36+
37+
.ui.items .item img {
38+
max-height: 150px;
39+
}
40+
41+
.ui.label {
42+
cursor: pointer;
43+
}
44+
45+
.ui.menu {
46+
font-size: 1rem;
47+
background: rgba(255, 255, 255, 0.4);
48+
box-shadow: #666 2px 2px 10px;
49+
}
50+
51+
.ui.menu .item .tags {
52+
margin-left: 5px;
53+
}

‎Lesson01/Exercise07/css/themes/default/assets/fonts/icons.woff

49.3 KB
Binary file not shown.

‎Lesson01/Exercise07/css/themes/default/assets/fonts/icons.woff2

39.2 KB
Binary file not shown.

‎Lesson01/Exercise07/data/products.js

+229
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
const products = [
2+
{
3+
"price": 3.99,
4+
"unit": "lb",
5+
"name": "Apples",
6+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
7+
"image": "images/products/apples.jpg",
8+
"tags": [
9+
"fruit",
10+
"organic"
11+
]
12+
},
13+
{
14+
"price": 4.99,
15+
"unit": "lb",
16+
"name": "Avocados",
17+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
18+
"image": "images/products/avocado.jpg",
19+
"tags": [
20+
"fruit",
21+
"organic"
22+
]
23+
},
24+
{
25+
"price": 2.5,
26+
"unit": "each",
27+
"name": "Blueberry Muffin",
28+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
29+
"image": "images/products/blueberry_muffins.jpg",
30+
"tags": [
31+
"bakery",
32+
"organic"
33+
]
34+
},
35+
{
36+
"price": 1.39,
37+
"unit": "lb",
38+
"name": "Butter",
39+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
40+
"image": "images/products/butter.jpg",
41+
"tags": [
42+
"dairy"
43+
]
44+
},
45+
{
46+
"price": 4.29,
47+
"unit": "lb",
48+
"name": "Cherries",
49+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
50+
"image": "images/products/cherries.jpg",
51+
"tags": [
52+
"fruit"
53+
]
54+
},
55+
{
56+
"price": 3.85,
57+
"unit": "lb",
58+
"name": "Chocolate Chips Cookies",
59+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
60+
"image": "images/products/chocolate_chips_cookies.png",
61+
"tags": [
62+
"bakery",
63+
"chocolate",
64+
"cookie"
65+
]
66+
},
67+
{
68+
"price": 3.89,
69+
"unit": "lb",
70+
"name": "Christmas Cookies",
71+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
72+
"image": "images/products/christmas_cookies.jpg",
73+
"tags": [
74+
"bakery",
75+
"christmas",
76+
"cookie"
77+
]
78+
},
79+
{
80+
"price": 0.79,
81+
"unit": "each",
82+
"name": "Croissant",
83+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
84+
"image": "images/products/croissant.jpg",
85+
"tags": [
86+
"bakery"
87+
]
88+
},
89+
{
90+
"price": 3.49,
91+
"unit": "lb",
92+
"name": "Dark Chocolate",
93+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
94+
"image": "images/products/dark_chocolate.jpg",
95+
"tags": [
96+
"chocolate"
97+
]
98+
},
99+
{
100+
"price": 2.99,
101+
"unit": "lb",
102+
"name": "Eggs",
103+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
104+
"image": "images/products/eggs.jpg",
105+
"tags": [
106+
"egg",
107+
"organic"
108+
]
109+
},
110+
{
111+
"price": 2.99,
112+
"unit": "lb",
113+
"name": "Grapes",
114+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
115+
"image": "images/products/grapes.jpg",
116+
"tags": [
117+
"fruit",
118+
"organic"
119+
]
120+
},
121+
{
122+
"price": 3.29,
123+
"unit": "lb",
124+
"name": "Milk Chocolate",
125+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
126+
"image": "images/products/milk_chocolate.jpg",
127+
"tags": [
128+
"chocolate"
129+
]
130+
},
131+
{
132+
"price": 2.39,
133+
"unit": "lb",
134+
"name": "Nacho Chips",
135+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
136+
"image": "images/products/nachos.jpg",
137+
"tags": [
138+
"fried"
139+
]
140+
},
141+
{
142+
"price": 8.99,
143+
"unit": "lb",
144+
"name": "Parmesan Cheese",
145+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
146+
"image": "images/products/parmesan.jpg",
147+
"tags": [
148+
"cheese",
149+
"dairy"
150+
]
151+
},
152+
{
153+
"price": 4.89,
154+
"unit": "lb",
155+
"name": "Pears",
156+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
157+
"image": "images/products/pear.jpg",
158+
"tags": [
159+
"fruit",
160+
"organic"
161+
]
162+
},
163+
{
164+
"price": 0.39,
165+
"unit": "each",
166+
"name": "Petit French Baguette",
167+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
168+
"image": "images/products/petit_french_baguette.jpg",
169+
"tags": [
170+
"bakery",
171+
"french"
172+
]
173+
},
174+
{
175+
"price": 2.79,
176+
"unit": "lb",
177+
"name": "Smiling Cookies",
178+
"description": "Delicious sandwich cookies with creamy chocolate filling that always smile back to you, even knowing that you will eat them.",
179+
"image": "images/products/smiley_cookies.jpg",
180+
"tags": [
181+
"bakery",
182+
"chocolate",
183+
"cookie"
184+
]
185+
},
186+
{
187+
"price": 7.29,
188+
"unit": "lb",
189+
"name": "Strawberries",
190+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
191+
"image": "images/products/strawberries.jpg",
192+
"tags": [
193+
"fruit",
194+
"organic"
195+
]
196+
},
197+
{
198+
"price": 2.59,
199+
"unit": "lb",
200+
"name": "Swiss Cheese",
201+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
202+
"image": "images/products/swiss_cheese.jpg",
203+
"tags": [
204+
"cheese",
205+
"dairy"
206+
]
207+
},
208+
{
209+
"price": 3.49,
210+
"unit": "lb",
211+
"name": "White Chocolate",
212+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
213+
"image": "images/products/white_chocolate.jpg",
214+
"tags": [
215+
"chocolate"
216+
]
217+
},
218+
{
219+
"price": 0.89,
220+
"unit": "each",
221+
"name": "Whole Wheat Bread",
222+
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
223+
"image": "images/products/whole_wheat_bread.jpg",
224+
"tags": [
225+
"bakery",
226+
"whole"
227+
]
228+
}
229+
];

‎Lesson01/Exercise07/dynamic_storefront.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22
<head>
3-
<link rel="stylesheet" type="text/css" href="../css/semantic.min.css" />
4-
<link rel="stylesheet" type="text/css" href="../css/store_with_header.css" />
3+
<link rel="stylesheet" type="text/css" href="css/semantic.min.css" />
4+
<link rel="stylesheet" type="text/css" href="css/store_with_header.css" />
55
</head>
66
<body>
77
<div id="content">
@@ -22,8 +22,8 @@ <h1 class="title">Welcome to Fresh Products Store!</h1>
2222
</div>
2323

2424
<script src="search_box.js"></script>
25-
<script src="../data/products.js"></script>
26-
<script src="../sample_003/create_elements.js"></script>
25+
<script src="data/products.js"></script>
26+
<script src="create_elements.js"></script>
2727
<script src="filter_and_search.js"></script>
2828
</body>
2929
</html>

‎Lesson01/Exercise07/images/brick-wall-1245825_1920.jpg

1.46 MB
Loading

‎Lesson01/Exercise07/images/products/apples.jpg

64 KB
Loading

‎Lesson01/Exercise07/images/products/avocado.jpg

90.7 KB
Loading

‎Lesson01/Exercise07/images/products/blueberry_muffins.jpg

99 KB
Loading

‎Lesson01/Exercise07/images/products/butter.jpg

39.8 KB
Loading

‎Lesson01/Exercise07/images/products/cherries.jpg

76.9 KB
Loading

‎Lesson01/Exercise07/images/products/chocolate_chips_cookies.png

233 KB
Loading

‎Lesson01/Exercise07/images/products/christmas_cookies.jpg

99.4 KB
Loading

‎Lesson01/Exercise07/images/products/croissant.jpg

68.1 KB
Loading

‎Lesson01/Exercise07/images/products/dark_chocolate.jpg

89 KB
Loading

‎Lesson01/Exercise07/images/products/eggs.jpg

43.8 KB
Loading

‎Lesson01/Exercise07/images/products/grapes.jpg

52.4 KB
Loading

‎Lesson01/Exercise07/images/products/milk_chocolate.jpg

93.1 KB
Loading

‎Lesson01/Exercise07/images/products/nachos.jpg

63.4 KB
Loading

‎Lesson01/Exercise07/images/products/parmesan.jpg

91.5 KB
Loading

‎Lesson01/Exercise07/images/products/pear.jpg

50 KB
Loading

‎Lesson01/Exercise07/images/products/petit_french_baguette.jpg

94 KB
Loading

‎Lesson01/Exercise07/images/products/smiley_cookies.jpg

67.8 KB
Loading

‎Lesson01/Exercise07/images/products/strawberries.jpg

75.2 KB
Loading

‎Lesson01/Exercise07/images/products/swiss_cheese.jpg

16.8 KB
Loading

‎Lesson01/Exercise07/images/products/white_chocolate.jpg

38 KB
Loading

‎Lesson01/Exercise07/images/products/whole_wheat_bread.jpg

94.4 KB
Loading

‎Lesson01/Exercise07/search_box.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class SearchBox extends HTMLElement {
1717

1818
render() {
1919
this.shadowRoot.innerHTML = `
20-
<link rel="stylesheet" type="text/css" href="../css/semantic.min.css" />
20+
<link rel="stylesheet" type="text/css" href="css/semantic.min.css" />
2121
<div class="ui icon input">
2222
<input type="text" placeholder="Search..." />
2323
<i class="search icon"></i>

0 commit comments

Comments
 (0)