Skip to content

Commit 6f62b41

Browse files
visolavisola
authored
Merge pull request #23 from TrainingByPackt/fix-paths-after-folder-restructure
Fix paths after folder restructure
2 parents 3a1f773 + b71ff36 commit 6f62b41

File tree

107 files changed

+2175
-47
lines changed

Some content is hidden

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

107 files changed

+2175
-47
lines changed

‎Lesson01/Activity02/create_elements.js

Lines changed: 54 additions & 0 deletions
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/Activity02/css/semantic.min.css

Lines changed: 372 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Lesson01/Activity02/css/store_with_header.css

Lines changed: 53 additions & 0 deletions
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/Activity02/css/themes/default/assets/fonts/icons.woff

49.3 KB
Binary file not shown.

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

39.2 KB
Binary file not shown.

‎Lesson01/Activity02/data/products.js

Lines changed: 229 additions & 0 deletions
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/Activity02/dynamic_storefront.html

Lines changed: 4 additions & 4 deletions
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">
@@ -21,8 +21,8 @@ <h1 class="title">Welcome to Fresh Products Store!</h1>
2121

2222
<script src="search_box.js"></script>
2323
<script src="tags_holder.js"></script>
24-
<script src="../data/products.js"></script>
25-
<script src="../sample_003/create_elements.js"></script>
24+
<script src="data/products.js"></script>
25+
<script src="create_elements.js"></script>
2626
<script src="filter_and_search.js"></script>
2727
</body>
2828
</html>

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

1.46 MB
Loading

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

64 KB
Loading

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

90.7 KB
Loading

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

99 KB
Loading

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

39.8 KB
Loading

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

76.9 KB
Loading

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

233 KB
Loading

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

99.4 KB
Loading

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

68.1 KB
Loading

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

89 KB
Loading

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

43.8 KB
Loading

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

52.4 KB
Loading

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

93.1 KB
Loading

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

63.4 KB
Loading

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

91.5 KB
Loading

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

50 KB
Loading

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

94 KB
Loading

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

67.8 KB
Loading

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

75.2 KB
Loading

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

16.8 KB
Loading

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

38 KB
Loading

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

94.4 KB
Loading

‎Lesson01/Activity02/search_box.js

Lines changed: 1 addition & 1 deletion
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>

‎Lesson01/Activity02/tags_holder.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ class TagsHolder extends HTMLElement {
3131

3232
render() {
3333
this.shadowRoot.innerHTML = `
34-
<link rel="stylesheet" type="text/css" href="../css/semantic.min.css" />
34+
<link rel="stylesheet" type="text/css" href="css/semantic.min.css" />
3535
<div>
3636
Filtered by tags:
3737
<span class="tags"></span>

0 commit comments

Comments
 (0)