-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.html
142 lines (109 loc) · 4.04 KB
/
search.html
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tomato</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div class="container" id="container">
<header></header>
<section>
<h2>Search Results:</h2>
<div class="dishes" id="dishes">
</div>
</section>
</div>
</body>
</html>
<script type="module">
let header = document.querySelector("header"); import {navbar} from "./components/navbar.js"; header.innerHTML = navbar();
</script>
<script>
//getting value from url and filter the data
var url_string = window.location.href;
var url = new URL(url_string);
var id = url.searchParams.get("id");
let dishe_div = document.getElementById("dishes");
async function getData() {
try {
let url = `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${id}`;
let res = await fetch(url);
let data = await res.json();
return data;
} catch (err) {
console.log('err: ', err);
}
}
displayDishes()
async function displayDishes() {
let res = await getData();
let dishes = res.meals
console.log(dishes)
dishes.map(function(item, index) {
var card = document.createElement("div");
card.setAttribute("class", "card2")
let div1 = document.createElement("div");
var img = document.createElement("img");
img.setAttribute("src", item.strMealThumb)
img.setAttribute("class", "dish-img")
div1.append(img)
let div2 = document.createElement("div")
var h2 = document.createElement("h3");
h2.innerHTML = item.strMeal;
let p1 = document.createElement("p");
p1.innerHTML = `<b>Recipe Area: </b> ${item.strArea}`;
let p2 = document.createElement("p");
p2.innerHTML = `<b>Recipe Category: </b> ${item.strCategory}`;
let p3 = document.createElement("p");
p3.innerHTML = `<b>Ingredients: </b> ${item.strIngredient1}, ${item.strIngredient2}, ${item.strIngredient3}, ${item.strIngredient4}, ${item.strIngredient5}`;
var desc = document.createElement("p");
desc.innerHTML = `<b>Description:</b> ${item.strInstructions}`;
div2.append(h2, p1, p2, p3, desc)
card.append(div1, div2)
dishe_div.append(card)
})
}
window.onclick = function(event) {
document.getElementById("results").style.display = " none"
}
async function searchItem() {
try {
let q = document.getElementById("search").value;
let url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${q}`;
let res = await fetch(url);
let data = await res.json();
console.log(data.meals)
searchResults(data.meals)
} catch (err) {
console.log('err: ', err);
}
}
let bomb;
let debounce = (func, delay) => {
clearTimeout(bomb);
bomb = setTimeout(() => {
func()
}, delay)
}
let searchResults = (data) => {
let output = ""
document.getElementById("results").style.display = "block"
data.map((item) => {
output += `
<a href="search.html?id=${item.idMeal}" >
<div class="wrapper">
<div class="itemImg">
<img src="${item.strMealThumb}" alt="">
</div>
<div class="itemTitle">
<h4>${item.strMeal}</h4>
</div>
</div></a>
`;
})
document.getElementById("results").innerHTML = output
}
</script>