Connecting youtube api

Heeyeon
Commit c9f7d3736402669ad28d7eedc38ade7e9681d3e6 c9f7d373 2 parents ccd72f86 fdaabc0a
Showing 6 changed files with 197 additions and 69 deletions
index.js
main/index.js
main/main.css
main/main.html
main/main.js
sessions/A22iC4gAA-1NUQMPBZUCEEr9SzGd_bbJ.json
--- a/index.js
View file @c9f7d37
+++ b/index.js
View file @c9f7d37
@@ -6,7 +6,7 @@ const fs=require('fs');
 const router = express.Router()
 const fileStore = require('session-file-store')(session);
 const app = express();
-var flash = require('connect-flash'); 
+var flash = require('connect-flash');
 var NaverStrategy = require('passport-naver').Strategy;
 var KakaoStrategy = require('passport-kakao').Strategy;
@@ -38,7 +38,7 @@ passport.deserializeUser(function(id, done) {   //읽기
 //첫 페이지
 app.get('/',(req,res)=>{
-    let page = getFirstPage('Passport','This is Passport Example Page',authInfo(req));
+    let page = getFirstPage('Welcome!','Food Recipe',authInfo(req));
     res.send(page);
 });
@@ -57,7 +57,7 @@ app.get('/main',(req,res)=>{
 //로그인 페이지
 app.get('/login',(req,res)=>{
     let page =  getLoginButton(`<a href="/">뒤로가기</a>`);
-    res.send(page);   
+    res.send(page);
 });
@@ -75,7 +75,7 @@ passport.use(new LocalStrategy({
       console.log(user);
         //아이디가 다를때
-        if (id !== user.email){  
+        if (id !== user.email){
             //alert("존재하는 아이디가 없습니다.")
             return done(null, false, { message: '아이디가 다르다' });}
         //비밀번호가 다를때
@@ -89,18 +89,18 @@ passport.use(new LocalStrategy({
 //로그인 처리 (Passport)
 app.post('/login',
-passport.authenticate('local', { 
+passport.authenticate('local', {
     //성공시, 메인페이지 이동
     //실패시 로그인 페이지 이동
     successRedirect: '/',
     failureRedirect: '/login',
     badRequestMessage : 'Missing username or password.',
-    failureFlash: true 
+    failureFlash: true
 }));
 //로그 아웃 처리
 app.get('/logout',(req,res)=>{
-    
+
   //passport 정보 삭제
   req.logout();
   //서버측 세션 삭제
@@ -124,20 +124,20 @@ const authInfo = (req)=>{
 // naver 로그인
 app.get('/naverlogin', passport.authenticate('naver'));
 passport.use('naver',new NaverStrategy({
-  clientID: 'CGVVomc0bhMhzfzbytK2', 
+  clientID: 'CGVVomc0bhMhzfzbytK2',
-  clientSecret: 'XHylcjnZxG', 
+  clientSecret: 'XHylcjnZxG',
   callbackURL: "http://localhost:3000/",
   svcType: 0,
   authType: 'reauthenticate'  // enable re-authentication
- }, 
+ },
- 
+
- function(accessToken, refreshToken, profile, done) { 
+ function(accessToken, refreshToken, profile, done) {
   var _profile = profile._json;
   console.log(_profile.id);
   console.log(_profile.properties.nickname);
- } 
+ }
  ));
- 
+
 // kakao 로그인
 app.get('/kakaologin', passport.authenticate('kakao-login'));
@@ -230,7 +230,7 @@ app.get('/join',(req,res)=>{
   </style><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
-  
+
 </head>
   <body>
@@ -254,7 +254,7 @@ app.get('/join',(req,res)=>{
       </button>
   </form>
   </html>
-  
+
   `,'<a href="/login">뒤로가기</a>');
   res.send(page);
 });
@@ -378,7 +378,7 @@ const getLoginButton = (auth) =>{
             <button type="submit" class="btn btn btn-primary">
            <a href="/join" style="color:white;text-decoration-line:none;"> 회원가입</a>
         </form>
-        
+
       </div>
     </div>
   </div>
@@ -387,8 +387,8 @@ const getLoginButton = (auth) =>{
   <a href="/naverlogin" class="btn btn-block btn-lg btn-success btn_login">Naver</a>
   <a href="/kakaologin" class="btn btn-block btn-lg btn-warning btn_login">KaKao</a>
   </div>
- 
+
- 
+
 </body>
 </html>
     `;
@@ -397,6 +397,7 @@ const getLoginButton = (auth) =>{
 //첫 페이지 화면
 const getFirstPage =(title, content, auth) =>{
+<<<<<<< HEAD
   return `
   <!DOCTYPE html>
   <html lang="en">
@@ -420,6 +421,76 @@ const getFirstPage =(title, content, auth) =>{
   </body>
   </html>
   `;
+=======
+    return `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Passport Example</title>
+        <style>
+          body{
+            height: 100vh;
+            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');
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-attachment: scroll;
+          }
+          h1 {
+            position: absolute;
+            left: 50%;
+            top: 30%;
+            transform: translate(-50%, -30%);
+            text-align: center;
+            font-size: 5em;
+            font-family: cursive;;
+          }
+          p {
+            position: relative;
+            left: 50%;
+            top: 47%;
+            transform: translate(-50%, -47%);
+            font-size: 3em;
+            text-align: center;
+          }
+          div {
+            position: relative;
+            font-size: 1.3em;
+            text-align: center;
+          }
+          .box1{
+            position: relative;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+          }
+          .box2{
+            position: relative;
+            left: 50%;
+            top: 54%;
+            transform: translate(-50%, -54%);
+          }
+        </style>
+    </head>
+    <body>
+        <h1>${title}</h1>
+        <p>${content}</p>
+        <div class="box1">
+        ${auth}
+        </div>
+        <div class="box2">
+        <input type="button" value="레시피 보러가기" onClick="movepage()"/>
+        </div>
+        <script type="text/javascript">
+        function movepage(){
+            location.href="main";
+        }</script>
+    </body>
+    </html>
+    `;
+>>>>>>> fdaabc0a001fe31ed43809b64f9073ff18fd1db6
 }
-
--- a/main/index.js 0 → 100644
View file @c9f7d37
+++ b/main/index.js 0 → 100644
View file @c9f7d37
--- a/main/main.css
View file @c9f7d37
+++ b/main/main.css
View file @c9f7d37
@@ -4,23 +4,69 @@
     box-sizing:border-box;    
 }
 .containter{
+    position:relative;
     width:90%;
     height:auto;
     max-width:1200px;
-    margin:0 auto;
+    margin:0;/*auto*/
+    color:black;
 }
 form{
-    width:50%;
+    width:90%;
-    max-width:400px;
     border-radius:4px;
+    margin-top:-10px;
+    margin-left:10px;
+    background-color:white;
+}
+form{
+    display:inline-block;
 }
-form input{
+.search-result{
+    /*여러줄로 보여주기 위해선 grid 사용해야하는데, 우선은 영상목록 뽑아보고 결정*/
+    /*grid로 바꿔놓음. 여러 열로 사진들이 정렬됨*/
+    display:grid;
+    grid-gap:25px;
+    grid-template:auto/repeat(auto-fit,minmax(300px,1fr));
+    margin-top:50px;
     width:100%;
+    margin-left:265px;
+}
+/*form input{
+    width:80%;
+    padding:10px;
+    border:none;
+    outline:none;
+    font-size:1.8rem;
+    display:inline-block;
 }
 form ion-icon{
     width:9%;
     font-size:3rem;
-    margin:-15px;
+    margin-left:10px;
+    margin-top:15px;
     color:rgb(75,75,75);
-
-}
\ No newline at end of file
+}*/
+.search-box{
+    margin-left:-10px;
+    margin-top:10px;
+}
+img{
+    width:80%;
+    height:80%;
+    object-fit:cover;
+}
+html{
+   font-size:12px; 
+}
+section{
+    min-height:10vh;
+    width:100%;
+    display:flex;
+    padding:100px 0;    
+}
+.brand{
+    margin-top:-70px;
+    font-size:4rem;
+    color:black;
+    margin-bottom:30px;    
+}
--- a/main/main.html
View file @c9f7d37
+++ b/main/main.html
View file @c9f7d37
-    
+<!DOCTYPE html>
-    <!DOCTYPE html>
+<html lang="en">
-    <html lang="en">
+<head>
-    <head>
+  <meta charset="UTF-8">
-      <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
-      <title>Document</title>
+  <link rel="stylesheet" href="main.css">
-      <link rel="style sheet" href="main.css">
+</head>
-    </head>
+<body>
-    <body>
+  <section>
-      <section>
+    <div class="container">
-        <div class="container">
+      <h1 class="brand">Recipe APP</h1>
-          <h1 class="brand">Recipe APP</h1>
+      <form>
-          <div class="serach-box">
+        <input id="name" type="text" placeholder="Search Your Recipe...">
-          <form>
+        <ion-icon name="search"></ion-icon>
-            <input id="name" type="text" placeholder="Search Your Recipe...">
+      </form>
-            <ion-icon name="search"></ion-icon>
+      <div class="search-result">
-          </form>
+        <!--<div class="item">
+          <img src="./0.jpg" alt="">
+          <div class="flex-container">
+            <h1 class="title">This is a recipe</h1>
+            <a href="#">View Recipe</a>
           </div>
-          <div class="search-result">
+          <p class="item-data">Calories: 120</p>
-            <!--<div class="item">
+        </div>-->
-              <img src="./0.jpg" alt="">
+      </div>
-              <div class="flex-container">
+    </div>
-                <h1 class="title">This is a recipe</h1>
+  </section>
-                <a href="#">View Recipe</a>
+  <script src="./main.js"></script>
-              </div>
+  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
-              <p class="item-data">Calories: 120</p>
+  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
-            </div>-->
+</body>
-          </div>
+</html>
-        </div>
-      </section>
-      <script src="./main.js"></script>
-      <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>
-    </body>
-    </html>
--- a/main/main.js
View file @c9f7d37
+++ b/main/main.js
View file @c9f7d37
@@ -12,7 +12,7 @@ searchForm.addEventListener('submit', function(event){
     event.preventDefault();
   }
   else{
-    event.preventDefault(); 
+    event.preventDefault();
     searchQuery = event.target.querySelector('input').value;
     fetchAPI();
   }
@@ -27,6 +27,9 @@ async function fetchAPI(){
 function boxinfo(results){
   let boxsinfo ='';
   results.map(result => {
+  const object = {
+  	  cal: result.recipe.calories.toFixed(0)
+  };
     boxsinfo +=
     `
     <style>
@@ -34,25 +37,35 @@ function boxinfo(results){
       display:flex;
       flex-wrap:wrap;
       margin-left:50px auto;
-    } 
+    }
     .container{
       display:flex;
       flex-wrap:wrap;
       margin-left:50px auto;
-
+    }
-    } 
     <!--검색결과사진,레시피정보 모두 검색창 옆으로 가게하는거까지는 되었고 2열씩 정렬하려 했는데 2열 정렬 부분이 미완성. 우선 사진 옆으로 정보만 수평으로 뜸-->
     <!--검색결과 뜰 시에 검색창 위치가 바뀌는 문제 있음-->
-
-    
     </style>
     <div class="item">
       <img src="${result.recipe.image}" alt="">
       <div class="flex-container">
         <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>
       </div>
-      <p class="item-data">Calories: ${result.recipe.calories.toFixed(0)}</p>
+      ${(cal => {
+        if (cal >= 2000) {
+          return `<p style="color:red">${cal}</p>`;
+        }
+        else if(cal >= 1000 && cal < 2000){
+          return `<p style="color:yellow">${cal}</p>`;
+        }
+        else {
+          return `<p style="color:green">${cal}</p>`;
+        }
+          })(object.cal)
+         }
     </div>
     `
   })
--- a/sessions/A22iC4gAA-1NUQMPBZUCEEr9SzGd_bbJ.json 0 → 100644
View file @c9f7d37
+++ b/sessions/A22iC4gAA-1NUQMPBZUCEEr9SzGd_bbJ.json 0 → 100644
View file @c9f7d37
+{"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