[내일배움캠프] 노드몬 팀 과제 영화사이트 제작-1-

작업파일 나누기

 

각자가 작업하는 부분을 js파일과 css파일로 나누어서 작업했다.

 

  <link rel="stylesheet" href="./style/info.css">
  <script src="./src/moviedetail.js"></script>
  <script src="./src/visitSave.js"></script>
  <script src="./src/visitLoad.js"></script>
  <script src="./src/visitDelete.js"></script>
  <script src="./src/visitUpdate.js"></script>

src기능을 사용해서 따로 떨어져있는 파일이 html에 적용되도록 했다.

 

상세페이지 이동

 

function select(id) {
  alert(`영화 id: ${id}`);
  (window.location.href = "detail.html?" + id);
}

기존의 alert 함수에 상세페이지로 가는 명령어를 추가했다.

 

const url = window.location.search
const arr = url.slice(1, url.length);

url에 있는 id를 arr에 지정했다.

 

상세페이지 정보

 

function detailload() {
  fetch(
    "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1",
    options
  )
    .then((response) => response.json())
    .then((data) => {
      const rows = data["results"];
      //find함수를 사용해서 필요한 데이터만 뽑음//
      const moviedata = rows.find(data => data.id == arr);
      //find로 뽑은 데이터는 객체기 때문에 배열을 래핑함//
      const movie1 = [moviedata];
      //map으로 붙힐 부분 //
      const infoBox = document.querySelector(".movieImgScript");
      const titleBox = document.querySelector(".movieTitleAve");
      //map으로 innerHTML에 붙힘//
      infoBox.innerHTML = movie1.map(
        (movie1) => `<img src="https://image.tmdb.org/t/p/w500${movie1.poster_path}" alt="${movie1.title}" class="infoImg">
        <div class="infoOverview">${movie1.overview}</div>
        `
      );
      titleBox.innerHTML = movie1.map(
        (movie1) => `<h3 class="infoTitle">${movie1.title}</h3>
        <p class="infoAverage">${movie1.vote_average}</p>`
      )
    })
};

영화 리스트 api에 find함수와 맨 처음에 지정했던 id를 사용해서 데이터를 특정한다.

find는 객체를 반환하기 때문에 배열을 래핑해야한다.

 

innerHTML 과 map을 사용해서 원하는 데이터를 붙혀준다.