JS) 영화 평점 시스템 #2 grid, js 파일 여러 개 사용

grid 사용으로 영화 리스트와 별점을 매기는 공간을 나누고,

거기에 맞춰 js 파일을 두 개로 나누었다.

그리고 각자 submit, save 버튼 그리고 텍스트 상자를 추가하였다.

또한 새로운 배열 구조를 추가하여(arrAllMovieRatings)

리스트 내의 여러 영화 평점을 저장할 수 있도록 하였다.

 

script.js

const movieNameText = document.createElement('h1');

const movieName = document.createElement('h2');

const averageRatingText = document.createElement('h1');

const averageRating = document.createElement('h2');

const movieRatingSelections = ['작품성', '연기', '오락성','스토리'];

const ratingValues = [1, 2, 3, 4, 5];

const ratingStars = ['★', '★★', '★★★', '★★★★', '★★★★★']

const SaveRatingsBtn = document.createElement('input');

SaveRatingsBtn.setAttribute('type', 'button');

SaveRatingsBtn.setAttribute('value', 'save');

SaveRatingsBtn.setAttribute('onclick', 'onClickSaveBtn()');

const ratingPage = document.getElementById("rating");

const arrAllMovieRatings = [];

// 각 원소는 [작품성, 연기, 오락성, 스토리, 평균 점수] 값을 가진다.

function onClickSaveBtn(){

    let tempArrMovieRatings = [];

    for(movieRates in movieRatingSelections){

        let tempRating = document.getElementById(movieRatingSelections[movieRates]);

        tempArrMovieRatings.push(Number(tempRating.options[tempRating.selectedIndex].value));

    }

    tempArrMovieRatings.push(CalculateAverageRating());

    arrAllMovieRatings.push(tempArrMovieRatings);

}

function ShowRatingOptions(){

    for (select in movieRatingSelections){

        let ratingText = document.createElement('h1');

        let movieRatingSelection = document.createElement('select');

        let movieRatingDiv = document.createElement('div');

        movieRatingDiv.setAttribute("class", "movie-rating-div");

        movieRatingSelection.setAttribute("id", movieRatingSelections[select]);

        movieRatingSelection.setAttribute("onchange", "onChangeRating()");

        ratingText.textContent = movieRatingSelections[select];

       

        let i = 0;

        for (ratevalue in ratingValues){

            let movieRatingOption = document.createElement('option');

            movieRatingOption.setAttribute('value', ratingValues[ratevalue]);

            movieRatingOption.textContent = ratingStars[i];

            movieRatingSelection.appendChild(movieRatingOption);

            i++;

        }

       

        movieRatingDiv.appendChild(ratingText);

        movieRatingDiv.appendChild(movieRatingSelection);

        ratingPage.appendChild(movieRatingDiv);

    }

}

function onChangeRating(){

    averageRating.textContent = CalculateAverageRating() + '/' + ratingStars.length;

}

function CalculateAverageRating(){

    let averageRateScore = 0;

    for(movieRates in movieRatingSelections){

        let tempRating = document.getElementById(movieRatingSelections[movieRates]);

        averageRateScore += Number(tempRating.options[tempRating.selectedIndex].value);

       

    }

    return averageRateScore / movieRatingSelections.length;

}

function ShowAverageRating(){

    averageRatingText.textContent = "평균 점수?";

    ratingPage.appendChild(averageRatingText);

    ratingPage.appendChild(averageRating);

}

function ShowMovieName(){

    movieNameText.textContent = "영화 제목";

    movieName.textContent = "아바타 2 : 물의 길";

    ratingPage.appendChild(movieNameText);

    ratingPage.appendChild(movieName);

}

ShowMovieName();

ShowRatingOptions();

ShowAverageRating();

ratingPage.appendChild(SaveRatingsBtn);

menu.js

const movieList = document.createElement("ol");

const menu = document.getElementById("menu");

const movieTitleNameTextBox = document.createElement("input");

const movieTitleNameSubmitButton = document.createElement("input");

movieTitleNameTextBox.setAttribute("type", "text");

movieTitleNameSubmitButton.setAttribute("type", "button");

movieTitleNameSubmitButton.setAttribute("value", "subnit");

let i = 0;

function onClickAddMovieTitleToList(){

    let movieTitle = document.createElement("li");

    movieTitle.textContent = movieTitleNameTextBox.value;

    movieTitle.setAttribute('id', i+'-title-id');

    movieList.appendChild(movieTitle);

    movieTitleNameTextBox.value = '';

    i++;

}

movieTitleNameSubmitButton.addEventListener("click", onClickAddMovieTitleToList);

menu.appendChild(movieList);

menu.appendChild(movieTitleNameTextBox);

menu.appendChild(movieTitleNameSubmitButton);

style.css

*{

    margin:0px;

    padding:0;

    box-sizing: border-box;

    font-family: 'Sofia Sans', sans-serif;

}

#menu{

    text-align: center;

    border-right: black solid 5px;

    padding-right: 10px;

}

#rating{

    justify-self: center;

    text-align: center;

   

}

.container{

    display:grid;

    grid-template-columns: 1fr 6fr;

    grid-template-rows: minmax(900px, auto);

}

.movie-rating-div{

    margin: 20px;

}

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="container">

        <div id="menu" class="item"></div>

        <div id="rating" class="item"></div>

    </div>

    <script src="menu.js" type="text/javascript" class="item"></script>

    <script src="script.js" type="text/javascript" class="item"></script>

</body>

</html>

 

이 다음으로는

영화 제목을 등록하고 별점을 등록하면,

리스트에 저장이 되도록하고,

사용자가 리스트에 있는 제목을 클릭할 때

다시 이전에 매겼던 별점을 불러올 수 있는 기능을 구현해야 한다.

위 내용이 구현되었다면,

각 별점 항목에 대해서 추가 코멘트를 작성할 수 있도록 하는 기능과

코멘트를 저장하는 자료 구조를 만들어야 한다.