구희연 / Food_recipe_info

Go to a project
Toggle navigation Toggle navigation pinning
조국현
20b09b84 1 parent 07bc6d22

Modify Check Box Function 

User can check only one box.
Inline Side-by-side
Showing 12 changed files with 54 additions and 49 deletions
......@@ -129,8 +129,8 @@ const authInfo = (req)=>{
// naver 로그인
app.get('/naverlogin', passport.authenticate('naver'));
passport.use('naver',new NaverStrategy({
clientID: 'fill your own ID',
clientSecret: 'fill your own secret',
clientID: 'fill yours',
clientSecret: 'fill yours',
callbackURL: "http://localhost:3000/",
svcType: 0,
authType: 'reauthenticate' // enable re-authentication
......@@ -147,8 +147,9 @@ passport.use('naver',new NaverStrategy({
// kakao 로그인
app.get('/kakaologin', passport.authenticate('kakao-login'));
passport.use('kakao-login', new KakaoStrategy({
clientID: 'fill your own ID',
clientID: 'fill yours',
callbackURL: 'http://localhost:3000/'
},
function (accessToken, refreshToken, profile, done) {
var _profile = profile._json;
......
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap');
*{
padding:0;
margin:0;
......@@ -89,11 +88,10 @@ section{
display:flex;
padding:100px 0;
align-items:stretch;
}
.brand{
margin-top:-70px;
font-size:4rem;
color:black;
margin-bottom:30px;
}
}
\ No newline at end of file
......
......@@ -2,6 +2,8 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
......@@ -15,33 +17,28 @@
<ion-icon name="search"></ion-icon>
</form>
<p>
<input type='checkbox'
name='animal'
value=800
onclick='getCheckboxValue(event)'/> 800
<input type='checkbox'
name='animal'
value=1200
onclick='getCheckboxValue(event)'/> 1200
<input type='checkbox'
name='animal'
value=1600
onclick='getCheckboxValue(event)'/> 1600
<input type='checkbox'
name='animal'
value=2000
onclick='getCheckboxValue(event)'/> 2000
</p>
<input type='checkbox'
name='chkbox[]'
value=800
onclick='getCheckboxValue(event)'/> 800
<input type='checkbox'
name='chkbox[]'
value=1200
onclick='getCheckboxValue(event)'/> 1200
<input type='checkbox'
name='chkbox[]'
value=1600
onclick='getCheckboxValue(event)'/> 1600
<input type='checkbox'
name='chkbox[]'
value=2000
onclick='getCheckboxValue(event)'/> 2000
</p>
<!-- <select id="selectBox">
<option value="800" >800</option>
<option value="1200">1200</option>
<option value="1600" >1600</option>
</select> -->
<div class="search-result">
<!--<div class="item">
<img src="./0.jpg" alt="">
......@@ -54,9 +51,8 @@
</div>
</div>
</section>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="./main.js"></script>
</body>
</html>
</html>
\ No newline at end of file
......
Kakao.init('fill your own key');
const APP_ID = 'fill your own ID';
const APP_KEY = 'fill your own key';
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;
}
}
const searchForm = document.querySelector('form');
const searchResultDiv = document.querySelector('.search-result')
searchForm.addEventListener('submit', function(event){
if(document.getElementById('name').value.length === 0){
alert('한글자 이상 입력해주세요');
......@@ -54,7 +70,6 @@ function shareRecipe(sns,urlInfo,foodImage,foodLabel) {
});
}
}
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);
......@@ -62,23 +77,19 @@ async function fetchAPI(){
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;">
......@@ -97,7 +108,6 @@ function boxinfo(results){
<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) {
......@@ -115,4 +125,4 @@ function boxinfo(results){
`}
})
searchResultDiv.innerHTML = boxsinfo;
}
}
\ No newline at end of file
......
......@@ -6,7 +6,7 @@
</head>
<body>
<script type="text/javascript">
var naver_id_login = new naver_id_login("fill your own ID", "http://localhost:3000/");
var naver_id_login = new naver_id_login("fill yours", "http://localhost:3000/");
// 접근 토큰 값 출력
alert(naver_id_login.oauthParams.access_token);
// 네이버 사용자 프로필 조회
......
......@@ -8,7 +8,7 @@
let apikey = "fill your own key";
let apikey = "fill yours";
let keyword ="미국 음식";
......
......@@ -8,7 +8,7 @@
let apikey = "fill your own key";
let apikey = "fill yours";
let keyword ="중국 음식";
......
......@@ -9,7 +9,7 @@
let apikey = "fill your own key";
let apikey = "fill yours";
let keyword ="프랑스 음식";
......
......@@ -9,7 +9,7 @@
let apikey = "fill your own key";
let apikey = "fill yours";
let keyword ="이탈리아 음식";
......
......@@ -8,7 +8,7 @@
let apikey = "fill your own key";
let apikey = "fill yours";
let keyword ="일본 음식";
......
......@@ -8,7 +8,7 @@
let apikey = "fill your own key";
let apikey = "fill yours";
let keyword ="한국 음식";
......
......@@ -9,7 +9,7 @@
let apikey = "fill your own key";
let apikey = "fill yours";
let keyword ="멕시코 음식";
......