이해님 / 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 {
min-width: 216px;
}
.s130 form .inner-form .input-field.second-wrap .btn-search {
.s130 form .inner-form .input-field.second-wrap .btn-search{
height: 100%;
width: 100%;
white-space: nowrap;
......@@ -934,11 +934,11 @@ html {
font-weight: 300;
}
.s130 form .inner-form .input-field.second-wrap .btn-search:hover {
.s130 form .inner-form .input-field.second-wrap .btn-search:hover{
background: #4782cf;
}
.s130 form .inner-form .input-field.second-wrap .btn-search:focus {
.s130 form .inner-form .input-field.second-wrap .btn-search:focus{
outline: 0;
box-shadow: none;
}
......@@ -974,7 +974,7 @@ html {
.s130 form .inner-form .input-field.second-wrap {
min-width: 100px;
}
.s130 form .inner-form .input-field.second-wrap .btn-search {
.s130 form .inner-form .input-field.second-wrap .btn-search{
font-size: 13px;
}
}
......
var express = require('express'); //express 모듈 불러오기..
var express = require('express'); //express 모듈 불러오기
var app = express();
const tweetsController = require('./twitter-controller');
......@@ -7,21 +7,9 @@ app.set('views', __dirname + '/views'); //서버가 읽을 수 있도록 HTML
app.set('view engine', 'ejs'); //서버가 HTML 렌더링을 할 때, EJS 엔진을 사용하도록 설정합니다.
app.engine('html', require('ejs').renderFile);
app.get('/timeline/:screen_name',tweetsController.getUserTweets); // '/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
<<<<<<< HEAD
//app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행
//app.get('/hot/:screen_name',tweetsController.getUserRetweet);//'/hot/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
=======
app.get('/timeline/:screen_name', tweetsController.getUserSearch);//url들어오면 뒤의 함수 실행
//인기있는 게시물
app.get('/popular/:screen_name',tweetsController.getUserRetweet);//'/timeline/:screen_name'형식의 url이 들어오면 뒤의 함수를 실행시킴
>>>>>>> 386af79adb85889f2ff6e6ac945d15fa36f8ef74
var server = app.listen(3000, function(){ //3000 포트 사용
console.log("Express server has started on port 3000");
})
......
......@@ -15,11 +15,7 @@ exports.getUserTweets = async function(req, res){
if(!error){
console.log(tweets); //가져온 타임라인 내용 콘솔창에 출력
<<<<<<< HEAD
res.render('timeline.html',{ timeline: tweets }); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
=======
res.render('timeline.html',{tweets}); //timeline.html 화면에 뿌려줌 그리고 tweets값을 저 페이지로 보냄
>>>>>>> 386af79adb85889f2ff6e6ac945d15fa36f8ef74
}
}); //아이디를 토대로 타임라인 가져오기
......@@ -30,17 +26,12 @@ exports.getUserTweets = async function(req, res){
}
}
<<<<<<< HEAD
=======
//찾고싶은 게시물내용검색
>>>>>>> 386af79adb85889f2ff6e6ac945d15fa36f8ef74
exports.getUserSearch = async function(req, res){
try{
let searchdata= client.get('search/tweets', {q: 'now' }, function(error, tweets2, response) {//search
let searchdata= client.get('search/tweets', req.params, function(error, tweets, response) {//search
if(!error){
console.log(tweets2);
res.render('timeline.html',{tweets2});
console.log(tweets);
res.render('timeline.html',tweets);
}
});//입력값 바꿀 필요 있음(?)
......@@ -50,27 +41,15 @@ exports.getUserSearch = async function(req, res){
}
}
<<<<<<< HEAD
exports.getUserRetweet = async function(req, res){ //인기있는 글
=======
//인기있는 게시물(리트윗)!
exports.getUserRetweet = async function(req, res){
>>>>>>> 386af79adb85889f2ff6e6ac945d15fa36f8ef74
try{
let retweetdata = client.get('statuses/user_timeline', req.params, function(error, tweets3, response) {
let retweetdata = client.get('statuses/user_timeline', req.params, function(error, tweets, response) {//리트윗
if(!error){
tweets3.sort(function(a,b){
tweets.sort(function(a,b){
return b.retweet_count-a.retweet_count;
});//리트윗 data 내림차순로 정렬(?)
<<<<<<< HEAD
console.log(tweets);
res.render('timeline.html',{timeline: tweets});
=======
console.log(tweets3);
res.render('popular.html',{tweets3});
>>>>>>> 386af79adb85889f2ff6e6ac945d15fa36f8ef74
}
});
......
......@@ -20,21 +20,35 @@
<input id="search" type="text" placeholder="아이디를 입력하세요" />
</div>
<div class="input-field second-wrap">
<button class="btn-search" type="button" onclick="movePage()">인기 게시물 검색하기</button>
<button class="btn-search1" type="button1" onclick="movePage1()">계정 내 검색하기</button>
<button class="btn-search" type="button" onclick="movePage1()">계정 내 검색하기</button>
</div>
<script type ="text/javascript">
function movePage(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨.
location.href ="/popular/"+document.getElementById('search').value //url을 이렇게 변경함
function movePage1(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨
location.href ="/timeline/"+document.getElementById('search').value //url을 이렇게 변경함
}
</script>
</div>
<div class="inner-form">
<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">
<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="아이디를 입력하세요" />
</div>
<div class="input-field second-wrap">
<button class="btn-search" type="button" onclick="movePage()">인기 게시물 검색하기</button>
</div>
<script type ="text/javascript">
function movePage1(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨
location.href ="/timeline/"+document.getElementById('search').value //url을 이렇게 변경함
function movePage(){ //페이지 이동을 위한 함수 search버튼을 누르면 실행됨.
location.href ="/popular/"+document.getElementById('search').value //url을 이렇게 변경함
}
</script>
</div>
<span class="info">ex)TwitterKorea </span>
</form>
</div>
<script src="js/extention/choices.js"></script>
......
File mode changed
......@@ -4,6 +4,7 @@
<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;}
......@@ -31,19 +32,45 @@
<span class="inline-search">
<button id="search-btn" type="submit" value="Search" onclick="search()">
<i class="fa fa-search"></i>
</button>
</span>
</form>
<script type ="text/javascript">
function search(){
}
</script>
<!--타임라인 출력-->
<div>
<% for (var i=0; i<20; i++){ %>
<section class="section mt-5" >
<div class="container" style="border: 1px solid black">
<div class="row">
<div class="col-md-6">
<div>
<% 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 %> />
<% } %>
</div>
</div>
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0">
<div>
<h2><%=timeline[i].user.name%></h2> <!--닉네임-->
<p class="margin-top-s"><%=timeline[i].text%></p> <!--내용-->
</div>
</div>
</div>
</div>
</section>
<div>
<h4><%=timeline[i].user.name%></h4>
<h4><%=timeline[i].text%></h4>
</div>
<% } %>
</div>
</body>
</html>
\ No newline at end of file
......