구희연 / Food_recipe_info

Go to a project
Toggle navigation Toggle navigation pinning
Heeyeon
c9f7d373 2 parents ccd72f86 fdaabc0a

Connecting youtube api

Expand all
Inline Side-by-side
Showing 6 changed files with 151 additions and 23 deletions
...@@ -38,7 +38,7 @@ passport.deserializeUser(function(id, done) { //읽기 ...@@ -38,7 +38,7 @@ passport.deserializeUser(function(id, done) { //읽기
38 38
39 //첫 페이지 39 //첫 페이지
40 app.get('/',(req,res)=>{ 40 app.get('/',(req,res)=>{
41 - let page = getFirstPage('Passport','This is Passport Example Page',authInfo(req)); 41 + let page = getFirstPage('Welcome!','Food Recipe',authInfo(req));
42 res.send(page); 42 res.send(page);
43 }); 43 });
44 44
...@@ -397,6 +397,7 @@ const getLoginButton = (auth) =>{ ...@@ -397,6 +397,7 @@ const getLoginButton = (auth) =>{
397 397
398 //첫 페이지 화면 398 //첫 페이지 화면
399 const getFirstPage =(title, content, auth) =>{ 399 const getFirstPage =(title, content, auth) =>{
400 +<<<<<<< HEAD
400 return ` 401 return `
401 <!DOCTYPE html> 402 <!DOCTYPE html>
402 <html lang="en"> 403 <html lang="en">
...@@ -420,6 +421,76 @@ const getFirstPage =(title, content, auth) =>{ ...@@ -420,6 +421,76 @@ const getFirstPage =(title, content, auth) =>{
420 </body> 421 </body>
421 </html> 422 </html>
422 `; 423 `;
424 +=======
425 + return `
426 + <!DOCTYPE html>
427 + <html lang="en">
428 + <head>
429 + <meta charset="UTF-8">
430 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
431 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
432 + <title>Passport Example</title>
433 + <style>
434 + body{
435 + height: 100vh;
436 + 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');
437 + background-position: center;
438 + background-repeat: no-repeat;
439 + background-size: cover;
440 + background-attachment: scroll;
441 + }
442 + h1 {
443 + position: absolute;
444 + left: 50%;
445 + top: 30%;
446 + transform: translate(-50%, -30%);
447 + text-align: center;
448 + font-size: 5em;
449 + font-family: cursive;;
450 + }
451 + p {
452 + position: relative;
453 + left: 50%;
454 + top: 47%;
455 + transform: translate(-50%, -47%);
456 + font-size: 3em;
457 + text-align: center;
458 + }
459 + div {
460 + position: relative;
461 + font-size: 1.3em;
462 + text-align: center;
463 + }
464 + .box1{
465 + position: relative;
466 + left: 50%;
467 + top: 50%;
468 + transform: translate(-50%, -50%);
469 + }
470 + .box2{
471 + position: relative;
472 + left: 50%;
473 + top: 54%;
474 + transform: translate(-50%, -54%);
475 + }
476 + </style>
477 + </head>
478 + <body>
479 + <h1>${title}</h1>
480 + <p>${content}</p>
481 + <div class="box1">
482 + ${auth}
483 + </div>
484 + <div class="box2">
485 + <input type="button" value="레시피 보러가기" onClick="movepage()"/>
486 + </div>
487 + <script type="text/javascript">
488 + function movepage(){
489 + location.href="main";
490 + }</script>
491 + </body>
492 + </html>
493 + `;
494 +>>>>>>> fdaabc0a001fe31ed43809b64f9073ff18fd1db6
423 495
424 } 496 }
425 -
......
This diff is collapsed. Click to expand it.
...@@ -4,23 +4,69 @@ ...@@ -4,23 +4,69 @@
4 box-sizing:border-box; 4 box-sizing:border-box;
5 } 5 }
6 .containter{ 6 .containter{
7 + position:relative;
7 width:90%; 8 width:90%;
8 height:auto; 9 height:auto;
9 max-width:1200px; 10 max-width:1200px;
10 - margin:0 auto; 11 + margin:0;/*auto*/
12 + color:black;
11 } 13 }
12 form{ 14 form{
13 - width:50%; 15 + width:90%;
14 - max-width:400px;
15 border-radius:4px; 16 border-radius:4px;
17 + margin-top:-10px;
18 + margin-left:10px;
19 + background-color:white;
20 +}
21 +form{
22 + display:inline-block;
16 } 23 }
17 -form input{ 24 +.search-result{
25 + /*여러줄로 보여주기 위해선 grid 사용해야하는데, 우선은 영상목록 뽑아보고 결정*/
26 + /*grid로 바꿔놓음. 여러 열로 사진들이 정렬됨*/
27 + display:grid;
28 + grid-gap:25px;
29 + grid-template:auto/repeat(auto-fit,minmax(300px,1fr));
30 + margin-top:50px;
18 width:100%; 31 width:100%;
32 + margin-left:265px;
33 +}
34 +/*form input{
35 + width:80%;
36 + padding:10px;
37 + border:none;
38 + outline:none;
39 + font-size:1.8rem;
40 + display:inline-block;
19 } 41 }
20 form ion-icon{ 42 form ion-icon{
21 width:9%; 43 width:9%;
22 font-size:3rem; 44 font-size:3rem;
23 - margin:-15px; 45 + margin-left:10px;
46 + margin-top:15px;
24 color:rgb(75,75,75); 47 color:rgb(75,75,75);
25 - 48 +}*/
49 +.search-box{
50 + margin-left:-10px;
51 + margin-top:10px;
52 +}
53 +img{
54 + width:80%;
55 + height:80%;
56 + object-fit:cover;
57 +}
58 +html{
59 + font-size:12px;
60 +}
61 +section{
62 + min-height:10vh;
63 + width:100%;
64 + display:flex;
65 + padding:100px 0;
66 +}
67 +.brand{
68 + margin-top:-70px;
69 + font-size:4rem;
70 + color:black;
71 + margin-bottom:30px;
26 } 72 }
......
1 - 1 +<!DOCTYPE html>
2 - <!DOCTYPE html> 2 +<html lang="en">
3 - <html lang="en"> 3 +<head>
4 - <head>
5 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title> 6 <title>Document</title>
8 - <link rel="style sheet" href="main.css"> 7 + <link rel="stylesheet" href="main.css">
9 - </head> 8 +</head>
10 - <body> 9 +<body>
11 <section> 10 <section>
12 <div class="container"> 11 <div class="container">
13 <h1 class="brand">Recipe APP</h1> 12 <h1 class="brand">Recipe APP</h1>
14 - <div class="serach-box">
15 <form> 13 <form>
16 <input id="name" type="text" placeholder="Search Your Recipe..."> 14 <input id="name" type="text" placeholder="Search Your Recipe...">
17 <ion-icon name="search"></ion-icon> 15 <ion-icon name="search"></ion-icon>
18 </form> 16 </form>
19 - </div>
20 <div class="search-result"> 17 <div class="search-result">
21 <!--<div class="item"> 18 <!--<div class="item">
22 <img src="./0.jpg" alt=""> 19 <img src="./0.jpg" alt="">
...@@ -32,5 +29,5 @@ ...@@ -32,5 +29,5 @@
32 <script src="./main.js"></script> 29 <script src="./main.js"></script>
33 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> 30 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
34 <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> 31 <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
35 - </body> 32 +</body>
36 - </html> 33 +</html>
......
...@@ -27,6 +27,9 @@ async function fetchAPI(){ ...@@ -27,6 +27,9 @@ async function fetchAPI(){
27 function boxinfo(results){ 27 function boxinfo(results){
28 let boxsinfo =''; 28 let boxsinfo ='';
29 results.map(result => { 29 results.map(result => {
30 + const object = {
31 + cal: result.recipe.calories.toFixed(0)
32 + };
30 boxsinfo += 33 boxsinfo +=
31 ` 34 `
32 <style> 35 <style>
...@@ -39,20 +42,30 @@ function boxinfo(results){ ...@@ -39,20 +42,30 @@ function boxinfo(results){
39 display:flex; 42 display:flex;
40 flex-wrap:wrap; 43 flex-wrap:wrap;
41 margin-left:50px auto; 44 margin-left:50px auto;
42 -
43 } 45 }
44 <!--검색결과사진,레시피정보 모두 검색창 옆으로 가게하는거까지는 되었고 2열씩 정렬하려 했는데 2열 정렬 부분이 미완성. 우선 사진 옆으로 정보만 수평으로 뜸--> 46 <!--검색결과사진,레시피정보 모두 검색창 옆으로 가게하는거까지는 되었고 2열씩 정렬하려 했는데 2열 정렬 부분이 미완성. 우선 사진 옆으로 정보만 수평으로 뜸-->
45 <!--검색결과 뜰 시에 검색창 위치가 바뀌는 문제 있음--> 47 <!--검색결과 뜰 시에 검색창 위치가 바뀌는 문제 있음-->
46 -
47 -
48 </style> 48 </style>
49 <div class="item"> 49 <div class="item">
50 <img src="${result.recipe.image}" alt=""> 50 <img src="${result.recipe.image}" alt="">
51 <div class="flex-container"> 51 <div class="flex-container">
52 <h1 class="title">${result.recipe.label}</h1> 52 <h1 class="title">${result.recipe.label}</h1>
53 <a href="${result.recipe.url}" target="_blank">View Recipe</a> 53 <a href="${result.recipe.url}" target="_blank">View Recipe</a>
54 + <!--result.recipe.labe에 + home + recipe 한 검색결과 페이지를 버튼에 링크시켜놓음-->
55 + <a href="https://www.youtube.com/results?search_query=${result.recipe.label}+home+recipe" target="_blank">View Videos</a>
54 </div> 56 </div>
55 - <p class="item-data">Calories: ${result.recipe.calories.toFixed(0)}</p> 57 + ${(cal => {
58 + if (cal >= 2000) {
59 + return `<p style="color:red">${cal}</p>`;
60 + }
61 + else if(cal >= 1000 && cal < 2000){
62 + return `<p style="color:yellow">${cal}</p>`;
63 + }
64 + else {
65 + return `<p style="color:green">${cal}</p>`;
66 + }
67 + })(object.cal)
68 + }
56 </div> 69 </div>
57 ` 70 `
58 }) 71 })
......
1 +{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"flash":{"error":["Missing username or password.","Missing username or password."]},"__lastAccess":1638672404811}
...\ No newline at end of file ...\ No newline at end of file