이해님 / 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 엔진
app.engine('html', require('ejs').renderFile);
app.get('/timeline/:screen_name',tweetsController.getUserTweets); // '/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행
app.get('/timeline/:screen_name',tweetsController.getUserRetweet);//'/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
//app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행
//app.get('/hot/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
var server = app.listen(3000, function(){ //3000 포트 사용
......
......@@ -15,7 +15,7 @@ exports.getUserTweets = async function(req, res){
if(!error){
console.log(tweets); //가져온 타임라인 내용 콘솔창에 출력
res.render('timeline.html',tweets); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
res.render('timeline.html',{ timeline: tweets }); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
}
}); //아이디를 토대로 타임라인 가져오기
......@@ -25,6 +25,7 @@ exports.getUserTweets = async function(req, res){
res.sendStatus(500);
}
}
exports.getUserSearch = async function(req, res){
try{
let searchdata= client.get('search/tweets', req.params, function(error, tweets, response) {//search
......@@ -40,8 +41,7 @@ exports.getUserSearch = async function(req, res){
}
}
exports.getUserRetweet = async function(req, res){
exports.getUserRetweet = async function(req, res){ //인기있는 글
try{
let retweetdata = client.get('statuses/user_timeline', req.params, function(error, tweets, response) {//리트윗
if(!error){
......@@ -49,7 +49,7 @@ exports.getUserRetweet = async function(req, res){
return b.retweet_count-a.retweet_count;
});//리트윗 data 내림차순로 정렬(?)
console.log(tweets);
res.render('timeline.html',tweets);
res.render('timeline.html',{timeline: tweets});
}
});
......
......@@ -28,7 +28,7 @@
}
</script>
</div>
<span class="info">ex)@TwitterKorea </span>
<span class="info">ex)TwitterKorea </span>
</form>
</div>
<script src="js/extention/choices.js"></script>
......
<html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { background: #e1f5fe;}
#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;}
#search-box input::-webkit-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box input::-moz-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box input::-ms-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box input::-moz-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box .fa-globe{position:absolute;top:19px;left:22px;font-size:23px;color:#dcdee0;}
#search-box .inline-search{position:absolute;top:10px;right:25px;}
#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;}
#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;}
#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;}
#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;}
</style>
<script>
function search(){
document.write(timeline);
}
</script>
</head>
<body>
<script>
alert("Hello, world!");
console.log(tweets);
</script>
<!--검색창-->
<form method="post" action="" id="search-box" class="col-md-6 offset-md-3 mt-5">
<i class="fa fa-globe"></i>
<input type="text" placeholder="키워드를 입력하세요" >
<span class="inline-search">
<button id="search-btn" type="submit" value="Search" onclick="search()">
<i class="fa fa-search"></i>
</button>
</span>
</form>
<!--타임라인 출력-->
<div>
<% for (var i=0; i<20; i++){ %>
<div>
<h4><%=timeline[i].user.name%></h4>
<h4><%=timeline[i].text%></h4>
</div>
<% } %>
</div>
</body>
</html>
\ No newline at end of file
......