이해님 / term-project

Go to a project
Toggle navigation Toggle navigation pinning
haenim
44cb57cf 1 parent 88333440

add search bar and update timeline.html

Inline Side-by-side
Showing 6 changed files with 60 additions and 52 deletions
...@@ -919,7 +919,7 @@ html { ...@@ -919,7 +919,7 @@ html {
919 min-width: 216px; 919 min-width: 216px;
920 } 920 }
921 921
922 - .s130 form .inner-form .input-field.second-wrap .btn-search { 922 + .s130 form .inner-form .input-field.second-wrap .btn-search{
923 height: 100%; 923 height: 100%;
924 width: 100%; 924 width: 100%;
925 white-space: nowrap; 925 white-space: nowrap;
...@@ -934,11 +934,11 @@ html { ...@@ -934,11 +934,11 @@ html {
934 font-weight: 300; 934 font-weight: 300;
935 } 935 }
936 936
937 - .s130 form .inner-form .input-field.second-wrap .btn-search:hover { 937 + .s130 form .inner-form .input-field.second-wrap .btn-search:hover{
938 background: #4782cf; 938 background: #4782cf;
939 } 939 }
940 940
941 - .s130 form .inner-form .input-field.second-wrap .btn-search:focus { 941 + .s130 form .inner-form .input-field.second-wrap .btn-search:focus{
942 outline: 0; 942 outline: 0;
943 box-shadow: none; 943 box-shadow: none;
944 } 944 }
...@@ -974,7 +974,7 @@ html { ...@@ -974,7 +974,7 @@ html {
974 .s130 form .inner-form .input-field.second-wrap { 974 .s130 form .inner-form .input-field.second-wrap {
975 min-width: 100px; 975 min-width: 100px;
976 } 976 }
977 - .s130 form .inner-form .input-field.second-wrap .btn-search { 977 + .s130 form .inner-form .input-field.second-wrap .btn-search{
978 font-size: 13px; 978 font-size: 13px;
979 } 979 }
980 } 980 }
......
1 -var express = require('express'); //express 모듈 불러오기.. 1 +var express = require('express'); //express 모듈 불러오기
2 var app = express(); 2 var app = express();
3 const tweetsController = require('./twitter-controller'); 3 const tweetsController = require('./twitter-controller');
4 4
...@@ -7,21 +7,9 @@ app.set('views', __dirname + '/views'); //서버가 읽을 수 있도록 HTML ...@@ -7,21 +7,9 @@ app.set('views', __dirname + '/views'); //서버가 읽을 수 있도록 HTML
7 app.set('view engine', 'ejs'); //서버가 HTML 렌더링을 할 때, EJS 엔진을 사용하도록 설정합니다. 7 app.set('view engine', 'ejs'); //서버가 HTML 렌더링을 할 때, EJS 엔진을 사용하도록 설정합니다.
8 app.engine('html', require('ejs').renderFile); 8 app.engine('html', require('ejs').renderFile);
9 9
10 -
11 -
12 app.get('/timeline/:screen_name',tweetsController.getUserTweets); // '/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴 10 app.get('/timeline/:screen_name',tweetsController.getUserTweets); // '/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
13 -<<<<<<< HEAD
14 //app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행 11 //app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행
15 //app.get('/hot/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴 12 //app.get('/hot/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
16 -=======
17 -app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행
18 -
19 -
20 -//인기있는 게시물
21 -app.get('/popular/:screen_name',tweetsController.getUserRetweet);//'/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
22 ->>>>>>> 386af79adb85889f2ff6e6ac945d15fa36f8ef74
23 -
24 -
25 var server = app.listen(3000, function(){ //3000 포트 사용 13 var server = app.listen(3000, function(){ //3000 포트 사용
26 console.log("Express server has started on port 3000"); 14 console.log("Express server has started on port 3000");
27 }) 15 })
......
...@@ -15,11 +15,7 @@ exports.getUserTweets = async function(req, res){ ...@@ -15,11 +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 -<<<<<<< HEAD
19 res.render('timeline.html',{ timeline: tweets }); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄 18 res.render('timeline.html',{ timeline: tweets }); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
20 -=======
21 - res.render('timeline.html',{tweets}); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
22 ->>>>>>> 386af79adb85889f2ff6e6ac945d15fa36f8ef74
23 } 19 }
24 }); //아이디를 토대로 타임라인 가져오기 20 }); //아이디를 토대로 타임라인 가져오기
25 21
...@@ -30,17 +26,12 @@ exports.getUserTweets = async function(req, res){ ...@@ -30,17 +26,12 @@ exports.getUserTweets = async function(req, res){
30 } 26 }
31 } 27 }
32 28
33 -<<<<<<< HEAD
34 -=======
35 -
36 -//찾고싶은 게시물내용검색
37 ->>>>>>> 386af79adb85889f2ff6e6ac945d15fa36f8ef74
38 exports.getUserSearch = async function(req, res){ 29 exports.getUserSearch = async function(req, res){
39 try{ 30 try{
40 - let searchdata= client.get('search/tweets', {q: 'now' }, function(error, tweets2, response) {//search 31 + let searchdata= client.get('search/tweets', req.params, function(error, tweets, response) {//search
41 if(!error){ 32 if(!error){
42 - console.log(tweets2); 33 + console.log(tweets);
43 - res.render('timeline.html',{tweets2}); 34 + res.render('timeline.html',tweets);
44 } 35 }
45 36
46 });//입력값 바꿀 필요 있음(?) 37 });//입력값 바꿀 필요 있음(?)
...@@ -50,27 +41,15 @@ exports.getUserSearch = async function(req, res){ ...@@ -50,27 +41,15 @@ exports.getUserSearch = async function(req, res){
50 } 41 }
51 } 42 }
52 43
53 -<<<<<<< HEAD
54 exports.getUserRetweet = async function(req, res){ //인기있는 글 44 exports.getUserRetweet = async function(req, res){ //인기있는 글
55 -=======
56 -
57 -
58 -//인기있는 게시물(리트윗)!
59 -exports.getUserRetweet = async function(req, res){
60 ->>>>>>> 386af79adb85889f2ff6e6ac945d15fa36f8ef74
61 try{ 45 try{
62 - let retweetdata = client.get('statuses/user_timeline', req.params, function(error, tweets3, response) { 46 + let retweetdata = client.get('statuses/user_timeline', req.params, function(error, tweets, response) {//리트윗
63 if(!error){ 47 if(!error){
64 - tweets3.sort(function(a,b){ 48 + tweets.sort(function(a,b){
65 return b.retweet_count-a.retweet_count; 49 return b.retweet_count-a.retweet_count;
66 });//리트윗 data 내림차순로 정렬(?) 50 });//리트윗 data 내림차순로 정렬(?)
67 -<<<<<<< HEAD
68 console.log(tweets); 51 console.log(tweets);
69 res.render('timeline.html',{timeline: tweets}); 52 res.render('timeline.html',{timeline: tweets});
70 -=======
71 - console.log(tweets3);
72 - res.render('popular.html',{tweets3});
73 ->>>>>>> 386af79adb85889f2ff6e6ac945d15fa36f8ef74
74 } 53 }
75 54
76 }); 55 });
......
...@@ -20,21 +20,35 @@ ...@@ -20,21 +20,35 @@
20 <input id="search" type="text" placeholder="아이디를 입력하세요" /> 20 <input id="search" type="text" placeholder="아이디를 입력하세요" />
21 </div> 21 </div>
22 <div class="input-field second-wrap"> 22 <div class="input-field second-wrap">
23 - <button class="btn-search" type="button" onclick="movePage()">인기 게시물 검색하기</button> 23 + <button class="btn-search" type="button" onclick="movePage1()">계정 내 검색하기</button>
24 - <button class="btn-search1" type="button1" onclick="movePage1()">계정 내 검색하기</button>
25 </div> 24 </div>
26 <script type ="text/javascript"> 25 <script type ="text/javascript">
27 - function movePage(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨. 26 + function movePage1(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨
28 - location.href ="/popular/"+document.getElementById('search').value //url을 이렇게 변경함 27 + location.href ="/timeline/"+document.getElementById('search').value //url을 이렇게 변경함
29 } 28 }
30 </script> 29 </script>
30 + </div>
31 +
32 + <div class="inner-form">
33 + <div class="input-field first-wrap">
34 + <div class="svg-wrapper">
35 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
36 + <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
37 + </svg>
38 + </div>
39 + <input id="search" type="text" placeholder="아이디를 입력하세요" />
40 + </div>
41 + <div class="input-field second-wrap">
42 + <button class="btn-search" type="button" onclick="movePage()">인기 게시물 검색하기</button>
43 + </div>
31 <script type ="text/javascript"> 44 <script type ="text/javascript">
32 - function movePage1(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨 45 + function movePage(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨.
33 - location.href ="/timeline/"+document.getElementById('search').value //url을 이렇게 변경함 46 + location.href ="/popular/"+document.getElementById('search').value //url을 이렇게 변경함
34 } 47 }
35 </script> 48 </script>
36 </div> 49 </div>
37 <span class="info">ex)TwitterKorea </span> 50 <span class="info">ex)TwitterKorea </span>
51 +
38 </form> 52 </form>
39 </div> 53 </div>
40 <script src="js/extention/choices.js"></script> 54 <script src="js/extention/choices.js"></script>
......
File mode changed
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
4 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 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"> 5 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
6 <style> 6 <style>
7 +
7 body { background: #e1f5fe;} 8 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{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::-webkit-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
...@@ -31,19 +32,45 @@ ...@@ -31,19 +32,45 @@
31 <span class="inline-search"> 32 <span class="inline-search">
32 <button id="search-btn" type="submit" value="Search" onclick="search()"> 33 <button id="search-btn" type="submit" value="Search" onclick="search()">
33 <i class="fa fa-search"></i> 34 <i class="fa fa-search"></i>
34 -
35 </button> 35 </button>
36 </span> 36 </span>
37 </form> 37 </form>
38 +
39 + <script type ="text/javascript">
40 + function search(){
41 +
42 + }
43 + </script>
38 44
39 <!--타임라인 출력--> 45 <!--타임라인 출력-->
40 <div> 46 <div>
41 <% for (var i=0; i<20; i++){ %> 47 <% for (var i=0; i<20; i++){ %>
48 + <section class="section mt-5" >
49 + <div class="container" style="border: 1px solid black">
50 + <div class="row">
51 + <div class="col-md-6">
52 + <div>
53 + <% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력-->
54 + <img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> />
55 + <% } %>
56 + </div>
57 + </div>
58 + <div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0">
59 + <div>
60 + <h2><%=timeline[i].user.name%></h2> <!--닉네임-->
61 + <p class="margin-top-s"><%=timeline[i].text%></p> <!--내용-->
62 + </div>
63 + </div>
64 + </div>
65 + </div>
66 + </section>
42 <div> 67 <div>
43 - <h4><%=timeline[i].user.name%></h4>
44 - <h4><%=timeline[i].text%></h4>
45 </div> 68 </div>
46 <% } %> 69 <% } %>
47 </div> 70 </div>
71 +
72 +
73 +
74 +
48 </body> 75 </body>
49 </html> 76 </html>
...\ No newline at end of file ...\ No newline at end of file
......