-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.html
135 lines (115 loc) · 5.02 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
<!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>EXAM API</title>
<link rel="stylesheet" href="/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css ">
<link rel="stylesheet" href="/css/responsive.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>
<aside class="aside-nav">
<div>
<div class="asideNav-inner">
<ul class="navList flex-column-center">
<li class="nav-item" id=""><a href="search.html" movieCategory="popular" class="navLink">Search</a></li>
<li class="nav-item" id="categories"><a href="categories.html" movieCategory="top_rated" class="navLink">Categories</a></li>
<li class="nav-item"><a href="area.html" movieCategory="trending" class="navLink">Area</a></li>
<li class="nav-item"><a href="ingredients.html" movieCategory="upcoming" class="navLink">Ingredients</a></li>
<li class="nav-item"><a href="contact.html" class="navLink">Contact US</a></li>
</ul>
<div class="bottom-div text-white">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fas fa-globe"></i>
<p class="text-white mt-3">Copyright © 2019 All Rights Reserved.
</p>
</div>
</div>
</div>
<div class="asideNav-outer">
<div class="logo">
<img src="/img/logo.png" alt=""class="w-75 ps-2">
</div>
<div class="open-btn">
<i class="fa fa-align-justify text-black fs-3"></i>
</div>
<div class="icons text-black ">
<div class="strip-lang">
<span>
<i class="fas fa-globe "></i>
</span>
</div>
<div class="strip-share">
<span>
<i class="fas fa-share-alt"></i>
</span>
</div>
</div>
</div>
</div>
</aside>
<main>
<div class="container py-3 g-1 main-container">
<div class="search row">
<div class="col-lg-6"><input type="text" onkeyup="searchByName(this.value)" class="form-control bg-transparent border-0 text-light border-bottom text-center" placeholder="Search By Name"></div>
<div class="col-lg-6"><input type="text" onkeyup="searchByLetter(this.value)" class="form-control col-lg-6 bg-transparent border-0 text-light border-bottom text-center" placeholder="Search by First Letter.."></div>
</div>
<div class="loading text-center d-flex justify-content-center align-items-center d-none"><i class="fa fa-spinner fa-spin fa-4x text-light"></i></div>
<div class="row" id="searchByNameInput">
</div>
<div class="row" id="searchByLetterInput">
</div>
</div>
</main>
<script src="/js/jquery-3.6.1.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script>
async function searchByName(e){
searchByNameInput.innerHTML = ''
searchByLetterInput.innerHTML = ''
$(".loading").removeClass("d-none");
var searchData = await fetch(
`https://www.themealdb.com/api/json/v1/1/search.php?s=${e}`
);
if(searchData.status === 200){
$(".loading").addClass("d-none");
var searchDataRes = await searchData.json();
searchDataRes['meals'].forEach(meal => {
searchByNameInput.innerHTML += `<div class="meal_card col-md-6 col-lg-3 my-3 position-relative text-center">
<a href="meal.html?id=${meal.idMeal}"><img src="${meal.strMealThumb}"class="w-100 img-fluid h-100 rounded">
<div class="name flex-column-center fw-normal">
<p class="font-lighter">${meal.strMeal}</p>
</div></a>
</div>`;
});
}
}
async function searchByLetter(e){
searchByNameInput.innerHTML = ''
searchByLetterInput.innerHTML = ''
$(".loading").removeClass("d-none");
var searchData = await fetch(
`https://www.themealdb.com/api/json/v1/1/search.php?f=${e}`
);
if(searchData.status === 200){
$(".loading").addClass("d-none");
var searchDataRes = await searchData.json();
searchDataRes['meals'].forEach(meal => {
searchByNameInput.innerHTML += `<div class="meal_card col-md-6 col-lg-3 my-3 position-relative text-center">
<a href="meal.html?id=${meal.idMeal}"><img src="${meal.strMealThumb}"class="w-100 img-fluid h-100 rounded">
<div class="name flex-column-center fw-normal">
<p class="font-lighter">${meal.strMeal}</p>
</div></a>
</div>`;
});
}
}
</script>
<script src="/js/main.js"></script>
</body>
</html>