팀프로젝트(2)

인기순, 이름순 정렬 기능을 만들었습니다.

const sortByRatingBtn = document.getElementById("sortByRating");

const sortByNameBtn = document.getElementById("sortByName");

sortByRatingBtn.addEventListener("click", () => {

  sortMoviesByRating();

});

sortByNameBtn.addEventListener("click", () => {

  sortMoviesByName();

});

우선 버튼을 누르면 작동하는 함수를 만들고,

function sortMoviesByRating() {

  const moviesContainer = document.getElementById("main");

  const movies = Array.from(moviesContainer.children);

  const sortedMovies = movies

    .map((movie) => ({

      element: movie,

      rating: Number(movie.querySelector(".green").textContent)

    }))

    .sort((a, b) => b.rating - a.rating)

    .map((movie) => movie.element);

  moviesContainer.innerHTML = "";

  sortedMovies.forEach((movie) => {

    moviesContainer.appendChild(movie);

  });

}

평점순으로 sort함수를 이용해 오름차순으로 정렬이 되는 기능을 만들었습니다.

map메서드를 사용해 요소에 대한 함수를 호출 후 반환한값으로 새로운 배열을 만들고

   rating: Number(movie.querySelector(".green").textContent)

이 분은 green이란 클래스안에 있는 글자(평점이 적혀있음)을 숫자로 바꾼뒤 
바로 밑 sort를 이용해 b -a 의 결과가 양수이면 b를 a보다 앞에 위치시키고 음수이면 a를 b보다 앞에 위치시킵니다.
그리고 정렬된 배열에 다시 map메서드를 사용했는데 이때 각 요소는 이전에 생성된 객체들을 포함하고 있습니다.
rating 값은 이제 필요없기 때문에 element값만 사용해 새로운 배열을 생성합니다.

그리고 innerHTML을 사용해 기존에 있던 영화목록을 비워주고 
forEach메서드를 사용해서 각각의 영화객체를 다시 채워줍니다.

 

function sortMoviesByName() {

  const moviesContainer = document.getElementById("main");

  const movies = Array.from(moviesContainer.children);

  const sortedMovies = movies

    .map((movie) => ({

      element: movie,

      title: movie.querySelector(".movieinfo h3").textContent

    }))

    .sort((a, b) => a.title.localeCompare(b.title))

    .map((movie) => movie.element);

  moviesContainer.innerHTML = "";

  sortedMovies.forEach((movie) => {

    moviesContainer.appendChild(movie);

  });

}

이름순 정렬도 비슷한데 조금 다른점이라면 
숫자로 형변환을 안하고
localeCompare를 이용해서 문자끼리 비교를 한 것입니다.