-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathModal.js
More file actions
57 lines (48 loc) · 1.79 KB
/
Modal.js
File metadata and controls
57 lines (48 loc) · 1.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import api from './Api.js';
import loadComments from './commentsLoader.js';
export default class Modal {
constructor(data) {
this.data = data;
this.element = document.querySelector('#modal');
}
load() {
const assignVlaue = (selector, value, attr) => {
this.element.querySelector(`#modal-${selector}`)[attr ?? 'textContent'] = this.data[value];
};
const ingredients = this.element.querySelector('#modal-ingredients');
ingredients.innerHTML = '';
for (let i = 1; i <= 20; i += 1) {
if (this.data[`strIngredient${i}`] !== '') {
const li = `<li class="badge">${this.data[`strIngredient${i}`]}</li>`;
ingredients.innerHTML += li;
}
}
this.#fetchAndLoadComments();
assignVlaue('title', 'strMeal');
assignVlaue('image', 'strMealThumb', 'src');
assignVlaue('video', 'strYoutube', 'href');
assignVlaue('source', 'strSource', 'href');
assignVlaue('instruction', 'strInstructions');
assignVlaue('area', 'strArea');
assignVlaue('category', 'strCategory');
const commentForm = this.element.querySelector('#modal-comment-form');
commentForm.addEventListener('submit', async (e) => {
e.preventDefault();
const username = (this.element.querySelector('#modal-input-name').value || '').trim();
const message = (this.element.querySelector('#modal-input-comment').value || '').trim();
if (username !== '' && message !== '') {
await api.addComment(this.data.idMeal, { username, comment: message });
commentForm.reset();
this.#fetchAndLoadComments();
}
});
}
#fetchAndLoadComments = async () => {
const comments = await api.getComments(this.data.idMeal);
loadComments(comments);
};
open() {
this.element.classList.remove('hidden');
this.load();
}
}