-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
104 lines (97 loc) · 3.28 KB
/
script.js
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
const loadMeals = (searchText, dataLimit) => {
const url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${searchText}`;
fetch(url)
.then(res => res.json())
.then(data => showMeals(data.meals, dataLimit));
}
const showMeals = (meals, dataLimit) => {
const mealsContainer = document.getElementById('meals-container');
mealsContainer.innerHTML = '';
const warningMessage = document.getElementById('warning-message');
console.log(meals)
if (meals === null) {
warningMessage.classList.remove('d-none');
// loader end
toggleSpinner(false);
return;
}
else {
warningMessage.classList.add('d-none');
}
const btnShowAll = document.getElementById('show-all');
if (dataLimit && meals !== null) {
meals = meals.slice(0, dataLimit);
btnShowAll.classList.remove('d-none');
}
else {
btnShowAll.classList.add('d-none');
}
meals.forEach(meal => {
const div = document.createElement('div');
div.classList.add('col');
div.innerHTML = `
<div class="card h-100">
<img src="${meal.strMealThumb}" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">${meal.strMeal}</h5>
<p class="card-text">${meal.strInstructions.slice(0, 200)}</p>
<button onclick="loadMeal(${meal.idMeal})" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#mealDetailsModal">Show Details</button>
</div>
</div>
`;
mealsContainer.appendChild(div);
});
// loader end
toggleSpinner(false);
}
loadMeals('fish');
const processSearch = (dataLimit) => {
// loader start
toggleSpinner(true);
const searchInputField = document.getElementById('search-input-field');
const searchValue = searchInputField.value;
loadMeals(searchValue, dataLimit);
}
// show all button
document.getElementById('btn-show-all').addEventListener('click', function () {
processSearch();
})
// search by meal [button]
document.getElementById('btn-search').addEventListener('click', function () {
processSearch(3);
});
// search by meal [enter key]
document.getElementById('search-input-field').addEventListener('keyup', function (event) {
if (event.key == 'Enter') {
processSearch(3);
}
});
const loadMeal = id => {
const url = `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${id}`;
fetch(url)
.then(res => res.json())
.then(data => showMeal(data.meals));
}
const showMeal = meal => {
meal.forEach(meal => {
const mealTitle = document.getElementById('mealDetailsModalLabel');
mealTitle.innerText = meal.strMeal;
const mealBody = document.getElementById('meal-details-body-modal');
mealBody.innerHTML = `
<img src="${meal.strMealThumb}" class="card-img-top" alt="">
<h4>Category: ${meal.strCategory}</h4>
<h4>Country: ${meal.strArea}</h4>
<p>${meal.strInstructions}</p>
`;
});
}
// loader
const toggleSpinner = isLoading => {
const loader = document.getElementById('loader');
if (isLoading) {
loader.classList.remove('d-none');
}
else {
loader.classList.add('d-none');
}
}