Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 7c23f92

Browse filesBrowse files
csocratecsocrate
committed
Add active tag template
1 parent 9d855a9 commit 7c23f92
Copy full SHA for 7c23f92

File tree

Expand file treeCollapse file tree

5 files changed

+74
-32
lines changed
Filter options
Expand file treeCollapse file tree

5 files changed

+74
-32
lines changed

‎index.html

Copy file name to clipboardExpand all lines: index.html
+2-25Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -191,31 +191,7 @@ <h1 class="d-flex flex-column align-items-center font-monospace text-uppercase t
191191
<!-- Filtered tags -->
192192
<div class="row">
193193
<div class="col-12">
194-
<ul class="list-group list-group-horizontal d-flex flex-wrap gap-3">
195-
<li class="list-group-item d-flex justify-content-between flex-wrap align-items-center rounded col-6 col-md-3 col-lg-2 py-3 bg-primary">
196-
An item
197-
<button
198-
type="button"
199-
class="btn-close"
200-
aria-label="Supprimer cet ingrédient">
201-
</button>
202-
</li>
203-
<li class="list-group-item d-flex justify-content-between flex-wrap align-items-center rounded col-6 col-md-3 col-lg-2 py-3 bg-primary">
204-
An item
205-
<button
206-
type="button"
207-
class="btn-close"
208-
aria-label="Supprimer cet appareil">
209-
</button>
210-
</li>
211-
<li class="list-group-item d-flex justify-content-between flex-wrap align-items-center rounded col-6 col-md-3 col-lg-2 py-3 bg-primary">
212-
An item
213-
<button
214-
type="button"
215-
class="btn-close"
216-
aria-label="Supprimer cet ustensile">
217-
</button>
218-
</li>
194+
<ul id="active_tags" class="list-group list-group-horizontal d-flex flex-wrap gap-3">
219195
</ul>
220196
</div>
221197
</div> <!-- End Filtered tags -->
@@ -241,6 +217,7 @@ <h1 class="d-flex flex-column align-items-center font-monospace text-uppercase t
241217
<script src="js/api/DataApi.js"></script>
242218
<!-- Templates -->
243219
<script src="js/templates/ItemDropdown.js"></script>
220+
<script src="js/templates/ActiveTag.js"></script>
244221
<script src="js/templates/RecipeCard.js"></script>
245222
<!-- Pages -->
246223
<script src="js/pages/RecipesPage.js"></script>

‎js/RecipesApp.js

Copy file name to clipboardExpand all lines: js/RecipesApp.js
+19Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ class RecipesApp {
1010
constructor() {
1111
this.dataApi = new DataApi('/data/recipes.json');
1212
this.recipesPage = new RecipesPage();
13+
this.tags = new Array();
1314

1415
this.$ingredientsList = document.querySelector('#ingredients_list');
1516
this.$appliancesList = document.querySelector('#appliances_list');
@@ -28,6 +29,11 @@ class RecipesApp {
2829

2930
// Cards
3031
this.displayRecipeCardsWithData();
32+
33+
// Tags
34+
this.tags.push('item 1', 'item 2', 'item 3');
35+
const tags = this.tags;
36+
this.displayActiveTags(tags);
3137
}
3238

3339
displayRecipeCardsWithData() {
@@ -96,6 +102,19 @@ class RecipesApp {
96102
this.recipesPage.displayItemForDropdown(ustensil, this.$ustensilsList);
97103
});
98104
}
105+
106+
/**
107+
* @type {(string|Array)}
108+
* @param {Object} items
109+
*/
110+
displayActiveTags(items) {
111+
items
112+
.forEach(item => {
113+
const activeTag = new ActiveTag();
114+
const tag = activeTag.createActivetag(item);
115+
this.recipesPage.displayActiveTag(tag);
116+
});
117+
}
99118
}
100119
const recipesApp = new RecipesApp();
101120
recipesApp.init();

‎js/pages/RecipesPage.js

Copy file name to clipboardExpand all lines: js/pages/RecipesPage.js
+9Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
class RecipesPage {
88
constructor() {
99
this.$recipeCards = document.querySelector('.recipe-cards');
10+
this.$activeTags = document.querySelector('#active_tags');
1011
}
1112

1213
/**
@@ -19,6 +20,14 @@
1920
const itemDropdown = new ItemDropdown();
2021
itemDropdown.createItemForDropdown(data, list);
2122
}
23+
24+
/**
25+
* Displays active tag
26+
* @param {HTMLElement} item
27+
*/
28+
async displayActiveTag(item) {
29+
this.$activeTags.appendChild(item);
30+
}
2231

2332
/**
2433
* Displays recipe card

‎js/templates/ActiveTag.js

Copy file name to clipboard
+39Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* ------------------------------------------------------------
3+
* Les Petits Plats templates/ActiveTag.js
4+
* ------------------------------------------------------------
5+
*/
6+
7+
class ActiveTag {
8+
/**
9+
* Creates li tag with close button
10+
* @param {string} item
11+
* @returns HTMLElement - li
12+
*/
13+
createActivetag(item) {
14+
15+
const li = document.createElement('li');
16+
li.classList.add(
17+
'list-group-item',
18+
'd-flex',
19+
'justify-content-between',
20+
'flex-wrap',
21+
'align-items-center',
22+
'rounded',
23+
'col-6',
24+
'col-md-3',
25+
'col-lg-2',
26+
'py-3',
27+
'bg-primary');
28+
29+
li.innerHTML = `
30+
${item}
31+
<button
32+
type="button"
33+
class="btn-close"
34+
aria-label="Supprimer cet ingrédient">
35+
</button>`;
36+
37+
return li;
38+
}
39+
}

‎js/templates/ItemDropdown.js

Copy file name to clipboardExpand all lines: js/templates/ItemDropdown.js
+5-7Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* ------------------------------------------------------------
55
*/
66

7-
class ItemDropdown {
7+
class ItemDropdown {
88
/**
99
* @param {Object} recipes - list of objects from .json file
1010
*/
@@ -22,20 +22,18 @@
2222
* @param {string} data
2323
* @param {HTMLElement} list
2424
*/
25-
createItemForDropdown(data, list) {
25+
createItemForDropdown(data, list) {
2626

2727
const li = document.createElement('li');
2828

2929
if (data !== undefined) {
3030

3131
li.innerHTML = `
32-
<li>
33-
<a class="dropdown-item" role="option">
32+
<a class="dropdown-item" role="option">
3433
${data}
35-
</a>
36-
</li>`;
34+
</a>`;
3735
}
3836

3937
list.appendChild(li);
4038
}
41-
}
39+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.