곽윤철 / youtube-comment-seperator

Go to a project
Toggle navigation Toggle navigation pinning
Yuncheol Kwak
002986e3 1 parent 05a172a9

Feat add design

Inline Side-by-side
Showing 1 changed file with 57 additions and 21 deletions
1 -var http = require('http'); 1 +const http = require('http');
2 -var fs = require('fs'); 2 +const fs = require('fs');
3 -var url = require('url'); 3 +const url = require('url');
4 -var testFolder = './data'; 4 +const testFolder = './data';
5 -var qs = require('querystring'); 5 +const qs = require('querystring');
6 -var path = require('path'); 6 +const path = require('path');
7 const {google} = require("googleapis"); 7 const {google} = require("googleapis");
8 const service = google.youtube('v3'); 8 const service = google.youtube('v3');
9 const apiKey = 'AIzaSyCjBrFKnBlGvxsfOD-qJP8nBkdEoqKRHu8'; //api키 9 const apiKey = 'AIzaSyCjBrFKnBlGvxsfOD-qJP8nBkdEoqKRHu8'; //api키
...@@ -27,23 +27,42 @@ function showcomment(response, VideoNum){ ...@@ -27,23 +27,42 @@ function showcomment(response, VideoNum){
27 <head> 27 <head>
28 <title>Youtube Comment</title> 28 <title>Youtube Comment</title>
29 <meta charset="utf-8"> 29 <meta charset="utf-8">
30 + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
31 + <link rel="preconnect" href="https://fonts.googleapis.com">
32 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
33 + <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
34 + <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
30 </head> 35 </head>
31 - <body> 36 + <body style="margin:5%">
37 + <h1 style="font-family: 'Permanent Marker', cursive; text-align:center; padding-bottom:1%;">Youtube Comment Seperator</h1>
32 <form action="http://localhost:3000/search" method="get"> 38 <form action="http://localhost:3000/search" method="get">
33 - <p> 39 + <div class="form-group" style="font-family: 'Ubuntu', sans-serif;">
34 - <textarea name="videourl" placeholder="Write your video Url" >${VideoNum}</textarea> 40 + <input type="text" name="videourl" placeholder="Type in video ID" class="form-control" style="margin-bottom:10px;">
35 - </p> 41 + <label for="language-select">Choose a language:</label>
36 - <p> 42 + <select class="form-control" name="languages" id="language-select" style="display:inline-flex;">
37 - <input type="submit"> 43 + <option value="all" selected>--Please choose an option--</option>
44 + <option value="ko">한국어</option>
45 + <option value="en">English</option>
46 + <option value="ja">日本語</option>
47 + <option value="zh-CN">中國語</option>
48 + <option value="es">español</option>
49 + <option value="fr">Français</option>
50 + <option value="de">Deutsch</option>
51 + </select>
52 + <p align="right" style="margin-top:1%">
53 + <button type="submit" class="btn btn-danger">Display Comments</button>
38 </p> 54 </p>
55 + </div>
39 </form> 56 </form>
40 <br> 57 <br>
41 <br> 58 <br>
42 - <iframe width="560" height="315" src="https://www.youtube.com/embed/${VideoNum}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 59 + <div class="embed-responsive embed-responsive-16by9" style="text-align:center;">
43 - 60 + <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/${VideoNum}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
61 + </div>
44 <br> 62 <br>
45 - <a href="http://localhost:3000/search?videourl=${VideoNum}&nextpage=${savednpt}"><input type="button" value="댓글 더 불러오기"></a> 63 + <a class="btn btn-dark" href="http://localhost:3000/search?videourl=${VideoNum}&nextpage=${savednpt}" role="button">Show more comments</a>
46 <br> 64 <br>
65 + <div id="results"></div>
47 ${commentDisplay} 66 ${commentDisplay}
48 </body> 67 </body>
49 </html> 68 </html>
...@@ -104,15 +123,32 @@ var app = http.createServer(function(request,response){ // request는 브라우 ...@@ -104,15 +123,32 @@ var app = http.createServer(function(request,response){ // request는 브라우
104 <head> 123 <head>
105 <title>Youtube Comment</title> 124 <title>Youtube Comment</title>
106 <meta charset="utf-8"> 125 <meta charset="utf-8">
126 + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
127 + <link rel="preconnect" href="https://fonts.googleapis.com">
128 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
129 + <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
130 + <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
107 </head> 131 </head>
108 - <body> 132 + <body style="margin:5%">
133 + <h1 style="font-family: 'Permanent Marker', cursive; text-align:center; padding-bottom:1%;">Youtube Comment Seperator</h1>
109 <form action="http://localhost:3000/search" method="get"> 134 <form action="http://localhost:3000/search" method="get">
110 - <p> 135 + <div class="form-group" style="font-family: 'Ubuntu', sans-serif;">
111 - <textarea name="videourl" placeholder="Write your video Url"></textarea> 136 + <input type="text" name="videourl" placeholder="Type in video ID" class="form-control" style="margin-bottom:10px;">
112 - </p> 137 + <label for="language-select">Choose a language:</label>
113 - <p> 138 + <select class="form-control" name="languages" id="language-select" style="display:inline-flex;">
114 - <input type="submit"> 139 + <option value="all" selected>--Please choose an option--</option>
140 + <option value="ko">한국어</option>
141 + <option value="en">English</option>
142 + <option value="ja">日本語</option>
143 + <option value="zh-CN">中國語</option>
144 + <option value="es">español</option>
145 + <option value="fr">Français</option>
146 + <option value="de">Deutsch</option>
147 + </select>
148 + <p align="right" style="margin-top:1%">
149 + <button type="submit" class="btn btn-danger">Display Comments</button>
115 </p> 150 </p>
151 + </div>
116 </form> 152 </form>
117 </body> 153 </body>
118 </html> 154 </html>
......