스파르타 코딩클럽 11일 메이킹 챌린지 - 7

리뷰 페이지

메인 페이지에서 리뷰보기 또는 영화 이미지를 클릭하면 리뷰 페이지로 이동하게 된다.

영화별로 리뷰를 작성할 수 있다.

보러가기 버튼 클릭 시 유튜브 영화 예고편으로 이동하게 되고 리뷰쓰기 버튼 클릭 시 리뷰를 작성할 수 있다.

리뷰 작성 창

한줄평으로 최대 10자, 체크 박스로 키워드 선택, 평점 입력이 가능하다.

리뷰 등록 시 메시지 창

메시지 창이 나타난 후 1초 뒤 새로고침되며 리뷰가 등록된다.

리뷰

 

리뷰 한줄평과 체크한 키워드를 추출하여 보여주고 리뷰 등록한 시간이 표시된다.

let review = $('#review').val()
let rank = $('#rank').val()
var today2 = new Date();
var year = today2.getFullYear();
var month = ('0' + (today2.getMonth() + 1)).slice(-2);
var day = ('0' + today2.getDate()).slice(-2);
var hours = ('0' + today2.getHours()).slice(-2);
var minutes = ('0' + today2.getMinutes()).slice(-2);
var seconds = ('0' + today2.getSeconds()).slice(-2);
var dateString = year + '-' + month + '-' + day + '&nbsp' + hours + ':' + minutes + ':' + seconds;

const query = 'input[name="group"]:checked';
const selectedEls =
document.querySelectorAll(query);

// 선택된 목록에서 value 찾기
let result = '';
selectedEls.forEach((el) => {
result += el.value + ' ';
});

$.ajax({
type: "POST",
url: "/reviews",
data: {
review_give: review,
result_give: result,
rank_give: rank,
dateString_give: dateString
},
success: function (response) {
swal({
title: response["msg"],
text: "",
icon: "success",
});
setTimeout('go_url()', 1000)
}
})
}

function showReview() {
$.ajax({
type: "GET",
url: "/rv",
data: {},
success: function (response) {
let rv = response['all_reviews']
for (let i = 0; i < rv.length; i++) {
let review = rv[i]['review']
let result = rv[i]['result']
let rank = rv[i]['rank']
let dateString = rv[i]['dateString']

let temp_html = `
<div class="contents" >
<li class="itemsC">
<div class="contents">
<div class="user-txt">
<div class="user-id font">평점 : ${rank}</div>
<div class="user-review font"><h3>${review}</h3></div>
<div class="keyword2">
<ul>
<li id="one2" class="font">단어 키워드</li><li class="fontsize"><br>${result}</li>
<br>
<li class="color font">${dateString}</li><br>
</ul>
</div>
</div>
</div>
</li> </div> `
$('#reviews-box').append(temp_html)
}
}
})
}

추출한 평점이 자동으로 입력된다. 

리뷰를 하나 더 작성하면서 평점 10점을 입력했다. 자동으로 리뷰 평점의 평균을 계산하여 모가디슈의 평점이 9.8점으로 바뀐다.

평균 평점 계산 소스 코드

function avgrank() {
$.ajax({
type: "GET",
url: "/rank",
data: {},
success: function (response) {
let allrank = response['all_rank']
let i;
let sum = 0;
for (i = 0; i < allrank.length; i++) {
let avgrank = allrank[i]['rank']
avgrank *= 1;
sum += avgrank;
}
let avgrank2 = sum / allrank.length
avgrank3 = avgrank2.toFixed(1)
let temp_html = `<div>
<p>| 평점 : ${avgrank3}</p></div>`

$('#main-score').append(temp_html)
}
})
}

모가디슈 리뷰 DB