이해님 / term-project

Go to a project
Toggle navigation Toggle navigation pinning
haenim
10e00a6d 1 parent 2ec9d562

update design and display timeline by html

Inline Side-by-side
Showing 4 changed files with 52 additions and 20 deletions
...@@ -8,8 +8,8 @@ app.set('view engine', 'ejs'); //서버가 HTML 렌더링을 할 때, EJS 엔진 ...@@ -8,8 +8,8 @@ app.set('view engine', 'ejs'); //서버가 HTML 렌더링을 할 때, EJS 엔진
8 app.engine('html', require('ejs').renderFile); 8 app.engine('html', require('ejs').renderFile);
9 9
10 app.get('/timeline/:screen_name',tweetsController.getUserTweets); // '/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴 10 app.get('/timeline/:screen_name',tweetsController.getUserTweets); // '/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
11 -app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행 11 +//app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행
12 -app.get('/timeline/:screen_name',tweetsController.getUserRetweet);//'/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴 12 +//app.get('/hot/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
13 13
14 14
15 var server = app.listen(3000, function(){ //3000 포트 사용 15 var server = app.listen(3000, function(){ //3000 포트 사용
......
...@@ -15,7 +15,7 @@ exports.getUserTweets = async function(req, res){ ...@@ -15,7 +15,7 @@ exports.getUserTweets = async function(req, res){
15 if(!error){ 15 if(!error){
16 16
17 console.log(tweets); //가져온 타임라인 내용 콘솔창에 출력 17 console.log(tweets); //가져온 타임라인 내용 콘솔창에 출력
18 - res.render('timeline.html',tweets); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄 18 + res.render('timeline.html',{ timeline: tweets }); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
19 } 19 }
20 }); //아이디를 토대로 타임라인 가져오기 20 }); //아이디를 토대로 타임라인 가져오기
21 21
...@@ -25,6 +25,7 @@ exports.getUserTweets = async function(req, res){ ...@@ -25,6 +25,7 @@ exports.getUserTweets = async function(req, res){
25 res.sendStatus(500); 25 res.sendStatus(500);
26 } 26 }
27 } 27 }
28 +
28 exports.getUserSearch = async function(req, res){ 29 exports.getUserSearch = async function(req, res){
29 try{ 30 try{
30 let searchdata= client.get('search/tweets', req.params, function(error, tweets, response) {//search 31 let searchdata= client.get('search/tweets', req.params, function(error, tweets, response) {//search
...@@ -40,8 +41,7 @@ exports.getUserSearch = async function(req, res){ ...@@ -40,8 +41,7 @@ exports.getUserSearch = async function(req, res){
40 } 41 }
41 } 42 }
42 43
43 - 44 +exports.getUserRetweet = async function(req, res){ //인기있는 글
44 -exports.getUserRetweet = async function(req, res){
45 try{ 45 try{
46 let retweetdata = client.get('statuses/user_timeline', req.params, function(error, tweets, response) {//리트윗 46 let retweetdata = client.get('statuses/user_timeline', req.params, function(error, tweets, response) {//리트윗
47 if(!error){ 47 if(!error){
...@@ -49,7 +49,7 @@ exports.getUserRetweet = async function(req, res){ ...@@ -49,7 +49,7 @@ exports.getUserRetweet = async function(req, res){
49 return b.retweet_count-a.retweet_count; 49 return b.retweet_count-a.retweet_count;
50 });//리트윗 data 내림차순로 정렬(?) 50 });//리트윗 data 내림차순로 정렬(?)
51 console.log(tweets); 51 console.log(tweets);
52 - res.render('timeline.html',tweets); 52 + res.render('timeline.html',{timeline: tweets});
53 } 53 }
54 54
55 }); 55 });
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 } 28 }
29 </script> 29 </script>
30 </div> 30 </div>
31 - <span class="info">ex)@TwitterKorea </span> 31 + <span class="info">ex)TwitterKorea </span>
32 </form> 32 </form>
33 </div> 33 </div>
34 <script src="js/extention/choices.js"></script> 34 <script src="js/extention/choices.js"></script>
......
1 -<html>
2 1
2 +<html>
3 + <head>
4 + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
5 + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
6 + <style>
7 + body { background: #e1f5fe;}
8 + #search-box input{width:100%;border:0;height:60px;border-radius:25px;outline:none;padding-left:60px;line-height:61px;box-shadow:12px 12px 30px 0 rgba(77,77,119,.10);font-weight:500;color:#8ba2ad;}
9 + #search-box input::-webkit-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
10 + #search-box input::-moz-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
11 + #search-box input::-ms-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
12 + #search-box input::-moz-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
13 + #search-box .fa-globe{position:absolute;top:19px;left:22px;font-size:23px;color:#dcdee0;}
14 + #search-box .inline-search{position:absolute;top:10px;right:25px;}
15 + #search-box .inline-search #search-btn{background-image:linear-gradient(to right,#6A1B9A,#9C27B0);border:0;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;color:#fff;height:40px;width:40px;font-size:14px;border-radius:50px;outline:none !important;line-height:40px;cursor:pointer;box-shadow:3px 4px 31px 0 rgba(253, 165, 93, 0.54);margin-left:2px;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
16 + #search-box .inline-search #search-btn:hover{background-size:175% 100%;color:#fff;outline:none;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;}
17 + #search-box .inline-search #transfer-btn{background-image:linear-gradient(to right,#5c5cfd,#d65ffd);border:0;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;color:#fff;height:40px;width:40px;font-size:14px;border-radius:50px;outline:none !important;line-height:40px;cursor:pointer;box-shadow:3px 4px 31px 0 rgba(149, 94, 253, 0.45);-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
18 + #search-box .inline-search #transfer-btn:hover{background-size:175% 100%;color:#fff;outline:none;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;}
19 + </style>
20 + <script>
21 + function search(){
22 + document.write(timeline);
23 + }
24 + </script>
25 + </head>
3 <body> 26 <body>
4 - 27 + <!--검색창-->
5 -<script> 28 + <form method="post" action="" id="search-box" class="col-md-6 offset-md-3 mt-5">
6 -alert("Hello, world!"); 29 + <i class="fa fa-globe"></i>
7 - 30 + <input type="text" placeholder="키워드를 입력하세요" >
8 - 31 + <span class="inline-search">
9 -console.log(tweets); 32 + <button id="search-btn" type="submit" value="Search" onclick="search()">
10 - 33 + <i class="fa fa-search"></i>
11 - 34 +
12 -</script> 35 + </button>
13 - 36 + </span>
14 - 37 + </form>
38 +
39 + <!--타임라인 출력-->
40 + <div>
41 + <% for (var i=0; i<20; i++){ %>
42 + <div>
43 + <h4><%=timeline[i].user.name%></h4>
44 + <h4><%=timeline[i].text%></h4>
45 + </div>
46 + <% } %>
47 + </div>
15 </body> 48 </body>
16 -
17 </html> 49 </html>
...\ No newline at end of file ...\ No newline at end of file
......