구희연 / 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 38 additions and 33 deletions
...@@ -129,8 +129,8 @@ const authInfo = (req)=>{ ...@@ -129,8 +129,8 @@ const authInfo = (req)=>{
129 // naver 로그인 129 // naver 로그인
130 app.get('/naverlogin', passport.authenticate('naver')); 130 app.get('/naverlogin', passport.authenticate('naver'));
131 passport.use('naver',new NaverStrategy({ 131 passport.use('naver',new NaverStrategy({
132 - clientID: 'fill your own ID', 132 + clientID: 'fill yours',
133 - clientSecret: 'fill your own secret', 133 + clientSecret: 'fill yours',
134 callbackURL: "http://localhost:3000/", 134 callbackURL: "http://localhost:3000/",
135 svcType: 0, 135 svcType: 0,
136 authType: 'reauthenticate' // enable re-authentication 136 authType: 'reauthenticate' // enable re-authentication
...@@ -147,8 +147,9 @@ passport.use('naver',new NaverStrategy({ ...@@ -147,8 +147,9 @@ passport.use('naver',new NaverStrategy({
147 // kakao 로그인 147 // kakao 로그인
148 app.get('/kakaologin', passport.authenticate('kakao-login')); 148 app.get('/kakaologin', passport.authenticate('kakao-login'));
149 passport.use('kakao-login', new KakaoStrategy({ 149 passport.use('kakao-login', new KakaoStrategy({
150 - clientID: 'fill your own ID', 150 + clientID: 'fill yours',
151 callbackURL: 'http://localhost:3000/' 151 callbackURL: 'http://localhost:3000/'
152 +
152 }, 153 },
153 function (accessToken, refreshToken, profile, done) { 154 function (accessToken, refreshToken, profile, done) {
154 var _profile = profile._json; 155 var _profile = profile._json;
......
1 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap'); 1 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap');
2 -
3 *{ 2 *{
4 padding:0; 3 padding:0;
5 margin:0; 4 margin:0;
...@@ -89,7 +88,6 @@ section{ ...@@ -89,7 +88,6 @@ section{
89 display:flex; 88 display:flex;
90 padding:100px 0; 89 padding:100px 0;
91 align-items:stretch; 90 align-items:stretch;
92 -
93 } 91 }
94 .brand{ 92 .brand{
95 margin-top:-70px; 93 margin-top:-70px;
......
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 + <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
6 +
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title> 8 <title>Document</title>
7 <link rel="stylesheet" href="main.css"> 9 <link rel="stylesheet" href="main.css">
...@@ -16,32 +18,27 @@ ...@@ -16,32 +18,27 @@
16 </form> 18 </form>
17 <p> 19 <p>
18 <input type='checkbox' 20 <input type='checkbox'
19 - name='animal' 21 + name='chkbox[]'
20 value=800 22 value=800
21 onclick='getCheckboxValue(event)'/> 800 23 onclick='getCheckboxValue(event)'/> 800
22 <input type='checkbox' 24 <input type='checkbox'
23 - name='animal' 25 + name='chkbox[]'
24 value=1200 26 value=1200
25 onclick='getCheckboxValue(event)'/> 1200 27 onclick='getCheckboxValue(event)'/> 1200
26 <input type='checkbox' 28 <input type='checkbox'
27 - name='animal' 29 + name='chkbox[]'
28 value=1600 30 value=1600
29 onclick='getCheckboxValue(event)'/> 1600 31 onclick='getCheckboxValue(event)'/> 1600
30 <input type='checkbox' 32 <input type='checkbox'
31 - name='animal' 33 + name='chkbox[]'
32 value=2000 34 value=2000
33 onclick='getCheckboxValue(event)'/> 2000 35 onclick='getCheckboxValue(event)'/> 2000
34 </p> 36 </p>
35 -
36 -
37 -
38 -
39 <!-- <select id="selectBox"> 37 <!-- <select id="selectBox">
40 <option value="800" >800</option> 38 <option value="800" >800</option>
41 <option value="1200">1200</option> 39 <option value="1200">1200</option>
42 <option value="1600" >1600</option> 40 <option value="1600" >1600</option>
43 </select> --> 41 </select> -->
44 -
45 <div class="search-result"> 42 <div class="search-result">
46 <!--<div class="item"> 43 <!--<div class="item">
47 <img src="./0.jpg" alt=""> 44 <img src="./0.jpg" alt="">
...@@ -54,7 +51,6 @@ ...@@ -54,7 +51,6 @@
54 </div> 51 </div>
55 </div> 52 </div>
56 </section> 53 </section>
57 -
58 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> 54 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
59 <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> 55 <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
60 <script src="./main.js"></script> 56 <script src="./main.js"></script>
......
1 -Kakao.init('fill your own key'); 1 +Kakao.init('fill yours');
2 -const APP_ID = 'fill your own ID'; 2 +const APP_ID = 'fill yours';
3 -const APP_KEY = 'fill your own key'; 3 +const APP_KEY = 'fill yours';
4 var caloriesLimit=9999; 4 var caloriesLimit=9999;
5 +var checkCount=0;
6 +var checkLimit=2;
7 +chk=document.getElementsByName("chkbox[]");
5 function getCheckboxValue(event) { 8 function getCheckboxValue(event) {
6 if(event.target.checked) { 9 if(event.target.checked) {
7 caloriesLimit = event.target.value; 10 caloriesLimit = event.target.value;
11 + checkCount+=1;
8 }else { 12 }else {
9 caloriesLimit=9999; 13 caloriesLimit=9999;
14 + checkCount-=1;
15 + }
16 + if(checkCount>=checkLimit)
17 + {
18 + alert("칼로리 체크박스는 하나만 선택 가능합니다.");
19 + checkInitialize();
20 + checkCount=0;
21 + }
22 +}
23 +function checkInitialize(){
24 +
25 + for(i=0;i<chk.length;i++){
26 + chk[i].checked=false;
10 } 27 }
11 28
12 } 29 }
13 const searchForm = document.querySelector('form'); 30 const searchForm = document.querySelector('form');
14 const searchResultDiv = document.querySelector('.search-result') 31 const searchResultDiv = document.querySelector('.search-result')
15 -
16 searchForm.addEventListener('submit', function(event){ 32 searchForm.addEventListener('submit', function(event){
17 if(document.getElementById('name').value.length === 0){ 33 if(document.getElementById('name').value.length === 0){
18 alert('한글자 이상 입력해주세요'); 34 alert('한글자 이상 입력해주세요');
...@@ -54,7 +70,6 @@ function shareRecipe(sns,urlInfo,foodImage,foodLabel) { ...@@ -54,7 +70,6 @@ function shareRecipe(sns,urlInfo,foodImage,foodLabel) {
54 }); 70 });
55 } 71 }
56 } 72 }
57 -
58 async function fetchAPI(){ 73 async function fetchAPI(){
59 const recipeURL = `https://api.edamam.com/search?q=${searchQuery}&app_id=${APP_ID}&app_key=${APP_KEY}`; 74 const recipeURL = `https://api.edamam.com/search?q=${searchQuery}&app_id=${APP_ID}&app_key=${APP_KEY}`;
60 const response = await fetch(recipeURL); 75 const response = await fetch(recipeURL);
...@@ -62,23 +77,19 @@ async function fetchAPI(){ ...@@ -62,23 +77,19 @@ async function fetchAPI(){
62 boxinfo(data.hits); 77 boxinfo(data.hits);
63 console.log(data); 78 console.log(data);
64 } 79 }
65 -
66 function boxinfo(results){ 80 function boxinfo(results){
67 let boxsinfo =''; 81 let boxsinfo ='';
68 results.map(result => { 82 results.map(result => {
69 const object = { 83 const object = {
70 cal: result.recipe.calories.toFixed(0) 84 cal: result.recipe.calories.toFixed(0)
71 }; 85 };
72 -
73 if(result.recipe.calories>=caloriesLimit){} 86 if(result.recipe.calories>=caloriesLimit){}
74 -
75 else{ 87 else{
76 boxsinfo += 88 boxsinfo +=
77 ` 89 `
78 <style> 90 <style>
79 @import url(//fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap); 91 @import url(//fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap);
80 </style> 92 </style>
81 -
82 <div class="item"> 93 <div class="item">
83 <img src="${result.recipe.image}"> 94 <img src="${result.recipe.image}">
84 <div class="flex-container" style="font-family: 'Noto Sans KR', sans-serif;"> 95 <div class="flex-container" style="font-family: 'Noto Sans KR', sans-serif;">
...@@ -97,7 +108,6 @@ function boxinfo(results){ ...@@ -97,7 +108,6 @@ function boxinfo(results){
97 <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> 108 <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>
98 </li> 109 </li>
99 </ul> 110 </ul>
100 -
101 </div> 111 </div>
102 ${(cal => { 112 ${(cal => {
103 if (cal >= 2000) { 113 if (cal >= 2000) {
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 </head> 6 </head>
7 <body> 7 <body>
8 <script type="text/javascript"> 8 <script type="text/javascript">
9 - var naver_id_login = new naver_id_login("fill your own ID", "http://localhost:3000/"); 9 + var naver_id_login = new naver_id_login("fill yours", "http://localhost:3000/");
10 // 접근 토큰 값 출력 10 // 접근 토큰 값 출력
11 alert(naver_id_login.oauthParams.access_token); 11 alert(naver_id_login.oauthParams.access_token);
12 // 네이버 사용자 프로필 조회 12 // 네이버 사용자 프로필 조회
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 8
9 9
10 10
11 -let apikey = "fill your own key"; 11 +let apikey = "fill yours";
12 12
13 let keyword ="미국 음식"; 13 let keyword ="미국 음식";
14 14
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 8
9 9
10 10
11 -let apikey = "fill your own key"; 11 +let apikey = "fill yours";
12 12
13 let keyword ="중국 음식"; 13 let keyword ="중국 음식";
14 14
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 9
10 10
11 11
12 -let apikey = "fill your own key"; 12 +let apikey = "fill yours";
13 let keyword ="프랑스 음식"; 13 let keyword ="프랑스 음식";
14 14
15 15
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 9
10 10
11 11
12 -let apikey = "fill your own key"; 12 +let apikey = "fill yours";
13 let keyword ="이탈리아 음식"; 13 let keyword ="이탈리아 음식";
14 14
15 15
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 8
9 9
10 10
11 -let apikey = "fill your own key"; 11 +let apikey = "fill yours";
12 12
13 let keyword ="일본 음식"; 13 let keyword ="일본 음식";
14 14
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 8
9 9
10 10
11 -let apikey = "fill your own key"; 11 +let apikey = "fill yours";
12 12
13 let keyword ="한국 음식"; 13 let keyword ="한국 음식";
14 14
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 9
10 10
11 11
12 -let apikey = "fill your own key"; 12 +let apikey = "fill yours";
13 13
14 let keyword ="멕시코 음식"; 14 let keyword ="멕시코 음식";
15 15
......