main.js
4 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
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
Kakao.init('fill your own key');
const APP_ID = 'fill your own ID';
const APP_KEY = 'fill your own key';
var caloriesLimit=9999;
function getCheckboxValue(event) {
if(event.target.checked) {
caloriesLimit = event.target.value;
}else {
caloriesLimit=9999;
}
}
const searchForm = document.querySelector('form');
const searchResultDiv = document.querySelector('.search-result')
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();
}
});
function shareRecipe(sns,urlInfo,foodImage,foodLabel) {
var documentUrl = document.URL;
var snsWrite = "친구에게 요리 레시피 추천! 같이 요리 해먹자~"+urlInfo;
if( sns == 'facebook' ) {
var url = "http://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(urlInfo);
window.open(url, "", "width=600, height=4060");
}
else if( sns == 'twitter' ) {
var url = "http://twitter.com/share?url="+encodeURIComponent(documentUrl)+"&text="+encodeURIComponent(snsWrite);
window.open(url, "tweetPop", "width=600, height=400,scrollbars=yes");
}else if(sns=='kakaotalk'){
Kakao.Link.createDefaultButton({
container:'#buttonkakao',
objectType:'feed',
content:{
title:"친구에게 요리 레시피 추천!",
description:foodLabel+" 같이 요리 해먹자~",
imageUrl:foodImage,
link:{
mobileWebUrl:urlInfo,
webUrl:urlInfo
},
},
});
}
}
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 => {
const object = {
cal: result.recipe.calories.toFixed(0)
};
if(result.recipe.calories>=caloriesLimit){}
else{
boxsinfo +=
`
<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>
<!--result.recipe.labe에 + home + recipe 한 검색결과 페이지를 버튼에 링크시켜놓음-->
<a href="https://www.youtube.com/results?search_query=${result.recipe.label}+home+recipe" target="_blank">View Videos</a>
<ul class="sns">
<li class="facebook">
<a href="#n" onclick="shareRecipe('facebook','${result.recipe.url}');return false;" class="facebook" target="_self" title="페이스북 공유"><span class="skip">페이스북</span></a>
</li>
<li class="twitter">
<a href="" onclick="shareRecipe('twitter','${result.recipe.url}');return false;" class="twitter" target="_self" title="트위터 공유"><span class="skip">트위터</span></a>
</li>
<li class="kakaotalk">
<a href="javascript:shareRecipe('kakaotalk','${result.recipe.url}','${result.recipe.image}','${result.recipe.label}')" id="buttonkakao" onclick="shareRecipe('kakaotalk','${result.recipe.url}','${result.recipe.image}','${result.recipe.label}');return false;" class="kakaotalk" target="_self" title="카카오톡 새창열림"><span class="skip">카카오톡</span></a>
</li>
</ul>
</div>
${(cal => {
if (cal >= 2000) {
return `<p style="color:red">${cal}</p>`;
}
else if(cal >= 1000 && cal < 2000){
return `<p style="color:black">${cal}</p>`;
}
else {
return `<p style="color:green">${cal}</p>`;
}
})(object.cal)
}
</div>
`}
})
searchResultDiv.innerHTML = boxsinfo;
}