구희연 / 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 463 additions and 41 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(' 오늘뭐먹지','아직도 먹는게<br>고민된다면..?',authInfo(req));
42 res.send(page); 42 res.send(page);
43 }); 43 });
44 44
...@@ -51,6 +51,11 @@ app.get('/main',(req,res)=>{ ...@@ -51,6 +51,11 @@ 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
...@@ -260,6 +265,7 @@ app.get('/join',(req,res)=>{ ...@@ -260,6 +265,7 @@ app.get('/join',(req,res)=>{
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 //로그인 버튼
...@@ -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 -
424 } 542 }
...\ No newline at end of file ...\ No newline at end of file
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 }
...\ 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>
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>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -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":"/"},"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
...@@ -32,3 +36,5 @@ $.ajax({ ...@@ -32,3 +36,5 @@ $.ajax({
32 36
33 37
34 </script> 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>