구희연 / Food_recipe_info

Go to a project
Toggle navigation Toggle navigation pinning
조국현
e8d62e57 1 parent 41dac5fe

Update Search Option By Calories 

Users can set up search calories limit by checkbox.
Inline Side-by-side
Showing 13 changed files with 78 additions and 137 deletions
1 +/.vscode
2 +/node_modules
3 +/sessions
...@@ -38,11 +38,7 @@ passport.deserializeUser(function(id, done) { //읽기 ...@@ -38,11 +38,7 @@ passport.deserializeUser(function(id, done) { //읽기
38 38
39 //첫 페이지 39 //첫 페이지
40 app.get('/',(req,res)=>{ 40 app.get('/',(req,res)=>{
41 -<<<<<<< HEAD
42 let page = getFirstPage(' 오늘뭐먹지','아직도 먹는게<br>고민된다면..?',authInfo(req)); 41 let page = getFirstPage(' 오늘뭐먹지','아직도 먹는게<br>고민된다면..?',authInfo(req));
43 -=======
44 - let page = getFirstPage('Welcome!','Food Recipe',authInfo(req));
45 ->>>>>>> fdaabc0a001fe31ed43809b64f9073ff18fd1db6
46 res.send(page); 42 res.send(page);
47 }); 43 });
48 44
...@@ -133,8 +129,8 @@ const authInfo = (req)=>{ ...@@ -133,8 +129,8 @@ const authInfo = (req)=>{
133 // naver 로그인 129 // naver 로그인
134 app.get('/naverlogin', passport.authenticate('naver')); 130 app.get('/naverlogin', passport.authenticate('naver'));
135 passport.use('naver',new NaverStrategy({ 131 passport.use('naver',new NaverStrategy({
136 - clientID: 'CGVVomc0bhMhzfzbytK2', 132 + clientID: 'fill your own ID',
137 - clientSecret: 'XHylcjnZxG', 133 + clientSecret: 'fill your own secret',
138 callbackURL: "http://localhost:3000/", 134 callbackURL: "http://localhost:3000/",
139 svcType: 0, 135 svcType: 0,
140 authType: 'reauthenticate' // enable re-authentication 136 authType: 'reauthenticate' // enable re-authentication
...@@ -151,7 +147,7 @@ passport.use('naver',new NaverStrategy({ ...@@ -151,7 +147,7 @@ passport.use('naver',new NaverStrategy({
151 // kakao 로그인 147 // kakao 로그인
152 app.get('/kakaologin', passport.authenticate('kakao-login')); 148 app.get('/kakaologin', passport.authenticate('kakao-login'));
153 passport.use('kakao-login', new KakaoStrategy({ 149 passport.use('kakao-login', new KakaoStrategy({
154 - clientID: '8a854307a99092b4eeeff5e4a79c0ac0', 150 + clientID: 'fill your own ID',
155 callbackURL: 'http://localhost:3000/' 151 callbackURL: 'http://localhost:3000/'
156 }, 152 },
157 function (accessToken, refreshToken, profile, done) { 153 function (accessToken, refreshToken, profile, done) {
...@@ -323,7 +319,7 @@ const getLoginButton = (auth) =>{ ...@@ -323,7 +319,7 @@ const getLoginButton = (auth) =>{
323 .span-or { 319 .span-or {
324 display: block; 320 display: block;
325 position: absolute; 321 position: absolute;
326 - left: 50%; 322 + left: 50%;y
327 top: -2px; 323 top: -2px;
328 margin-left: -25px; 324 margin-left: -25px;
329 background-color: #fff; 325 background-color: #fff;
...@@ -399,7 +395,6 @@ const getLoginButton = (auth) =>{ ...@@ -399,7 +395,6 @@ const getLoginButton = (auth) =>{
399 395
400 //첫 페이지 화면 396 //첫 페이지 화면
401 const getFirstPage =(title, content, auth) =>{ 397 const getFirstPage =(title, content, auth) =>{
402 -<<<<<<< HEAD
403 return ` 398 return `
404 <!DOCTYPE html> 399 <!DOCTYPE html>
405 <html lang="en"> 400 <html lang="en">
...@@ -545,76 +540,3 @@ const getFirstPage =(title, content, auth) =>{ ...@@ -545,76 +540,3 @@ const getFirstPage =(title, content, auth) =>{
545 </html> 540 </html>
546 `; 541 `;
547 } 542 }
548 -=======
549 - return `
550 - <!DOCTYPE html>
551 - <html lang="en">
552 - <head>
553 - <meta charset="UTF-8">
554 - <meta http-equiv="X-UA-Compatible" content="IE=edge">
555 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
556 - <title>Passport Example</title>
557 - <style>
558 - body{
559 - height: 100vh;
560 - background-image: url('https://images.unsplash.com/photo-1614548539924-5c1f205b3747?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
561 - background-position: center;
562 - background-repeat: no-repeat;
563 - background-size: cover;
564 - background-attachment: scroll;
565 - }
566 - h1 {
567 - position: absolute;
568 - left: 50%;
569 - top: 30%;
570 - transform: translate(-50%, -30%);
571 - text-align: center;
572 - font-size: 5em;
573 - font-family: cursive;;
574 - }
575 - p {
576 - position: relative;
577 - left: 50%;
578 - top: 47%;
579 - transform: translate(-50%, -47%);
580 - font-size: 3em;
581 - text-align: center;
582 - }
583 - div {
584 - position: relative;
585 - font-size: 1.3em;
586 - text-align: center;
587 - }
588 - .box1{
589 - position: relative;
590 - left: 50%;
591 - top: 50%;
592 - transform: translate(-50%, -50%);
593 - }
594 - .box2{
595 - position: relative;
596 - left: 50%;
597 - top: 54%;
598 - transform: translate(-50%, -54%);
599 - }
600 - </style>
601 - </head>
602 - <body>
603 - <h1>${title}</h1>
604 - <p>${content}</p>
605 - <div class="box1">
606 - ${auth}
607 - </div>
608 - <div class="box2">
609 - <input type="button" value="레시피 보러가기" onClick="movepage()"/>
610 - </div>
611 - <script type="text/javascript">
612 - function movepage(){
613 - location.href="main";
614 - }</script>
615 - </body>
616 - </html>
617 - `;
618 -
619 -}
620 ->>>>>>> fdaabc0a001fe31ed43809b64f9073ff18fd1db6
......
...@@ -31,21 +31,7 @@ form{ ...@@ -31,21 +31,7 @@ form{
31 width:100%; 31 width:100%;
32 margin-left:265px; 32 margin-left:265px;
33 } 33 }
34 -/*form input{ 34 +
35 - width:80%;
36 - padding:10px;
37 - border:none;
38 - outline:none;
39 - font-size:1.8rem;
40 - display:inline-block;
41 -}
42 -form ion-icon{
43 - width:9%;
44 - font-size:3rem;
45 - margin-left:10px;
46 - margin-top:15px;
47 - color:rgb(75,75,75);
48 -}*/
49 .search-box{ 35 .search-box{
50 margin-left:-10px; 36 margin-left:-10px;
51 margin-top:10px; 37 margin-top:10px;
...@@ -69,12 +55,19 @@ section{ ...@@ -69,12 +55,19 @@ section{
69 font-size:4rem; 55 font-size:4rem;
70 color:black; 56 color:black;
71 margin-bottom:30px; 57 margin-bottom:30px;
72 -<<<<<<< HEAD
73 } 58 }
74 -======= 59 +/*form input{
60 + width:80%;
61 + padding:10px;
62 + border:none;
63 + outline:none;
64 + font-size:1.8rem;
65 + display:inline-block;
75 } 66 }
76 -<<<<<<< HEAD 67 +form ion-icon{
77 ->>>>>>> feature/youtube 68 + width:9%;
78 -======= 69 + font-size:3rem;
79 ->>>>>>> fdaabc0a001fe31ed43809b64f9073ff18fd1db6 70 + margin-left:10px;
80 ->>>>>>> feature/youtube 71 + margin-top:15px;
72 + color:rgb(75,75,75);
73 +}*/
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -14,6 +14,34 @@ ...@@ -14,6 +14,34 @@
14 <input id="name" type="text" placeholder="Search Your Recipe..."> 14 <input id="name" type="text" placeholder="Search Your Recipe...">
15 <ion-icon name="search"></ion-icon> 15 <ion-icon name="search"></ion-icon>
16 </form> 16 </form>
17 + <p>
18 + <input type='checkbox'
19 + name='animal'
20 + value=800
21 + onclick='getCheckboxValue(event)'/> 800
22 + <input type='checkbox'
23 + name='animal'
24 + value=1200
25 + onclick='getCheckboxValue(event)'/> 1200
26 + <input type='checkbox'
27 + name='animal'
28 + value=1600
29 + onclick='getCheckboxValue(event)'/> 1600
30 + <input type='checkbox'
31 + name='animal'
32 + value=2000
33 + onclick='getCheckboxValue(event)'/> 2000
34 + </p>
35 +
36 +
37 +
38 +
39 +<!-- <select id="selectBox">
40 + <option value="800" >800</option>
41 + <option value="1200">1200</option>
42 + <option value="1600" >1600</option>
43 + </select> -->
44 +
17 <div class="search-result"> 45 <div class="search-result">
18 <!--<div class="item"> 46 <!--<div class="item">
19 <img src="./0.jpg" alt=""> 47 <img src="./0.jpg" alt="">
...@@ -26,16 +54,9 @@ ...@@ -26,16 +54,9 @@
26 </div> 54 </div>
27 </div> 55 </div>
28 </section> 56 </section>
29 - <script src="./main.js"></script> 57 +
30 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> 58 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
31 <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> 59 <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
60 + <script src="./main.js"></script>
32 </body> 61 </body>
33 -<<<<<<< HEAD
34 -</html>
35 -=======
36 </html> 62 </html>
37 -<<<<<<< HEAD
38 ->>>>>>> feature/youtube
39 -=======
40 ->>>>>>> fdaabc0a001fe31ed43809b64f9073ff18fd1db6
41 ->>>>>>> feature/youtube
......
1 +var caloriesLimit=9999;
2 +function getCheckboxValue(event) {
3 + if(event.target.checked) {
4 + caloriesLimit = event.target.value;
5 + }else {
6 + caloriesLimit=9999;
7 + }
8 +}
9 +
1 const searchForm = document.querySelector('form'); 10 const searchForm = document.querySelector('form');
2 const searchResultDiv = document.querySelector('.search-result') 11 const searchResultDiv = document.querySelector('.search-result')
3 -const APP_ID = '0a67fbc1'; 12 +const APP_ID = 'fill your own ID';
4 -const APP_KEY = '225d31b59bf211d7ede34e2e885f1f3b'; 13 +const APP_KEY = 'fill your own key';
5 searchForm.addEventListener('submit', function(event){ 14 searchForm.addEventListener('submit', function(event){
6 if(document.getElementById('name').value.length === 0){ 15 if(document.getElementById('name').value.length === 0){
7 alert('한글자 이상 입력해주세요'); 16 alert('한글자 이상 입력해주세요');
...@@ -30,22 +39,15 @@ function boxinfo(results){ ...@@ -30,22 +39,15 @@ function boxinfo(results){
30 const object = { 39 const object = {
31 cal: result.recipe.calories.toFixed(0) 40 cal: result.recipe.calories.toFixed(0)
32 }; 41 };
42 + if(result.recipe.calories>=caloriesLimit){}
43 +
44 + else{
33 boxsinfo += 45 boxsinfo +=
34 ` 46 `
35 <style> 47 <style>
36 - .item{ 48 +
37 - display:flex;
38 - flex-wrap:wrap;
39 - margin-left:50px auto;
40 - }
41 - .container{
42 - display:flex;
43 - flex-wrap:wrap;
44 - margin-left:50px auto;
45 - }
46 - <!--검색결과사진,레시피정보 모두 검색창 옆으로 가게하는거까지는 되었고 2열씩 정렬하려 했는데 2열 정렬 부분이 미완성. 우선 사진 옆으로 정보만 수평으로 뜸-->
47 - <!--검색결과 뜰 시에 검색창 위치가 바뀌는 문제 있음-->
48 </style> 49 </style>
50 +
49 <div class="item"> 51 <div class="item">
50 <img src="${result.recipe.image}" alt=""> 52 <img src="${result.recipe.image}" alt="">
51 <div class="flex-container"> 53 <div class="flex-container">
...@@ -59,7 +61,7 @@ function boxinfo(results){ ...@@ -59,7 +61,7 @@ function boxinfo(results){
59 return `<p style="color:red">${cal}</p>`; 61 return `<p style="color:red">${cal}</p>`;
60 } 62 }
61 else if(cal >= 1000 && cal < 2000){ 63 else if(cal >= 1000 && cal < 2000){
62 - return `<p style="color:yellow">${cal}</p>`; 64 + return `<p style="color:black">${cal}</p>`;
63 } 65 }
64 else { 66 else {
65 return `<p style="color:green">${cal}</p>`; 67 return `<p style="color:green">${cal}</p>`;
...@@ -67,7 +69,7 @@ function boxinfo(results){ ...@@ -67,7 +69,7 @@ function boxinfo(results){
67 })(object.cal) 69 })(object.cal)
68 } 70 }
69 </div> 71 </div>
70 - ` 72 + `}
71 }) 73 })
72 searchResultDiv.innerHTML = boxsinfo; 74 searchResultDiv.innerHTML = boxsinfo;
73 } 75 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -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("YCGVVomc0bhMhzfzbytK2", "http://localhost:3000/"); 9 + var naver_id_login = new naver_id_login("fill your own ID", "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 = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak"; 11 +let apikey = "fill your own key";
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 = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak"; 11 +let apikey = "fill your own key";
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 = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak"; 12 +let apikey = "fill your own key";
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 = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak"; 12 +let apikey = "fill your own key";
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 = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak"; 11 +let apikey = "fill your own key";
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 = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak"; 11 +let apikey = "fill your own key";
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 = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak"; 12 +let apikey = "fill your own key";
13 13
14 let keyword ="멕시코 음식"; 14 let keyword ="멕시코 음식";
15 15
......