main.js
4.52 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/* version 1.1 bumped*/
Kakao.init('fill yours');
const APP_ID = 'fill yours';
const APP_KEY = 'fill yours';
var caloriesLimit=9999;
var checkCount=0;
var checkLimit=2;
chk=document.getElementsByName("chkbox[]");
function getCheckboxValue(event) {
if(event.target.checked) {
caloriesLimit = event.target.value;
checkCount+=1;
}else {
caloriesLimit=9999;
checkCount-=1;
}
if(checkCount>=checkLimit)
{
alert("칼로리 체크박스는 하나만 선택 가능합니다.");
checkInitialize();
checkCount=0;
}
}
function checkInitialize(){
for(i=0;i<chk.length;i++){
chk[i].checked=false;
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 +=
`
<style>
@import url(//fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap);
</style>
<div class="item">
<img src="${result.recipe.image}">
<div class="flex-container" style="font-family: 'Noto Sans KR', sans-serif;">
<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;
}