-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
72 lines (66 loc) · 2.43 KB
/
app.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
const input = document.querySelector(".input");
const form = document.querySelector(".form");
const searchHeading = document.querySelector(".text");
const list = document.querySelector(".list");
const resepiContainer = document.querySelector(".recepi-container")
const closeBtn = document.querySelector(".close");
const recepiHead = document.querySelector(".resp-heading");
const recepiText = document.querySelector(".recepi-text")
closeBtn.addEventListener("click",()=>{
resepiContainer.classList.remove("recepi-active")
})
form.addEventListener("submit", (e) => {
e.preventDefault();
const value = input.value;
fetchRecepi(value);
});
const fetchRecepi = async function (searchValue) {
searchHeading.textContent = `Searching.... for ${searchValue} `;
await fetch(
`https://www.themealdb.com/api/json/v1/1/search.php?s=${searchValue}`)
.then((res) => res.json())
.then((data) => {
if(data.meals===null){
searchHeading.textContent=`there is no such result found for ${searchValue}`
}else{
searchHeading.textContent=`search result for ${searchValue}`
let listInput = data.meals.map((meal)=>{
return`<div class="item" id = ${meal.idMeal}>
<img src=${meal.strMealThumb} alt="meal" class="img">
<p class="name">${meal.strMeal}</p>
<button class="btn-s">recepi</button>
</div>`
}
)
list.innerHTML=listInput.join("")
const respBtn = list.querySelectorAll(".btn-s");
respBtn.forEach((btn)=>{
btn.addEventListener("click",(e)=>{
const mealId = e.currentTarget.parentElement.id
if(data.meals.length===1){
data.meals.find((meal)=>{
if(meal.idMeal===mealId){
showResep(meal);
makeVisible()
}
})
}else{
data.meals.find((meal)=>{
if(meal.idMeal===mealId){
showResep(meal);
makeVisible()
}
})
}
})
})
}
})
};
function showResep(meal){
recepiHead.textContent=`The recepi for ${meal.strMeal}`;
recepiText.textContent=meal.strInstructions
}
function makeVisible(){
resepiContainer.classList.add("recepi-active")
}