이해님 / 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);
app.get('/timeline/:screen_name',tweetsController.getUserTweets); // '/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
app.get('/timeline/:screen_name/:keyword',tweetsController.getUserTweetsForSearch);
//app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행
//app.get('/hot/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
app.get('/popular/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
var server = app.listen(3000, function(){ //3000 포트 사용
console.log("Express server has started on port 3000");
})
......
......@@ -9,7 +9,7 @@ const client = new Twitter({
});
exports.getUserTweets = async function(req, res){
exports.getUserTweets = async function(req, res){ //전체 타임라인
try{
let data = client.get('statuses/user_timeline', req.params, function(error,tweets,response){ //트위터 api에서 유저의 타임라인을 가져옴 req.params에 유저 아이디가 들어있음
if(!error){
......@@ -50,7 +50,7 @@ exports.getUserRetweet = async function(req, res){ //인기있는 글
return b.retweet_count-a.retweet_count;
});//리트윗 data 내림차순로 정렬(?)
console.log(tweets);
res.render('timeline.html',{timeline: tweets});
res.render('popular.html',{timeline: tweets});
}
});
......
......@@ -8,7 +8,7 @@
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="s130">
<div class="s130"> <!--아이디 검색창1 : 계정내 검색-->
<form>
<div class="inner-form">
<div class="input-field first-wrap">
......@@ -17,19 +17,19 @@
<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>
</svg>
</div>
<input id="search" type="text" placeholder="아이디를 입력하세요" />
<input id="search1" type="text" placeholder="아이디를 입력하세요" />
</div>
<div class="input-field second-wrap">
<button class="btn-search" type="button" onclick="movePage1()">계정 내 검색하기</button>
</div>
<script type ="text/javascript">
function movePage1(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨
location.href ="/timeline/"+document.getElementById('search').value //url을 이렇게 변경함
function movePage1(){ //계정 내 검색 페이지로 이동하기 위한 함수
location.href ="/timeline/"+document.getElementById('search1').value //url을 이렇게 변경함
}
</script>
</div>
<div class="inner-form">
<div class="inner-form"> <!--아이디 검색창2 : 인기글 검색-->
<div class="input-field first-wrap">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
......@@ -42,7 +42,7 @@
<button class="btn-search" type="button" onclick="movePage()">인기 게시물 검색하기</button>
</div>
<script type ="text/javascript">
function movePage(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨.
function movePage(){ //인기 게시물 페이지 이동을 위한 함수
location.href ="/popular/"+document.getElementById('search').value //url을 이렇게 변경함
}
</script>
......
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<script>
alert("Hello, world!");
<style>
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 200px;
}
console.log(tweets3);
#search input[type="text"]:focus {
width: 200px;
}
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
</style>
</head>
</script>
<body>
<!--핫한 글들 출력-->
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4 style="color:rgb(46, 7, 7); font-weight: bold;">HOT</h4>
<ul class="Timeline">
<% for (var i=0; i<20; i++){ %>
<li>
<h5 style="color: gold; font-weight: bold;"><%= i + 1 %>위!</h5>
<% if(timeline[i].hasOwnProperty('retweeted_status')) { %> <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
<a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].retweeted_status.user.name %></a>
<% } else { %> <!--아니면 내 닉네임-->
<a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].user.name %></a>
<% } %>
<a href="#" class="float-right"><%= timeline[i].created_at %></a>
</body>
<p><%=timeline[i].text%></p>
<% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력-->
<img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> />
<% } %>
<p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에 들어요: <%= timeline[i].favorite_count%></p>
</li>
<% } %>
</ul>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
......
......@@ -6,8 +6,7 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--검색창-->
<div style="padding-left: 500px;">
<div style="padding-left: 500px;">
<input id = "search1" name="q" type="text" size="40" placeholder="Search..." />
<button class="btn-search" type="button" onclick="movePage1()">검색</button>
<script type ="text/javascript">
......@@ -17,79 +16,92 @@
</script>
</div>
<style>
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 200px;
}
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 200px;
}
#search input[type="text"]:focus {
width: 200px;
}
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
</style>
</head>
</head>
<body>
<!--검색된 타임라인 출력-->
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4>timeline</h4>
<!--<h4>timeline</h4>-->
<ul class="Timeline">
<% for (var i=0; i<20; i++){ %> <!--받아온 타임라인 수 만큼 반복-->
<% if((timeline[i].text).indexOf(keyword) != -1) { %> <!--현재 글에 검색 키워드가 존재하면 그 글을 보여줌-->
<li>
<a target="_blank" href=><%= timeline[i].user.name %></a>
<% if(timeline[i].hasOwnProperty('retweeted_status')) { %> <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
<a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].retweeted_status.user.name %></a>
<% } else { %> <!--아니면 내 닉네임-->
<a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].user.name %></a>
<% } %>
<a href="#" class="float-right"><%= timeline[i].created_at %></a>
<p><%=timeline[i].text%></p>
<% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력-->
<img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> />
<% } %>
<p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에 들어요: <%= timeline[i].favorite_count%></p>
</li>
<% } %>
<% } %>
......
......@@ -16,83 +16,91 @@
</script>
</div>
<style>
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 200px;
}
#search input[type="text"]:focus {
width: 200px;
}
#search input[type="text"]:focus {
width: 200px;
}
#search input[type="text"]:focus {
width: 200px;
}
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
</style>
</head>
<body>
<!--검색창-->
<body>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4>timeline</h4>
<!--<h4>timeline</h4>-->
<ul class="Timeline">
<% for (var i=0; i<20; i++){ %>
<% for (var i=0; i<20; i++){ %> <!--가져온 타임라인들에 대해서-->
<li>
<a target="_blank" href=><%= timeline[i].user.name %></a>
<a href="#" class="float-right"><%= timeline[i].created_at %></a>
<p><%=timeline[i].text%></p>
<% if(timeline[i].hasOwnProperty('retweeted_status')) { %> <!--내가 다른사람 글을 리트윗한거면 원글을 쓴 사람 닉네임 출력-->
<a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].retweeted_status.user.name %></a>
<% } else { %> <!--아니면 내 닉네임-->
<a style ="font-weight: bold;" target="_blank" href=><%= timeline[i].user.name %></a>
<% } %>
<a href="#" class="float-right"><%= timeline[i].created_at %></a> <!--글이 써진 날짜-->
<p><%=timeline[i].text%></p> <!--그 글 내용 출력-->
<% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력-->
<img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> />
<% } %>
<p style="color: #22c0e8;">리트윗: <%= timeline[i].retweet_count %> 마음에 들어요: <%= timeline[i].favorite_count%></p>
</li>
<% } %>
......@@ -101,8 +109,7 @@ ul.timeline > li:before {
</div>
</div>
<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>
</body>
</html>
\ No newline at end of file
......