구희연 / Food_recipe_info

Go to a project
Toggle navigation Toggle navigation pinning
Heeyeon
b256d819 1 parent ccd72f86

Making files to show various foreign foods videos and Modifying intro page

Expand all
Inline Side-by-side
Showing 15 changed files with 510 additions and 88 deletions
...@@ -6,7 +6,7 @@ const fs=require('fs'); ...@@ -6,7 +6,7 @@ const fs=require('fs');
6 const router = express.Router() 6 const router = express.Router()
7 const fileStore = require('session-file-store')(session); 7 const fileStore = require('session-file-store')(session);
8 const app = express(); 8 const app = express();
9 -var flash = require('connect-flash'); 9 +var flash = require('connect-flash');
10 var NaverStrategy = require('passport-naver').Strategy; 10 var NaverStrategy = require('passport-naver').Strategy;
11 var KakaoStrategy = require('passport-kakao').Strategy; 11 var KakaoStrategy = require('passport-kakao').Strategy;
12 12
...@@ -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(' 오늘뭐먹지','아직도 먹는게<br>고민된다면..?',authInfo(req));
42 res.send(page); 42 res.send(page);
43 }); 43 });
44 44
...@@ -51,13 +51,18 @@ app.get('/main',(req,res)=>{ ...@@ -51,13 +51,18 @@ app.get('/main',(req,res)=>{
51 res.sendFile(__dirname+'/main/main.html') 51 res.sendFile(__dirname+'/main/main.html')
52 }) 52 })
53 53
54 +//youtube html
55 +app.use(express.static(__dirname + '/youtube'));
56 +
57 +
58 +
54 59
55 /*--------------------로그인 처리---------------------- */ 60 /*--------------------로그인 처리---------------------- */
56 61
57 //로그인 페이지 62 //로그인 페이지
58 app.get('/login',(req,res)=>{ 63 app.get('/login',(req,res)=>{
59 let page = getLoginButton(`<a href="/">뒤로가기</a>`); 64 let page = getLoginButton(`<a href="/">뒤로가기</a>`);
60 - res.send(page); 65 + res.send(page);
61 }); 66 });
62 67
63 68
...@@ -75,7 +80,7 @@ passport.use(new LocalStrategy({ ...@@ -75,7 +80,7 @@ passport.use(new LocalStrategy({
75 console.log(user); 80 console.log(user);
76 81
77 //아이디가 다를때 82 //아이디가 다를때
78 - if (id !== user.email){ 83 + if (id !== user.email){
79 //alert("존재하는 아이디가 없습니다.") 84 //alert("존재하는 아이디가 없습니다.")
80 return done(null, false, { message: '아이디가 다르다' });} 85 return done(null, false, { message: '아이디가 다르다' });}
81 //비밀번호가 다를때 86 //비밀번호가 다를때
...@@ -89,18 +94,18 @@ passport.use(new LocalStrategy({ ...@@ -89,18 +94,18 @@ passport.use(new LocalStrategy({
89 94
90 //로그인 처리 (Passport) 95 //로그인 처리 (Passport)
91 app.post('/login', 96 app.post('/login',
92 -passport.authenticate('local', { 97 +passport.authenticate('local', {
93 //성공시, 메인페이지 이동 98 //성공시, 메인페이지 이동
94 //실패시 로그인 페이지 이동 99 //실패시 로그인 페이지 이동
95 successRedirect: '/', 100 successRedirect: '/',
96 failureRedirect: '/login', 101 failureRedirect: '/login',
97 badRequestMessage : 'Missing username or password.', 102 badRequestMessage : 'Missing username or password.',
98 - failureFlash: true 103 + failureFlash: true
99 })); 104 }));
100 105
101 //로그 아웃 처리 106 //로그 아웃 처리
102 app.get('/logout',(req,res)=>{ 107 app.get('/logout',(req,res)=>{
103 - 108 +
104 //passport 정보 삭제 109 //passport 정보 삭제
105 req.logout(); 110 req.logout();
106 //서버측 세션 삭제 111 //서버측 세션 삭제
...@@ -124,20 +129,20 @@ const authInfo = (req)=>{ ...@@ -124,20 +129,20 @@ const authInfo = (req)=>{
124 // naver 로그인 129 // naver 로그인
125 app.get('/naverlogin', passport.authenticate('naver')); 130 app.get('/naverlogin', passport.authenticate('naver'));
126 passport.use('naver',new NaverStrategy({ 131 passport.use('naver',new NaverStrategy({
127 - clientID: 'CGVVomc0bhMhzfzbytK2', 132 + clientID: 'CGVVomc0bhMhzfzbytK2',
128 - clientSecret: 'XHylcjnZxG', 133 + clientSecret: 'XHylcjnZxG',
129 callbackURL: "http://localhost:3000/", 134 callbackURL: "http://localhost:3000/",
130 svcType: 0, 135 svcType: 0,
131 authType: 'reauthenticate' // enable re-authentication 136 authType: 'reauthenticate' // enable re-authentication
132 - }, 137 + },
133 - 138 +
134 - function(accessToken, refreshToken, profile, done) { 139 + function(accessToken, refreshToken, profile, done) {
135 var _profile = profile._json; 140 var _profile = profile._json;
136 console.log(_profile.id); 141 console.log(_profile.id);
137 console.log(_profile.properties.nickname); 142 console.log(_profile.properties.nickname);
138 - } 143 + }
139 )); 144 ));
140 - 145 +
141 146
142 // kakao 로그인 147 // kakao 로그인
143 app.get('/kakaologin', passport.authenticate('kakao-login')); 148 app.get('/kakaologin', passport.authenticate('kakao-login'));
...@@ -230,7 +235,7 @@ app.get('/join',(req,res)=>{ ...@@ -230,7 +235,7 @@ app.get('/join',(req,res)=>{
230 </style><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> 235 </style><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
231 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 236 <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
232 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 237 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
233 - 238 +
234 </head> 239 </head>
235 240
236 <body> 241 <body>
...@@ -254,12 +259,13 @@ app.get('/join',(req,res)=>{ ...@@ -254,12 +259,13 @@ app.get('/join',(req,res)=>{
254 </button> 259 </button>
255 </form> 260 </form>
256 </html> 261 </html>
257 - 262 +
258 `,'<a href="/login">뒤로가기</a>'); 263 `,'<a href="/login">뒤로가기</a>');
259 res.send(page); 264 res.send(page);
260 }); 265 });
261 266
262 267
268 +
263 //포트 연결 269 //포트 연결
264 app.listen(3000,()=>console.log(`http://localhost:3000`)); 270 app.listen(3000,()=>console.log(`http://localhost:3000`));
265 271
...@@ -280,17 +286,9 @@ const getPage = (title, content, auth) =>{ ...@@ -280,17 +286,9 @@ const getPage = (title, content, auth) =>{
280 ${auth} 286 ${auth}
281 <h1>${title}</h1> 287 <h1>${title}</h1>
282 <p>${content}</p> 288 <p>${content}</p>
283 - <div>
284 - <input type="button" value="page move" onClick="movepage()"/>
285 - </div>
286 - <script type="text/javascript">
287 - function movepage(){
288 - location.href="main";
289 - }</script>
290 </body> 289 </body>
291 </html> 290 </html>
292 - ` 291 + `;
293 -
294 } 292 }
295 293
296 //로그인 버튼 294 //로그인 버튼
...@@ -378,7 +376,7 @@ const getLoginButton = (auth) =>{ ...@@ -378,7 +376,7 @@ const getLoginButton = (auth) =>{
378 <button type="submit" class="btn btn btn-primary"> 376 <button type="submit" class="btn btn btn-primary">
379 <a href="/join" style="color:white;text-decoration-line:none;"> 회원가입</a> 377 <a href="/join" style="color:white;text-decoration-line:none;"> 회원가입</a>
380 </form> 378 </form>
381 - 379 +
382 </div> 380 </div>
383 </div> 381 </div>
384 </div> 382 </div>
...@@ -387,8 +385,8 @@ const getLoginButton = (auth) =>{ ...@@ -387,8 +385,8 @@ const getLoginButton = (auth) =>{
387 <a href="/naverlogin" class="btn btn-block btn-lg btn-success btn_login">Naver</a> 385 <a href="/naverlogin" class="btn btn-block btn-lg btn-success btn_login">Naver</a>
388 <a href="/kakaologin" class="btn btn-block btn-lg btn-warning btn_login">KaKao</a> 386 <a href="/kakaologin" class="btn btn-block btn-lg btn-warning btn_login">KaKao</a>
389 </div> 387 </div>
390 - 388 +
391 - 389 +
392 </body> 390 </body>
393 </html> 391 </html>
394 `; 392 `;
...@@ -404,14 +402,135 @@ const getFirstPage =(title, content, auth) =>{ ...@@ -404,14 +402,135 @@ const getFirstPage =(title, content, auth) =>{
404 <meta charset="UTF-8"> 402 <meta charset="UTF-8">
405 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 403 <meta http-equiv="X-UA-Compatible" content="IE=edge">
406 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 404 <meta name="viewport" content="width=device-width, initial-scale=1.0">
407 - <title>Passport Example</title> 405 + <title>Food_recipe_Info</title>
406 + <style>
407 + @import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
408 + body{
409 + height: 100vh;
410 + 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');
411 + background-position: center;
412 + background-repeat: no-repeat;
413 + background-size: cover;
414 + background-attachment: scroll;
415 + }
416 +
417 + .hey {
418 + position: relative;
419 + left: 50%;
420 + top: 33%;
421 + transform: translate(-50%, -47%);
422 + text-align: center;
423 + font-size: 8em;
424 + font-family: 'Nanum Pen Script', cursive;
425 + }
426 + p {
427 + position: relative;
428 + left: 50%;
429 + top: 31%;
430 + transform: translate(-50%, -47%);
431 + font-size: 4em;
432 + text-align: center;
433 + font-family: 'Nanum Pen Script', cursive;
434 + }
435 + div {
436 + position: relative;
437 + font-size: 1.3em;
438 + text-align: center;
439 + }
440 + .box1{
441 + position: relative;
442 + left: 50%;
443 + top: 40%;
444 + transform: translate(-50%, -50%);
445 + }
446 + .box2{
447 + position: absolute;
448 + left: 50%;
449 + top: 77%;
450 + transform: translate(-50%, -54%);
451 + }
452 + </style>
453 + <!-- Bootstrap cdn 설정 -->
454 +<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
455 +<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
456 +<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
457 +<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
458 +<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
459 +
408 </head> 460 </head>
409 <body> 461 <body>
410 - ${auth} 462 + <!-- 네비게이션(nav) 컨트롤에 사요하는 드롭다운. -->
411 - <h1>${title}</h1> 463 + <div style="margin:20px;">
464 + <nav id="navbar-example" class="navbar navbar-default navbar-static">
465 + <div class="container-fluid">
466 + <!-- 네비게이션(nav)의 기본 설정으로 모바일일 때, 메뉴 버튼이 나온다. -->
467 + <div class="navbar-header">
468 + <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
469 + <span class="sr-only">Toggle navigation</span>
470 + <span class="icon-bar"></span>
471 + <span class="icon-bar"></span>
472 + <span class="icon-bar"></span>
473 + </button>
474 + <!-- 타이틀임. -->
475 + <a class="navbar-brand" href="#">카테고리</a>
476 + </div>
477 + <!-- 메뉴 설정 -->
478 + <div class="collapse navbar-collapse">
479 + <!-- 메뉴는 왼쪽으로 두개 설정 -->
480 + <ul class="nav navbar-nav">
481 +
482 + <li>
483 + <a href="#" class="dropdown-toggle" data-toggle="dropdown">
484 + Asian Food
485 + <!-- 아래 화살표 -->
486 + <span class="caret"></span>
487 + </a>
488 + <ul class="dropdown-menu">
489 + <li><a href="Japan.html">Japanese Food</a></li>
490 + <li><a href="China.html">Chinese Food</a></li>
491 + <li><a href="Korea.html">Korean Food</a></li>
492 + </ul>
493 + </li>
494 +
495 + <li>
496 + <a href="#" class="dropdown-toggle" data-toggle="dropdown">
497 + American Food
498 + <!-- 아래 화살표 -->
499 + <span class="caret"></span>
500 + </a>
501 + <ul class="dropdown-menu">
502 + <li><a href="America.html">US Food</a></li>
503 + <li><a href="Mexico.html">Mexican Food</a></li>
504 + </ul>
505 + </li>
506 + </ul>
507 + <!-- 메뉴를 오른쪽 정렬로 설정 가능 -->
508 + <ul class="nav navbar-nav navbar-right">
509 + <!-- 메뉴 이름은 Right!로 서브 옵션은 Test5와 Test6가 있다. -->
510 + <li>
511 + <a href="#" class="dropdown-toggle" data-toggle="dropdown">
512 + European Food
513 + <!-- 아래 화살표 -->
514 + <span class="caret"></span>
515 + </a>
516 + <ul class="dropdown-menu">
517 + <li><a href="Italy.html">Italian Food</a></li>
518 + <li><a href="France.html">French Food</a></li>
519 +
520 + </ul>
521 + </li>
522 + </ul>
523 + </div>
524 + </div>
525 + </nav>
526 + </div>
527 + <div class="hey">${title}</div>
412 <p>${content}</p> 528 <p>${content}</p>
413 - <div> 529 + <div class="box1">
414 - <input type="button" value="page move" onClick="movepage()"/> 530 + ${auth}
531 + </div>
532 + <div class="box2">
533 + <input type="button" value="레시피 보러가기" onClick="movepage()"/>
415 </div> 534 </div>
416 <script type="text/javascript"> 535 <script type="text/javascript">
417 function movepage(){ 536 function movepage(){
...@@ -420,6 +539,4 @@ const getFirstPage =(title, content, auth) =>{ ...@@ -420,6 +539,4 @@ const getFirstPage =(title, content, auth) =>{
420 </body> 539 </body>
421 </html> 540 </html>
422 `; 541 `;
423 - 542 +}
424 -}
425 -
...\ No newline at end of file ...\ No newline at end of file
......
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 }
...\ No newline at end of file ...\ No newline at end of file
......
1 - 1 +<!DOCTYPE html>
2 - <!DOCTYPE html> 2 +<html lang="en">
3 - <html lang="en"> 3 +<head>
4 - <head> 4 + <meta charset="UTF-8">
5 - <meta charset="UTF-8"> 5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 + <title>Document</title>
7 - <title>Document</title> 7 + <link rel="stylesheet" href="main.css">
8 - <link rel="style sheet" href="main.css"> 8 +</head>
9 - </head> 9 +<body>
10 - <body> 10 + <section>
11 - <section> 11 + <div class="container">
12 - <div class="container"> 12 + <h1 class="brand">Recipe APP</h1>
13 - <h1 class="brand">Recipe APP</h1> 13 + <form>
14 - <div class="serach-box"> 14 + <input id="name" type="text" placeholder="Search Your Recipe...">
15 - <form> 15 + <ion-icon name="search"></ion-icon>
16 - <input id="name" type="text" placeholder="Search Your Recipe..."> 16 + </form>
17 - <ion-icon name="search"></ion-icon> 17 + <div class="search-result">
18 - </form> 18 + <!--<div class="item">
19 + <img src="./0.jpg" alt="">
20 + <div class="flex-container">
21 + <h1 class="title">This is a recipe</h1>
22 + <a href="#">View Recipe</a>
19 </div> 23 </div>
20 - <div class="search-result"> 24 + <p class="item-data">Calories: 120</p>
21 - <!--<div class="item"> 25 + </div>-->
22 - <img src="./0.jpg" alt=""> 26 + </div>
23 - <div class="flex-container"> 27 + </div>
24 - <h1 class="title">This is a recipe</h1> 28 + </section>
25 - <a href="#">View Recipe</a> 29 + <script src="./main.js"></script>
26 - </div> 30 + <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
27 - <p class="item-data">Calories: 120</p> 31 + <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
28 - </div>--> 32 +</body>
29 - </div> 33 +</html>
30 - </div>
31 - </section>
32 - <script src="./main.js"></script>
33 - <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>
35 - </body>
36 - </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -12,7 +12,7 @@ searchForm.addEventListener('submit', function(event){ ...@@ -12,7 +12,7 @@ searchForm.addEventListener('submit', function(event){
12 event.preventDefault(); 12 event.preventDefault();
13 } 13 }
14 else{ 14 else{
15 - event.preventDefault(); 15 + event.preventDefault();
16 searchQuery = event.target.querySelector('input').value; 16 searchQuery = event.target.querySelector('input').value;
17 fetchAPI(); 17 fetchAPI();
18 } 18 }
...@@ -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>
...@@ -34,25 +37,35 @@ function boxinfo(results){ ...@@ -34,25 +37,35 @@ function boxinfo(results){
34 display:flex; 37 display:flex;
35 flex-wrap:wrap; 38 flex-wrap:wrap;
36 margin-left:50px auto; 39 margin-left:50px auto;
37 - } 40 + }
38 .container{ 41 .container{
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 - 45 + }
43 - }
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":"/"},"passport":{"user":"rndus0819@khu.ac.kr"},"__lastAccess":1638718630697}
...\ No newline at end of file ...\ No newline at end of file
1 +{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"passport":{"user":"hoho@naver.com"},"__lastAccess":1638877179279}
...\ No newline at end of file ...\ No newline at end of file
......
1 +{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"flash":{"error":["Missing username or password."]},"__lastAccess":1638870919590}
...\ No newline at end of file ...\ No newline at end of file
1 +{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"flash":{"error":["Missing username or password."]},"__lastAccess":1638876058479}
...\ No newline at end of file ...\ No newline at end of file
1 -<script src="https://code.jquery.com/jquery-3.0.0.js"></script> 1 +<!DOCTYPE html>
2 +<html>
3 +<body>
2 4
5 +<div><h1>미국 음식</h1></div>
6 +<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
3 <script type="text/javascript"> 7 <script type="text/javascript">
4 8
5 9
6 10
7 let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak"; 11 let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
8 12
9 -let keyword ="일식"; 13 +let keyword ="미국 음식";
10 14
11 15
12 16
...@@ -31,4 +35,6 @@ $.ajax({ ...@@ -31,4 +35,6 @@ $.ajax({
31 35
32 36
33 37
34 -</script>
...\ No newline at end of file ...\ No newline at end of file
38 +</script>
39 +</body>
40 +</html>
...\ No newline at end of file ...\ No newline at end of file
......
1 +<!DOCTYPE html>
2 +<html>
3 +<body>
4 +
5 +<div><h1>중국 음식</h1></div>
6 +<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
7 +<script type="text/javascript">
8 +
9 +
10 +
11 +let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
12 +
13 +let keyword ="중국 음식";
14 +
15 +
16 +
17 +$.ajax({
18 +
19 + url:'https://www.googleapis.com/youtube/v3/search',
20 +
21 + type:'get',
22 +
23 + dataType:'json',
24 +
25 + data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},
26 +
27 + success:function (data){
28 +
29 + console.log(data);
30 + data.items.forEach(function(element,index){$('body').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+' " frameborder="0" allow="accelerometer; autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></ifreame>');});
31 + },
32 + complete:function(data){},
33 + error:function(xhr,status,error){}
34 +});
35 +
36 +
37 +
38 +</script>
39 +</body>
40 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 +<body>
4 +
5 +<div><h1>프랑스 음식</h1></div>
6 +
7 +<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
8 +<script type="text/javascript">
9 +
10 +
11 +
12 +let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
13 +let keyword ="프랑스 음식";
14 +
15 +
16 +
17 +$.ajax({
18 +
19 + url:'https://www.googleapis.com/youtube/v3/search',
20 +
21 + type:'get',
22 +
23 + dataType:'json',
24 +
25 + data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},
26 +
27 + success:function (data){
28 +
29 + console.log(data);
30 + data.items.forEach(function(element,index){$('body').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+' " frameborder="0" allow="accelerometer; autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></ifreame>');});
31 + },
32 + complete:function(data){},
33 + error:function(xhr,status,error){}
34 +});
35 +
36 +
37 +
38 +</script>
39 +</body>
40 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 +<body>
4 +
5 +<div><h1>이탈리아 음식</h1></div>
6 +
7 +<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
8 +<script type="text/javascript">
9 +
10 +
11 +
12 +let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
13 +let keyword ="이탈리아 음식";
14 +
15 +
16 +
17 +$.ajax({
18 +
19 + url:'https://www.googleapis.com/youtube/v3/search',
20 +
21 + type:'get',
22 +
23 + dataType:'json',
24 +
25 + data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},
26 +
27 + success:function (data){
28 +
29 + console.log(data);
30 + data.items.forEach(function(element,index){$('body').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+' " frameborder="0" allow="accelerometer; autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></ifreame>');});
31 + },
32 + complete:function(data){},
33 + error:function(xhr,status,error){}
34 +});
35 +
36 +
37 +
38 +</script>
39 +</body>
40 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 +<body>
4 +
5 +<div><h1>일본 음식</h1></div>
6 +<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
7 +<script type="text/javascript">
8 +
9 +
10 +
11 +let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
12 +
13 +let keyword ="일본 음식";
14 +
15 +
16 +
17 +$.ajax({
18 +
19 + url:'https://www.googleapis.com/youtube/v3/search',
20 +
21 + type:'get',
22 +
23 + dataType:'json',
24 +
25 + data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},
26 +
27 + success:function (data){
28 +
29 + console.log(data);
30 + data.items.forEach(function(element,index){$('body').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+' " frameborder="0" allow="accelerometer; autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></ifreame>');});
31 + },
32 + complete:function(data){},
33 + error:function(xhr,status,error){}
34 +});
35 +
36 +
37 +
38 +</script>
39 +</body>
40 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 +<body>
4 +
5 +<div><h1>한국 음식</h1></div>
6 +<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
7 +<script type="text/javascript">
8 +
9 +
10 +
11 +let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
12 +
13 +let keyword ="한국 음식";
14 +
15 +
16 +
17 +$.ajax({
18 +
19 + url:'https://www.googleapis.com/youtube/v3/search',
20 +
21 + type:'get',
22 +
23 + dataType:'json',
24 +
25 + data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},
26 +
27 + success:function (data){
28 +
29 + console.log(data);
30 + data.items.forEach(function(element,index){$('body').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+' " frameborder="0" allow="accelerometer; autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></ifreame>');});
31 + },
32 + complete:function(data){},
33 + error:function(xhr,status,error){}
34 +});
35 +
36 +
37 +
38 +</script>
39 +</body>
40 +</html>
1 +<!DOCTYPE html>
2 +<html>
3 +<body>
4 +
5 +<div><h1>멕시코 음식</h1></div>
6 +
7 +<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
8 +<script type="text/javascript">
9 +
10 +
11 +
12 +let apikey = "AIzaSyC1UDfc18D0ebNPMRjC6LW9vzTZZEXlJak";
13 +
14 +let keyword ="멕시코 음식";
15 +
16 +
17 +
18 +$.ajax({
19 +
20 + url:'https://www.googleapis.com/youtube/v3/search',
21 +
22 + type:'get',
23 +
24 + dataType:'json',
25 +
26 + data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},
27 +
28 + success:function (data){
29 +
30 + console.log(data);
31 + data.items.forEach(function(element,index){$('body').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+element.id.videoId+' " frameborder="0" allow="accelerometer; autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen></ifreame>');});
32 + },
33 + complete:function(data){},
34 + error:function(xhr,status,error){}
35 +});
36 +
37 +
38 +
39 +</script>
40 +</body>
41 +</html>