File index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipe App</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
body{
font-family: 'Rubik', sans-serif;
background: rgb(26, 26, 27);
}
ul.list_food {
list-style: none;
}
ul.list_food li {
border: 1px solid #fff;
width: 23%;
float: left;
padding: 10px;
margin:10px;
color: #fff;
padding: 10px;
height: 480px;
}
.li_recipe span {
color: orangered;
font-weight: bold;
}
h3.title_recipe {
text-align: center;
color: #fff;
font-size: 40px;
font-weight: bold;
}
form.search-form {
width: 60%;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h3 class="title_recipe">Recipe App</h3>
<div class="col-md-12">
<form class="search-form">
<input type="text" class="input_meal form-control" placeholder="Tìm kiếm công thức nấu ăn VD: Beef">
<input type="submit" style="margin:5px 0" class="btn btn-default btn-sm btn-search" value="Tìm kiếm món">
</form>
<p style="color: #fff;text-align: center;font-size: 16px;text-transform: uppercase;"><span id="title"></span></p>
</div>
<div class="col-md-12">
<ul class="list_food">
<div class="li_recipe"></div>
</ul>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
File App.js
const input = document.querySelector(".input_meal");
const btn = document.querySelector(".btn-search");
btn.addEventListener("click",getMeal);
function getMeal(e){
e.preventDefault();
input_value = input.value;
document.getElementById("title").innerText = 'Công thức tìm kiếm từ:'+' '+input.value;
fetchDataAPI(input_value);
}
async function fetchDataAPI(input_value){
app_id = '24270fcf';
app_key = '9c8b546d8fefe29384d4e2e11755885e';
baseURI = `https://api.edamam.com/search?q=${input_value}&app_id=${app_id}&app_key=${app_key}`;
result = await fetch(baseURI);
datas = await result.json();
createHTML(datas.hits);
}
function createHTML(data){
console.log(data);
showHtml = '';
data.map(result => {
showHtml+= `<li>
<img width="100%" src="${result.recipe.image}">
<p>Tên món ăn : <span>${result.recipe.label}</span></p>
<p>Calories : <span>${result.recipe.calories.toFixed(2)}</span></p>
<p>Ăn kiêng : <span>${result.recipe.dietLabels.length > 0 ? result.recipe.dietLabels : 'No Data Found'}</span></p>
<p>Tốt cho sức khỏe : <span>${result.recipe.healthLabels}</span></p>
<a href="${result.recipe.url}"
target="_blank" class="btn btn-sm btn-primary">View Recipe</a>
</li>`;
})
document.querySelector(".li_recipe").innerHTML = showHtml;
}
