[내일배움캠프] 개인 과제 영화 사이트 -바닐라스크립트로 제작- 1

먼저 영화api를 받아온다.

받아오고 싶은 영화의 정보를 클릭 후 코드를 복사한다.

 

 const options = {
                method: 'GET',
                headers: {
                    accept: 'application/json',
                    Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1NmQ2MDljY2M4YTk2OGQ4NmY3MDY5MGE5MmU3ZWMwMCIsInN1YiI6IjY0NzA4YTIwNzcwNzAwMDExOTI0ODFmYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.5NjHTZbzSO0wzPIHy0BTBCKG3LvrIYUl4GMa0h1E5VE'
                }
            };

            fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
                .then(response => response.json()).then(data => {
                    let rows = data['results']
                    rows.forEach((a) => {
                        let title = a['title']
                        let overview = a['overview']
                        let img = a['poster_path']
                        let grade = a['vote_average']
                        let id = a['id']

받아온 api의 데이터를 forEach를 통해서 필요한 데이터만 설정한다.

 

그리고 받아온 데이터를 카드리스트의 형태로 UI를 구현한다.

 

나는 단순히 카드에 정보를 넣은 것이 아니라, 카드의 전면부에는 영화의 이미지와 제목이 들어가고

후면부에는 영화의 평점과 영화의 줄거리가 들어가게 만들려고 한다.

 

<div class="flip-box">
  <div class="flip">
   <div class="front">
    <div class="img-cut"> 
     <img src= class="card-img">
    </div> //img-cut 닫기//
      <h5 id="movie_title" class="card-title"></h5>                                                                                               
     </div> //front 닫기//
   <div class="back">
    <p class="card-grade"> </p>
    <p class="card-text"></p>
   </div> //back 닫기//
  </div> //flip 닫기//
 </div> //flip-box 닫기//

 

영화 정보가 들어갈 뼈대를 구축한다.

 .flip {
            width: 100%;
            height: 100%;
            text-align: center;
            transform-style: preserve-3d;
            transition: 0.5s;
            position: relative;
        }
        /* position: absolute; 상위 요소의 절대적인 위치에 설정 backface-visibility: hidden; 앞면카드와 뒷면카드의 '뒷면'을 투명하게 한다.  */
        .front,
        .back {
            border-radius: 20px;
            position: absolute;
            backface-visibility: hidden;
            width: 100%;
            height: 100%;
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.2);
        }

        /* transform: rotateY(180deg); 카드를 y축으로 180도 뒤집는다. */
        .back {
            transform: rotateY(180deg);
        }
        /* 커서를 대면 y축으로 180도 뒤집는다. */
        .flip-box:hover .flip {
            transform: rotateY(-180deg);
        }

그리고 카드가 뒤집히는 flip을 구현하기 위한 css를 만든다.

필요한 요소를 먼저 구현한 다음에 추가로 css를 꾸민다.

 

카드의 리스트가 추가될 때 마다 정렬시켜 주는 css 요소를 넣는다.

 .cards-box {
            display: grid;//가로 세로 정렬이 가능하게 해주는 속성//
            grid-template-columns: 1fr 1fr 1fr 1fr;//4열 종대로 정렬//
            background-color: rgb(223, 223, 223);
            width: 100%;
            height: 100%;
        }

 

마지막으로 forEach를 통해서 만든 데이터를 적재적소에 템플릿으로 위치시킨 다음에

querySelector로 html을 붙힐 장소를 지정하고 insertAdjacentHTML로 붙힌다.

 let temp_html = `<div class="flip-box">
                                  <div class="flip">
                                      <div class="front">
                                      <div class="img-cut"> 
                                      <img src="https://image.tmdb.org/t/p/original/${img}"
                                      class="card-background">
                                      <img src="https://image.tmdb.org/t/p/original/${img}"
                                      class="card-img">
                                      </div>
                                      <h5 id="movie_title" class="card-title">${title}</h5>                                                                                               
                                      </div>
                                      <div class="back">
                                      <p class="card-grade">${grade}</p>
                                      <p class="card-text">${overview}</p>
                                      </div>
                                  </div>
                              </div>`;
              document.querySelector("#cards-box").insertAdjacentHTML("beforeend", temp_html)//append()가 태그까지 같이 붙혀버려서 insertAdjacentHTML(태그요소만 넣는 메소드)를 사용//

결과물