Connecting youtube api

@@ -6,7 +6,7 @@ const fs=require('fs');
 const router = express.Router()
 const router = express.Router()
 const fileStore = require('session-file-store')(session);
 const fileStore = require('session-file-store')(session);
 const app = express();
 const app = express();
-var flash = require('connect-flash'); 
+var flash = require('connect-flash');
 var NaverStrategy = require('passport-naver').Strategy;
 var NaverStrategy = require('passport-naver').Strategy;
 var KakaoStrategy = require('passport-kakao').Strategy;
 var KakaoStrategy = require('passport-kakao').Strategy;
 
 
@@ -38,7 +38,7 @@ passport.deserializeUser(function(id, done) {   //읽기
 
 
 //첫 페이지
 //첫 페이지
 app.get('/',(req,res)=>{
 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);
     res.send(page);
 });
 });
 
 
@@ -57,7 +57,7 @@ app.get('/main',(req,res)=>{
 //로그인 페이지
 //로그인 페이지
 app.get('/login',(req,res)=>{
 app.get('/login',(req,res)=>{
     let page =  getLoginButton(`<a href="/">뒤로가기</a>`);
     let page =  getLoginButton(`<a href="/">뒤로가기</a>`);
-    res.send(page);   
+    res.send(page);
 });
 });
 
 
 
 
@@ -75,7 +75,7 @@ passport.use(new LocalStrategy({
       console.log(user);
       console.log(user);
 
 
         //아이디가 다를때
         //아이디가 다를때
-        if (id !== user.email){  
+        if (id !== user.email){
             //alert("존재하는 아이디가 없습니다.")
             //alert("존재하는 아이디가 없습니다.")
             return done(null, false, { message: '아이디가 다르다' });}
             return done(null, false, { message: '아이디가 다르다' });}
         //비밀번호가 다를때
         //비밀번호가 다를때
@@ -89,18 +89,18 @@ passport.use(new LocalStrategy({
 
 
 //로그인 처리 (Passport)
 //로그인 처리 (Passport)
 app.post('/login',
 app.post('/login',
-passport.authenticate('local', { 
+passport.authenticate('local', {
     //성공시, 메인페이지 이동
     //성공시, 메인페이지 이동
     //실패시 로그인 페이지 이동
     //실패시 로그인 페이지 이동
     successRedirect: '/',
     successRedirect: '/',
     failureRedirect: '/login',
     failureRedirect: '/login',
     badRequestMessage : 'Missing username or password.',
     badRequestMessage : 'Missing username or password.',
-    failureFlash: true 
+    failureFlash: true
 }));
 }));
 
 
 //로그 아웃 처리
 //로그 아웃 처리
 app.get('/logout',(req,res)=>{
 app.get('/logout',(req,res)=>{
-    
+
   //passport 정보 삭제
   //passport 정보 삭제
   req.logout();
   req.logout();
   //서버측 세션 삭제
   //서버측 세션 삭제
@@ -124,20 +124,20 @@ const authInfo = (req)=>{
 // naver 로그인
 // naver 로그인
 app.get('/naverlogin', passport.authenticate('naver'));
 app.get('/naverlogin', passport.authenticate('naver'));
 passport.use('naver',new NaverStrategy({
 passport.use('naver',new NaverStrategy({
-  clientID: 'CGVVomc0bhMhzfzbytK2', 
-  clientSecret: 'XHylcjnZxG', 
+  clientID: 'CGVVomc0bhMhzfzbytK2',
+  clientSecret: 'XHylcjnZxG',
   callbackURL: "http://localhost:3000/",
   callbackURL: "http://localhost:3000/",
   svcType: 0,
   svcType: 0,
   authType: 'reauthenticate'  // enable re-authentication
   authType: 'reauthenticate'  // enable re-authentication
- }, 
- 
- function(accessToken, refreshToken, profile, done) { 
+ },
+
+ function(accessToken, refreshToken, profile, done) {
   var _profile = profile._json;
   var _profile = profile._json;
   console.log(_profile.id);
   console.log(_profile.id);
   console.log(_profile.properties.nickname);
   console.log(_profile.properties.nickname);
- } 
+ }
  ));
  ));
- 
+
 
 
 // kakao 로그인
 // kakao 로그인
 app.get('/kakaologin', passport.authenticate('kakao-login'));
 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">
   </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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
-  
+
 </head>
 </head>
 
 
   <body>
   <body>
@@ -254,7 +254,7 @@ app.get('/join',(req,res)=>{
       </button>
       </button>
   </form>
   </form>
   </html>
   </html>
-  
+
   `,'<a href="/login">뒤로가기</a>');
   `,'<a href="/login">뒤로가기</a>');
   res.send(page);
   res.send(page);
 });
 });
@@ -378,7 +378,7 @@ const getLoginButton = (auth) =>{
             <button type="submit" class="btn btn btn-primary">
             <button type="submit" class="btn btn btn-primary">
            <a href="/join" style="color:white;text-decoration-line:none;"> 회원가입</a>
            <a href="/join" style="color:white;text-decoration-line:none;"> 회원가입</a>
         </form>
         </form>
-        
+
       </div>
       </div>
     </div>
     </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="/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>
   <a href="/kakaologin" class="btn btn-block btn-lg btn-warning btn_login">KaKao</a>
   </div>
   </div>
- 
- 
+
+
 </body>
 </body>
 </html>
 </html>
     `;
     `;
@@ -397,6 +397,7 @@ const getLoginButton = (auth) =>{
 
 
 //첫 페이지 화면
 //첫 페이지 화면
 const getFirstPage =(title, content, auth) =>{
 const getFirstPage =(title, content, auth) =>{
+<<<<<<< HEAD
   return `
   return `
   <!DOCTYPE html>
   <!DOCTYPE html>
   <html lang="en">
   <html lang="en">
@@ -420,6 +421,76 @@ const getFirstPage =(title, content, auth) =>{
   </body>
   </body>
   </html>
   </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
 
 
 }
 }
-

+
+const express = require('express');
+const session = require('express-session');
+const passport = require('passport'), LocalStrategy = require('passport-local').Strategy;
+const fs=require('fs');
+const router = express.Router()
+const fileStore = require('session-file-store')(session);
+const app = express();
+var flash = require('connect-flash'); 
+var NaverStrategy = require('passport-naver').Strategy;
+var KakaoStrategy = require('passport-kakao').Strategy;
+
+
+
+
+//Middle Ware list
+app.use(express.urlencoded({extended:false}));
+app.use(session({
+    secret: 'secret key',
+    resave: false,
+    saveUninitialized: false,
+    store : new fileStore()
+  }));
+app.use(passport.initialize());
+app.use(passport.session());
+app.use(flash());
+
+
+
+//사용자 정보 세션 읽기, 쓰기
+passport.serializeUser(function(user, done) {   //쓰기
+    done(null, user.email);
+});
+
+passport.deserializeUser(function(id, done) {   //읽기
+    done(null, id);
+});
+
+//첫 페이지
+app.get('/',(req,res)=>{
+    let page = getFirstPage('Passport','This is Passport Example Page',authInfo(req));
+    res.send(page);
+});
+
+//메인 페이지
+//Express에서 정적파일(ex: main.html, main.js)들을 사용할경우
+//경로를 미리 제시해 주는 부분
+app.use(express.static(__dirname + '/main'));
+
+app.get('/main',(req,res)=>{
+    res.sendFile(__dirname+'/main/main.html')
+})
+
+
+/*--------------------로그인 처리---------------------- */
+
+//로그인 페이지
+app.get('/login',(req,res)=>{
+    let page =  getLoginButton(`<a href="/">뒤로가기</a>`);
+    res.send(page);   
+});
+
+
+
+//로그인 인증 (Passport)
+passport.use(new LocalStrategy({
+        //로그인 페이지 input 태그 내 name
+        usernameField: 'email',
+        passwordField: 'password'
+    },
+  (id, password, done)=>{
+      console.log(id,password);
+    //회원 정보가 한개이상 있을때
+    if(user){
+      console.log(user);
+
+        //아이디가 다를때
+        if (id !== user.email){  
+            //alert("존재하는 아이디가 없습니다.")
+            return done(null, false, { message: '아이디가 다르다' });}
+        //비밀번호가 다를때
+        else if (password !== user.password) {
+            //alert("비밀번호가 다릅니다.");
+            return done(null, false, { message: '비번이 다르다' });}
+        //아이디, 비밀번호 모두 맞을 경우
+        return done(null, user);
+    }
+}));
+
+//로그인 처리 (Passport)
+app.post('/login',
+passport.authenticate('local', { 
+    //성공시, 메인페이지 이동
+    //실패시 로그인 페이지 이동
+    successRedirect: '/',
+    failureRedirect: '/login',
+    badRequestMessage : 'Missing username or password.',
+    failureFlash: true 
+}));
+
+//로그 아웃 처리
+app.get('/logout',(req,res)=>{
+    
+  //passport 정보 삭제
+  req.logout();
+  //서버측 세션 삭제
+  req.session.destroy(()=>{
+      //클라이언트 측 세션 암호화 쿠키 삭제
+      res.cookie('connect.sid','',{maxAge:0});
+      res.redirect('/');
+  });
+});
+
+
+//로그인 로그아웃 여부
+const authInfo = (req)=>{
+  if(req.user)
+  {
+    return `${user.name} | <a href="/logout">로그아웃</a>`;}
+  else
+  return `<a href="/login">로그인</a>`;
+}
+
+// naver 로그인
+app.get('/naverlogin', passport.authenticate('naver'));
+passport.use('naver',new NaverStrategy({
+  clientID: 'CGVVomc0bhMhzfzbytK2', 
+  clientSecret: 'XHylcjnZxG', 
+  callbackURL: "http://localhost:3000/",
+  svcType: 0,
+  authType: 'reauthenticate'  // enable re-authentication
+ }, 
+ 
+ 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'));
+passport.use('kakao-login', new KakaoStrategy({
+  clientID: '8a854307a99092b4eeeff5e4a79c0ac0',
+  callbackURL: 'http://localhost:3000/'
+},
+function (accessToken, refreshToken, profile, done) {
+  var _profile = profile._json;
+  console.log(_profile.id);
+  console.log(_profile.properties.nickname);
+
+}
+));
+
+
+/*--------------------회원가입 처리---------------------- */
+
+
+//회원가입 처리 Post
+var user = {};
+app.post('/join',(req,res)=>{
+  user.email = req.body.email;
+  user.password = req.body.password;
+  user.name=req.body.name;
+  //로그인 페이지로 이동
+  console.log(user);
+  res.redirect('/login');
+});
+
+
+
+
+
+//회원가입 페이지 Get
+app.get('/join',(req,res)=>{
+  let page = getPage('회원가입',`
+  <html>
+  <head>
+  <script> function congratulation()
+      {
+          alert("새로운 회원이 되신걸 축하합니다!:D \n 레시피 찾을 준비 되셨나요?");
+      } </script>
+  <style>
+  body {
+    padding-top: 15px;
+    font-size: 12px
+  }
+  .main {
+    max-width: 320px;
+    margin-top:300px auto;
+    margin: 0 auto;
+  }
+  .login-or {
+    position: relative;
+    font-size: 18px;
+    color: rgb(7, 7, 7);
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  .span-or {
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: -2px;
+    margin-left: -25px;
+    background-color: #fff;
+    width: 50px;
+    text-align: center;
+  }
+  .hr-or {
+    background-color: #cdcdcd;
+    height: 1px;
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+  }
+  h3 {
+    text-align: center;
+    line-height: 300%;
+    margin-top:10px auto;
+  }
+  img{
+      width:320px;
+      height:150px;
+      object-fit:cover;
+      margin-bottom:30px;
+  }
+  </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>
+  <div class="container">
+  <div class="row">
+    <div class="main">
+    <img src="https://images.unsplash.com/photo-1600577916048-804c9191e36c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80" alt=""/>
+      <h3>Sign-Up</h3>
+  <form action="/join" method="post">
+  <div class="form-group">
+      <input type="email" class="form-control" name="email" placeholder="email"><br>
+  </div>
+  <div class="form-group">
+      <input type="password" name="password" class="form-control" placeholder="****"><br>
+  </div>
+  <div class="form-group">
+      <input type="name" name="name" class="form-control" placeholder="이름"><br>
+  </div>
+      <button type="submit" value="회원가입" class="btn btn btn-primary" onClick="javascript:congratulation()">
+      회원가입
+      </button>
+  </form>
+  </html>
+  
+  `,'<a href="/login">뒤로가기</a>');
+  res.send(page);
+});
+
+
+
+//포트 연결
+app.listen(3000,()=>console.log(`http://localhost:3000`));
+
+
+
+//페이지 템플릿
+const getPage = (title, content, auth) =>{
+    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>
+    </head>
+    <body>
+    ${auth}
+        <h1>${title}</h1>
+        <p>${content}</p>
+    </body>
+    </html>
+    `;
+}
+
+//로그인 버튼
+const getLoginButton = (auth) =>{
+    return `
+    <!DOCTYPE html>
+    <html>
+    <head>
+    <style>
+    body {
+        padding-top: 15px;
+        font-size: 12px
+      }
+      .main {
+        max-width: 320px;
+        margin-top:300px auto;
+        margin: 0 auto;
+      }
+      .login-or {
+        position: relative;
+        font-size: 18px;
+        color: rgb(7, 7, 7);
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+      .span-or {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: -2px;
+        margin-left: -25px;
+        background-color: #fff;
+        width: 50px;
+        text-align: center;
+      }
+      .hr-or {
+        background-color: #cdcdcd;
+        height: 1px;
+        margin-top: 0px !important;
+        margin-bottom: 0px !important;
+      }
+      h3 {
+        text-align: center;
+        line-height: 300%;
+        margin-top:10px auto;
+      }
+      img{
+          width:300px;
+          height:150px;
+          object-fit:cover;
+          margin-bottom:30px;
+      }
+      </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>
+    <script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
+    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
+    <title><%= title %></title>
+    </head>
+    <body>
+    ${auth}
+    <div class="container">
+    <div class="row">
+      <div class="main">
+      <img src="https://i.ibb.co/k2zSVcn/142437038-e7b564cb-978a-4018-8834-9984cc3b119e.png" alt=""/>
+      <!--이미지 아래부분이 살짝 잘림 -->
+      <!--로그인,회원가입버튼 오른쪽 맞추는게 더 깔끔할거같음 -->
+
+        <h3>Login</h3>
+        <form role="form" method="POST" action="/login">
+          <div class="form-group">
+            <label for="userId">아이디</label>
+            <input type="text" class="form-control" id="email" name="email">
+          </div>
+          <div class="form-group">
+            <label for="password">비밀번호</label>
+            <input type="password" class="form-control" id="password" name="password">
+          </div>
+          <button type="submit" class="btn btn btn-primary">
+            로그인
+          </button>
+            <button type="submit" class="btn btn btn-primary">
+           <a href="/join" style="color:white;text-decoration-line:none;"> 회원가입</a>
+        </form>
+        
+      </div>
+    </div>
+  </div>
+
+  <div>
+  <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>
+    `;
+}
+
+
+//첫 페이지 화면
+const getFirstPage =(title, content, auth) =>{
+    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>
+    </head>
+    <body>
+    ${auth}
+        <h1>${title}</h1>
+        <p>${content}</p>
+        <div>
+        <input type="button" value="page move" onClick="movepage()"/>
+        </div>
+        <script type="text/javascript">
+        function movepage(){
+            location.href="main";
+        }</script>
+    </body>
+    </html>
+    `;
+
+}
+

@@ -4,23 +4,69 @@
     box-sizing:border-box;    
     box-sizing:border-box;    
 }
 }
 .containter{
 .containter{
+    position:relative;
     width:90%;
     width:90%;
     height:auto;
     height:auto;
     max-width:1200px;
     max-width:1200px;
-    margin:0 auto;
+    margin:0;/*auto*/
+    color:black;
 }
 }
 form{
 form{
-    width:50%;
-    max-width:400px;
+    width:90%;
     border-radius:4px;
     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%;
     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{
 form ion-icon{
     width:9%;
     width:9%;
     font-size:3rem;
     font-size:3rem;
-    margin:-15px;
+    margin-left:10px;
+    margin-top:15px;
     color:rgb(75,75,75);
     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;    
+}

-    
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>Document</title>
-      <link rel="style sheet" href="main.css">
-    </head>
-    <body>
-      <section>
-        <div class="container">
-          <h1 class="brand">Recipe APP</h1>
-          <div class="serach-box">
-          <form>
-            <input id="name" type="text" placeholder="Search Your Recipe...">
-            <ion-icon name="search"></ion-icon>
-          </form>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+  <section>
+    <div class="container">
+      <h1 class="brand">Recipe APP</h1>
+      <form>
+        <input id="name" type="text" placeholder="Search Your Recipe...">
+        <ion-icon name="search"></ion-icon>
+      </form>
+      <div class="search-result">
+        <!--<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>
-          <div class="search-result">
-            <!--<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>
-              <p class="item-data">Calories: 120</p>
-            </div>-->
-          </div>
-        </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>
+          <p class="item-data">Calories: 120</p>
+        </div>-->
+      </div>
+    </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>

@@ -12,7 +12,7 @@ searchForm.addEventListener('submit', function(event){
     event.preventDefault();
     event.preventDefault();
   }
   }
   else{
   else{
-    event.preventDefault(); 
+    event.preventDefault();
     searchQuery = event.target.querySelector('input').value;
     searchQuery = event.target.querySelector('input').value;
     fetchAPI();
     fetchAPI();
   }
   }
@@ -27,6 +27,9 @@ async function fetchAPI(){
 function boxinfo(results){
 function boxinfo(results){
   let boxsinfo ='';
   let boxsinfo ='';
   results.map(result => {
   results.map(result => {
+  const object = {
+  	  cal: result.recipe.calories.toFixed(0)
+  };
     boxsinfo +=
     boxsinfo +=
     `
     `
     <style>
     <style>
@@ -34,25 +37,35 @@ function boxinfo(results){
       display:flex;
       display:flex;
       flex-wrap:wrap;
       flex-wrap:wrap;
       margin-left:50px auto;
       margin-left:50px auto;
-    } 
+    }
     .container{
     .container{
       display:flex;
       display:flex;
       flex-wrap:wrap;
       flex-wrap:wrap;
       margin-left:50px auto;
       margin-left:50px auto;
-
-    } 
+    }
     <!--검색결과사진,레시피정보 모두 검색창 옆으로 가게하는거까지는 되었고 2열씩 정렬하려 했는데 2열 정렬 부분이 미완성. 우선 사진 옆으로 정보만 수평으로 뜸-->
     <!--검색결과사진,레시피정보 모두 검색창 옆으로 가게하는거까지는 되었고 2열씩 정렬하려 했는데 2열 정렬 부분이 미완성. 우선 사진 옆으로 정보만 수평으로 뜸-->
     <!--검색결과 뜰 시에 검색창 위치가 바뀌는 문제 있음-->
     <!--검색결과 뜰 시에 검색창 위치가 바뀌는 문제 있음-->
-
-    
     </style>
     </style>
     <div class="item">
     <div class="item">
       <img src="${result.recipe.image}" alt="">
       <img src="${result.recipe.image}" alt="">
       <div class="flex-container">
       <div class="flex-container">
         <h1 class="title">${result.recipe.label}</h1>
         <h1 class="title">${result.recipe.label}</h1>
         <a href="${result.recipe.url}" target="_blank">View Recipe</a>
         <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>
       </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>
     </div>
     `
     `
   })
   })

+{"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