-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
66 lines (56 loc) · 1.79 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
const search = document.getElementById("search"),
submit = document.getElementById("submit"),
random = document.getElementById("random"),
mealsEl = document.getElementById("meals"),
resultHeading = document.getElementById("result-heading"),
single_mealEl = document.getElementById("single-meal");
// search meal and featch from API
function searchMeal(e) {
e.preventDefault();
// Clear single meal
single_mealEl.innerHTML = "";
// Get search term
const term = search.value;
// check for empty
if (term.trim()) {
fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${term}`)
.then((res) => res.json())
.then((data) => {
console.log(data);
resultHeading.innerHTML = `<h2>Search results for '${term}':</h2>`;
if (data.meals === null) {
resultHeading.innerHTML = `<p>There are no search result. Try again!</p>`;
} else {
mealsEl.innerHTML = data.meals
.map(
(meal) => `
<div class="meal">
<img src="${meal.strMealThumb}" alt="${meal.strMeal}"/>
<div class="meal-info" data-mealID="${meal.idMeal}">
<h3>${meal.strMeal}</h3>
</div>
</div>
`
)
.join("");
}
});
// clear search text
search.value = "";
} else {
alert("Please enter a search term");
}
}
// Event listener
submit.addEventListener("submit", searchMeal);
mealsEl.addEventListener("click", (e) => {
// Traverse the DOM to find the parent element with the class "meal-info"
let mealInfo = e.target;
while (mealInfo && !mealInfo.classList.contains("meal-info")) {
mealInfo = mealInfo.parentElement;
}
if (mealInfo) {
const mealID = mealInfo.getAttribute("data-mealid");
console.log(mealID);
}
});