main.js
1.86 KB
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
const searchForm = document.querySelector('form');
const searchResultDiv = document.querySelector('.search-result')
const APP_ID = '0a67fbc1';
const APP_KEY = '225d31b59bf211d7ede34e2e885f1f3b';
searchForm.addEventListener('submit', function(event){
if(document.getElementById('name').value.length === 0){
alert('한글자 이상 입력해주세요');
event.preventDefault();
}
else if(document.getElementById('name').value.length >= 10){
alert('검색어가 너무 깁니다');
event.preventDefault();
}
else{
event.preventDefault();
searchQuery = event.target.querySelector('input').value;
fetchAPI();
}
});
async function fetchAPI(){
const recipeURL = `https://api.edamam.com/search?q=${searchQuery}&app_id=${APP_ID}&app_key=${APP_KEY}`;
const response = await fetch(recipeURL);
const data = await response.json();
boxinfo(data.hits);
console.log(data);
}
function boxinfo(results){
let boxsinfo ='';
results.map(result => {
boxsinfo +=
`
<style>
.item{
display:flex;
flex-wrap:wrap;
margin-left:50px auto;
}
.container{
display:flex;
flex-wrap:wrap;
margin-left:50px auto;
}
<!--검색결과사진,레시피정보 모두 검색창 옆으로 가게하는거까지는 되었고 2열씩 정렬하려 했는데 2열 정렬 부분이 미완성. 우선 사진 옆으로 정보만 수평으로 뜸-->
<!--검색결과 뜰 시에 검색창 위치가 바뀌는 문제 있음-->
</style>
<div class="item">
<img src="${result.recipe.image}" alt="">
<div class="flex-container">
<h1 class="title">${result.recipe.label}</h1>
<a href="${result.recipe.url}" target="_blank">View Recipe</a>
</div>
<p class="item-data">Calories: ${result.recipe.calories.toFixed(0)}</p>
</div>
`
})
searchResultDiv.innerHTML = boxsinfo;
}