이해님 / term-project

Go to a project
Toggle navigation Toggle navigation pinning
haenim
2cb5964a 1 parent e83f9d8a

update hot tweet

Inline Side-by-side
Showing 8 changed files with 247 additions and 139 deletions
...@@ -9,8 +9,7 @@ app.engine('html', require('ejs').renderFile); ...@@ -9,8 +9,7 @@ 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/:keyword',tweetsController.getUserTweetsForSearch); 11 app.get('/timeline/:screen_name/:keyword',tweetsController.getUserTweetsForSearch);
12 -//app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행 12 +app.get('/popular/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
13 -//app.get('/hot/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
14 var server = app.listen(3000, function(){ //3000 포트 사용 13 var server = app.listen(3000, function(){ //3000 포트 사용
15 console.log("Express server has started on port 3000"); 14 console.log("Express server has started on port 3000");
16 }) 15 })
......
...@@ -9,7 +9,7 @@ const client = new Twitter({ ...@@ -9,7 +9,7 @@ const client = new Twitter({
9 }); 9 });
10 10
11 11
12 -exports.getUserTweets = async function(req, res){ 12 +exports.getUserTweets = async function(req, res){ //전체 타임라인
13 try{ 13 try{
14 let data = client.get('statuses/user_timeline', req.params, function(error,tweets,response){ //트위터 api에서 유저의 타임라인을 가져옴 req.params에 유저 아이디가 들어있음 14 let data = client.get('statuses/user_timeline', req.params, function(error,tweets,response){ //트위터 api에서 유저의 타임라인을 가져옴 req.params에 유저 아이디가 들어있음
15 if(!error){ 15 if(!error){
...@@ -50,7 +50,7 @@ exports.getUserRetweet = async function(req, res){ //인기있는 글 ...@@ -50,7 +50,7 @@ exports.getUserRetweet = async function(req, res){ //인기있는 글
50 return b.retweet_count-a.retweet_count; 50 return b.retweet_count-a.retweet_count;
51 });//리트윗 data 내림차순로 정렬(?) 51 });//리트윗 data 내림차순로 정렬(?)
52 console.log(tweets); 52 console.log(tweets);
53 - res.render('timeline.html',{timeline: tweets}); 53 + res.render('popular.html',{timeline: tweets});
54 } 54 }
55 55
56 }); 56 });
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 <link href="css/style.css" rel="stylesheet" /> 8 <link href="css/style.css" rel="stylesheet" />
9 </head> 9 </head>
10 <body> 10 <body>
11 - <div class="s130"> 11 + <div class="s130"> <!--아이디 검색창1 : 계정내 검색-->
12 <form> 12 <form>
13 <div class="inner-form"> 13 <div class="inner-form">
14 <div class="input-field first-wrap"> 14 <div class="input-field first-wrap">
...@@ -17,19 +17,19 @@ ...@@ -17,19 +17,19 @@
17 <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> 17 <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>
18 </svg> 18 </svg>
19 </div> 19 </div>
20 - <input id="search" type="text" placeholder="아이디를 입력하세요" /> 20 + <input id="search1" 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="movePage1()">계정 내 검색하기</button> 23 <button class="btn-search" type="button" onclick="movePage1()">계정 내 검색하기</button>
24 </div> 24 </div>
25 <script type ="text/javascript"> 25 <script type ="text/javascript">
26 - function movePage1(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨 26 + function movePage1(){ //계정 내 검색 페이지로 이동하기 위한 함수
27 - location.href ="/timeline/"+document.getElementById('search').value //url을 이렇게 변경함 27 + location.href ="/timeline/"+document.getElementById('search1').value //url을 이렇게 변경함
28 } 28 }
29 </script> 29 </script>
30 </div> 30 </div>
31 31
32 - <div class="inner-form"> 32 + <div class="inner-form"> <!--아이디 검색창2 : 인기글 검색-->
33 <div class="input-field first-wrap"> 33 <div class="input-field first-wrap">
34 <div class="svg-wrapper"> 34 <div class="svg-wrapper">
35 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> 35 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
42 <button class="btn-search" type="button" onclick="movePage()">인기 게시물 검색하기</button> 42 <button class="btn-search" type="button" onclick="movePage()">인기 게시물 검색하기</button>
43 </div> 43 </div>
44 <script type ="text/javascript"> 44 <script type ="text/javascript">
45 - function movePage(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨. 45 + function movePage(){ //인기 게시물 페이지 이동을 위한 함수
46 location.href ="/popular/"+document.getElementById('search').value //url을 이렇게 변경함 46 location.href ="/popular/"+document.getElementById('search').value //url을 이렇게 변경함
47 } 47 }
48 </script> 48 </script>
......
1 +
1 <html> 2 <html>
3 + <head>
4 + <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
5 + <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
6 + <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7 + <!------ Include the above in your HEAD tag ---------->
2 8
3 -<body>
4 9
5 -<script> 10 + <style>
6 -alert("Hello, world!"); 11 + #search input[type="text"] {
12 + background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
13 + border: 1px solid #d1d1d1;
14 + font: bold 12px Arial,Helvetica,Sans-serif;
15 + color: #bebebe;
16 + width: 150px;
17 + padding: 6px 15px 6px 35px;
18 + -webkit-border-radius: 20px;
19 + -moz-border-radius: 20px;
20 + border-radius: 20px;
21 + text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
22 + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
23 + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
24 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
25 + -webkit-transition: all 0.7s ease 0s;
26 + -moz-transition: all 0.7s ease 0s;
27 + -o-transition: all 0.7s ease 0s;
28 + transition: all 0.7s ease 0s;
29 + }
7 30
31 + #search input[type="text"]:focus {
32 + width: 200px;
33 + }
8 34
9 -console.log(tweets3); 35 + #search input[type="text"]:focus {
36 + width: 200px;
37 + }
38 + ul.timeline {
39 + list-style-type: none;
40 + position: relative;
41 + }
42 + ul.timeline:before {
43 + content: ' ';
44 + background: #d4d9df;
45 + display: inline-block;
46 + position: absolute;
47 + left: 29px;
48 + width: 2px;
49 + height: 100%;
50 + z-index: 400;
51 + }
52 + ul.timeline > li {
53 + margin: 20px 0;
54 + padding-left: 20px;
55 + }
56 + ul.timeline > li:before {
57 + content: ' ';
58 + background: white;
59 + display: inline-block;
60 + position: absolute;
61 + border-radius: 50%;
62 + border: 3px solid #22c0e8;
63 + left: 20px;
64 + width: 20px;
65 + height: 20px;
66 + z-index: 400;
67 + }
68 + </style>
69 + </head>
10 70
11 71
12 -</script> 72 +<body>
73 + <!--핫한 글들 출력-->
74 + <div class="container mt-5 mb-5">
75 + <div class="row">
76 + <div class="col-md-6 offset-md-3">
77 + <h4 style="color:rgb(46, 7, 7); font-weight: bold;">HOT</h4>
78 + <ul class="Timeline">
79 + <% for (var i=0; i<20; i++){ %>
80 + <li>
81 + <h5 style="color: gold; font-weight: bold;"><%= i + 1 %>위!</h5>
82 + <% if(timeline[i].hasOwnProperty('retweeted_status')) { %> <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
83 + <a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].retweeted_status.user.name %></a>
84 + <% } else { %> <!--아니면 내 닉네임-->
85 + <a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].user.name %></a>
86 + <% } %>
13 87
88 + <a href="#" class="float-right"><%= timeline[i].created_at %></a>
14 89
15 -</body> 90 + <p><%=timeline[i].text%></p>
16 91
92 + <% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력-->
93 + <img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> />
94 + <% } %>
95 +
96 + <p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에 들어요: <%= timeline[i].favorite_count%></p>
97 + </li>
98 + <% } %>
99 +
100 + </ul>
101 + </div>
102 + </div>
103 + </div>
104 +
105 +
106 +</body>
17 </html> 107 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -6,8 +6,7 @@ ...@@ -6,8 +6,7 @@
6 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 6 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7 <!------ Include the above in your HEAD tag ----------> 7 <!------ Include the above in your HEAD tag ---------->
8 8
9 - <!--검색창--> 9 + <div style="padding-left: 500px;">
10 - <div style="padding-left: 500px;">
11 <input id = "search1" name="q" type="text" size="40" placeholder="Search..." /> 10 <input id = "search1" name="q" type="text" size="40" placeholder="Search..." />
12 <button class="btn-search" type="button" onclick="movePage1()">검색</button> 11 <button class="btn-search" type="button" onclick="movePage1()">검색</button>
13 <script type ="text/javascript"> 12 <script type ="text/javascript">
...@@ -17,79 +16,92 @@ ...@@ -17,79 +16,92 @@
17 </script> 16 </script>
18 </div> 17 </div>
19 <style> 18 <style>
20 -#search input[type="text"] { 19 + #search input[type="text"] {
21 - background: url(search-white.png) no-repeat 10px 6px #fcfcfc; 20 + background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
22 - border: 1px solid #d1d1d1; 21 + border: 1px solid #d1d1d1;
23 - font: bold 12px Arial,Helvetica,Sans-serif; 22 + font: bold 12px Arial,Helvetica,Sans-serif;
24 - color: #bebebe; 23 + color: #bebebe;
25 - width: 150px; 24 + width: 150px;
26 - padding: 6px 15px 6px 35px; 25 + padding: 6px 15px 6px 35px;
27 - -webkit-border-radius: 20px; 26 + -webkit-border-radius: 20px;
28 - -moz-border-radius: 20px; 27 + -moz-border-radius: 20px;
29 - border-radius: 20px; 28 + border-radius: 20px;
30 - text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 29 + text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
31 - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 30 + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
32 - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 31 + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
33 - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 32 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
34 - -webkit-transition: all 0.7s ease 0s; 33 + -webkit-transition: all 0.7s ease 0s;
35 - -moz-transition: all 0.7s ease 0s; 34 + -moz-transition: all 0.7s ease 0s;
36 - -o-transition: all 0.7s ease 0s; 35 + -o-transition: all 0.7s ease 0s;
37 - transition: all 0.7s ease 0s; 36 + transition: all 0.7s ease 0s;
38 - } 37 + }
39 -
40 -#search input[type="text"]:focus {
41 - width: 200px;
42 - }
43 - ul.timeline {
44 - list-style-type: none;
45 - position: relative;
46 -}
47 -ul.timeline:before {
48 - content: ' ';
49 - background: #d4d9df;
50 - display: inline-block;
51 - position: absolute;
52 - left: 29px;
53 - width: 2px;
54 - height: 100%;
55 - z-index: 400;
56 -}
57 -ul.timeline > li {
58 - margin: 20px 0;
59 - padding-left: 20px;
60 -}
61 -ul.timeline > li:before {
62 - content: ' ';
63 - background: white;
64 - display: inline-block;
65 - position: absolute;
66 - border-radius: 50%;
67 - border: 3px solid #22c0e8;
68 - left: 20px;
69 - width: 20px;
70 - height: 20px;
71 - z-index: 400;
72 -}
73 38
39 + #search input[type="text"]:focus {
40 + width: 200px;
41 + }
74 42
43 + #search input[type="text"]:focus {
44 + width: 200px;
45 + }
46 + ul.timeline {
47 + list-style-type: none;
48 + position: relative;
49 + }
50 + ul.timeline:before {
51 + content: ' ';
52 + background: #d4d9df;
53 + display: inline-block;
54 + position: absolute;
55 + left: 29px;
56 + width: 2px;
57 + height: 100%;
58 + z-index: 400;
59 + }
60 + ul.timeline > li {
61 + margin: 20px 0;
62 + padding-left: 20px;
63 + }
64 + ul.timeline > li:before {
65 + content: ' ';
66 + background: white;
67 + display: inline-block;
68 + position: absolute;
69 + border-radius: 50%;
70 + border: 3px solid #22c0e8;
71 + left: 20px;
72 + width: 20px;
73 + height: 20px;
74 + z-index: 400;
75 + }
75 </style> 76 </style>
76 - </head> 77 + </head>
77 <body> 78 <body>
78 <!--검색된 타임라인 출력--> 79 <!--검색된 타임라인 출력-->
79 <div class="container mt-5 mb-5"> 80 <div class="container mt-5 mb-5">
80 <div class="row"> 81 <div class="row">
81 <div class="col-md-6 offset-md-3"> 82 <div class="col-md-6 offset-md-3">
82 - <h4>timeline</h4> 83 + <!--<h4>timeline</h4>-->
83 <ul class="Timeline"> 84 <ul class="Timeline">
84 <% for (var i=0; i<20; i++){ %> <!--받아온 타임라인 수 만큼 반복--> 85 <% for (var i=0; i<20; i++){ %> <!--받아온 타임라인 수 만큼 반복-->
85 <% if((timeline[i].text).indexOf(keyword) != -1) { %> <!--현재 글에 검색 키워드가 존재하면 그 글을 보여줌--> 86 <% if((timeline[i].text).indexOf(keyword) != -1) { %> <!--현재 글에 검색 키워드가 존재하면 그 글을 보여줌-->
86 <li> 87 <li>
87 - <a target="_blank" href=><%= timeline[i].user.name %></a> 88 +
89 + <% if(timeline[i].hasOwnProperty('retweeted_status')) { %> <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
90 + <a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].retweeted_status.user.name %></a>
91 + <% } else { %> <!--아니면 내 닉네임-->
92 + <a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].user.name %></a>
93 + <% } %>
94 +
88 <a href="#" class="float-right"><%= timeline[i].created_at %></a> 95 <a href="#" class="float-right"><%= timeline[i].created_at %></a>
96 +
89 <p><%=timeline[i].text%></p> 97 <p><%=timeline[i].text%></p>
98 +
90 <% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력--> 99 <% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력-->
91 <img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> /> 100 <img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> />
92 <% } %> 101 <% } %>
102 +
103 + <p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에 들어요: <%= timeline[i].favorite_count%></p>
104 +
93 </li> 105 </li>
94 <% } %> 106 <% } %>
95 <% } %> 107 <% } %>
......
...@@ -16,83 +16,91 @@ ...@@ -16,83 +16,91 @@
16 </script> 16 </script>
17 </div> 17 </div>
18 <style> 18 <style>
19 -#search input[type="text"] { 19 + #search input[type="text"] {
20 - background: url(search-white.png) no-repeat 10px 6px #fcfcfc; 20 + background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
21 - border: 1px solid #d1d1d1; 21 + border: 1px solid #d1d1d1;
22 - font: bold 12px Arial,Helvetica,Sans-serif; 22 + font: bold 12px Arial,Helvetica,Sans-serif;
23 - color: #bebebe; 23 + color: #bebebe;
24 - width: 150px; 24 + width: 150px;
25 - padding: 6px 15px 6px 35px; 25 + padding: 6px 15px 6px 35px;
26 - -webkit-border-radius: 20px; 26 + -webkit-border-radius: 20px;
27 - -moz-border-radius: 20px; 27 + -moz-border-radius: 20px;
28 - border-radius: 20px; 28 + border-radius: 20px;
29 - text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 29 + text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
30 - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 30 + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
31 - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 31 + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
32 - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 32 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
33 - -webkit-transition: all 0.7s ease 0s; 33 + -webkit-transition: all 0.7s ease 0s;
34 - -moz-transition: all 0.7s ease 0s; 34 + -moz-transition: all 0.7s ease 0s;
35 - -o-transition: all 0.7s ease 0s; 35 + -o-transition: all 0.7s ease 0s;
36 - transition: all 0.7s ease 0s; 36 + transition: all 0.7s ease 0s;
37 - } 37 + }
38 38
39 -#search input[type="text"]:focus { 39 + #search input[type="text"]:focus {
40 - width: 200px; 40 + width: 200px;
41 - } 41 + }
42 42
43 -#search input[type="text"]:focus { 43 + #search input[type="text"]:focus {
44 - width: 200px; 44 + width: 200px;
45 - } 45 + }
46 ul.timeline { 46 ul.timeline {
47 - list-style-type: none; 47 + list-style-type: none;
48 - position: relative; 48 + position: relative;
49 -} 49 + }
50 -ul.timeline:before { 50 + ul.timeline:before {
51 - content: ' '; 51 + content: ' ';
52 - background: #d4d9df; 52 + background: #d4d9df;
53 - display: inline-block; 53 + display: inline-block;
54 - position: absolute; 54 + position: absolute;
55 - left: 29px; 55 + left: 29px;
56 - width: 2px; 56 + width: 2px;
57 - height: 100%; 57 + height: 100%;
58 - z-index: 400; 58 + z-index: 400;
59 -} 59 + }
60 -ul.timeline > li { 60 + ul.timeline > li {
61 - margin: 20px 0; 61 + margin: 20px 0;
62 - padding-left: 20px; 62 + padding-left: 20px;
63 -} 63 + }
64 -ul.timeline > li:before { 64 + ul.timeline > li:before {
65 - content: ' '; 65 + content: ' ';
66 - background: white; 66 + background: white;
67 - display: inline-block; 67 + display: inline-block;
68 - position: absolute; 68 + position: absolute;
69 - border-radius: 50%; 69 + border-radius: 50%;
70 - border: 3px solid #22c0e8; 70 + border: 3px solid #22c0e8;
71 - left: 20px; 71 + left: 20px;
72 - width: 20px; 72 + width: 20px;
73 - height: 20px; 73 + height: 20px;
74 - z-index: 400; 74 + z-index: 400;
75 -} 75 + }
76 -
77 -
78 </style> 76 </style>
79 </head> 77 </head>
80 -<body>
81 - <!--검색창-->
82 78
79 +<body>
83 <div class="container mt-5 mb-5"> 80 <div class="container mt-5 mb-5">
84 <div class="row"> 81 <div class="row">
85 <div class="col-md-6 offset-md-3"> 82 <div class="col-md-6 offset-md-3">
86 - <h4>timeline</h4> 83 + <!--<h4>timeline</h4>-->
87 <ul class="Timeline"> 84 <ul class="Timeline">
88 - <% for (var i=0; i<20; i++){ %> 85 + <% for (var i=0; i<20; i++){ %> <!--가져온 타임라인들에 대해서-->
89 <li> 86 <li>
90 - <a target="_blank" href=><%= timeline[i].user.name %></a> 87 + <% if(timeline[i].hasOwnProperty('retweeted_status')) { %> <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
91 - <a href="#" class="float-right"><%= timeline[i].created_at %></a> 88 + <a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].retweeted_status.user.name %></a>
92 - <p><%=timeline[i].text%></p> 89 + <% } else { %> <!--아니면 내 닉네임-->
90 + <a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].user.name %></a>
91 + <% } %>
92 +
93 + <a href="#" class="float-right"><%= timeline[i].created_at %></a> <!--글이 써진 날짜-->
94 +
95 + <p><%=timeline[i].text%></p> <!--그 글 내용 출력-->
96 +
93 <% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력--> 97 <% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력-->
94 <img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> /> 98 <img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> />
95 <% } %> 99 <% } %>
100 +
101 + <p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에 들어요: <%= timeline[i].favorite_count%></p>
102 +
103 +
96 </li> 104 </li>
97 <% } %> 105 <% } %>
98 106
...@@ -101,8 +109,7 @@ ul.timeline > li:before { ...@@ -101,8 +109,7 @@ ul.timeline > li:before {
101 </div> 109 </div>
102 </div> 110 </div>
103 111
104 - <div class="text-muted mt-5 mb-5 text-center small">by : <a class="text-muted" target="_blank" href="http://totoprayogo.com">totoprayogo.com</a></div> 112 +
105 -
106 113
107 </body> 114 </body>
108 </html> 115 </html>
...\ No newline at end of file ...\ No newline at end of file
......