index.html
<!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>TheMealDb</title>
<!-- Css Link -->
<link href="bootstrap.min.css" rel="stylesheet" >
</head>
<body class="p-4">
<h2 class="text-center mt-3 text-success">Welcome To Food Search</h2>
<!-- searchBar -->
<div class="input-group mb-3 w-50 mx-auto">
<input id="search-item" type="text" class="form-control" placeholder="Search Your Food"
aria-label="Recipient's username" aria-describedby="button-addon2">
<button onclick="searchFood()" class="btn btn-outline-secondary" type="button"
id="button-search">Search</button>
</div>
<!-- Search result card -->
<div id="search-result" class="row row-cols-1 row-cols-md-4 g-4 mt-5">
</div>
<script src="bootstrap.bundle.min.js" ></script>
<script src="app.js"></script>
</body>
</html>
app.js
const searchFood = () => {
//input theke search item khuje ana
const searchiteam = document.getElementById('search-item');
const searchText = searchiteam.value;
// console.log(searchText);
searchiteam.value = '';
//Api Call
const url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${searchText}`;
fetch(url)
.then(response => response.json())
.then(data => displayMeals(data.meals));
}
const displayMeals = meals => {
console.log(meals);
const searchResult = document.getElementById("search-result");
for (const meal of meals) {
console.log(meal);
const div = document.createElement('div');
div.classList.add('col');
div.innerHTML = `
<div class="card card border-danger mb-4">
<img src=${meal.strMealThumb} class="card-img-top" alt="">
<div class="card-body card text-white bg-secondary">
<h5 class="card-title card text-white bg-dark p-2">${meal.strMeal}</h5>
<p class="card-text">
${meal.strInstructions}
</p>
</div>
</div>
`;
searchResult.appendChild(div);
}
}
在浏览器控制台中试试这个:
fetch('https://www.themealdb.com/api/json/v1/1/search.php?f=a')
.then(res=>res.json())
.then(data=> console.log(data))
你会看到这样的最终结果:
{
meals: [
{ // meal 1 },
{ // meal 2 },
{ // meal 3 },
{ // meal 4 }
]
}