-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
76 lines (64 loc) · 3.06 KB
/
main.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
const getSearchValue = () => {
const searchValue = document.getElementById("search_input").value;
if (!searchValue) {
document.getElementById("rowArea").innerHTML =
"<h1>Please type your food name!</h1>";
}
else {
document.getElementById("rowArea").innerHTML = "";
fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${searchValue}`)
.then((res) => res.json())
.then((data) => {
const food = data.meals;
food.map((element) => {
const row = document.getElementById("rowArea");
const foodContainer = document.createElement("div");
foodContainer.setAttribute("class", "col col-style");
const foodName = element.strMeal;
const foodImg = element.strMealThumb;
const foodId = element.idMeal;
const foodDiv = `<div class="card card-style " onclick="getmealDetails(${foodId})" style="width: 14rem;"><img class="card-img-top" src="${foodImg}" alt="Card Food Image">
<div class="card-body"><h6 class="card=text">${foodName}</h6></div>`;
foodContainer.innerHTML = foodDiv;
row.appendChild(foodContainer);
});
})
.catch((error) => {
document.getElementById("rowArea").innerHTML="<h1>Wrrong! please try again.</h1>";
});
}
};
const getmealDetails = (id) => {
fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${id}`)
.then((res) => res.json())
.then((data) => {
const meal = data.meals;
meal.map((element) => {
const foodImg = element.strMealThumb;
const foodDetailsContainer = document.createElement("div");
const foodDetailsDiv = `<div class="card p-4 w-75 shadow-lg rounded-3" > <img src="${foodImg}" alt="Food Card image>
<div class="card-body"">
<h4 class="card-title">${element.strMeal}</h4>
<h5>Ingredient</h5>
<h6 class="card-text"> > ${element.strIngredient1}</h6> <h6 class="card-text"> > ${element.strIngredient2}</h6>
<h6 class="card-text"> > ${element.strIngredient3}</h6> <h6 class="card-text"> > ${element.strIngredient4}</h6>
<h6 class="card-text"> > ${element.strIngredient5}</h6> <h6 class="card-text"> > ${element.strIngredient6}</h6>
<h6 class="card-text"> > ${element.strIngredient7}</h6> <h6 class="card-text"> > ${element.strIngredient8}</h6>
<h6 class="card-text"> > ${element.strIngredient9}</h6> <h6 class="card-text"> > ${element.strIngredient10}</h6>
<button class="btn btn-info" onclick="backHome()" id="back-search"> < Back</button>
</div>
</div>`;
foodDetailsContainer.innerHTML = foodDetailsDiv;
document
.getElementById("search-food")
.appendChild(foodDetailsContainer);
document.getElementById("all-food").style.display = "none";
});
});
};
const backHome = () => {
document.getElementById("all-food").style.display = "block";
document.getElementById("search-food").innerHTML = "";
document.getElementById("rowArea").innerHTML = "";
document.getElementById("search_input").value = "";
};