24. 05. 03 TIL

오늘 한 것... 

 

전체적으로 html, css 수정하고 정렬 기능을 만들었다.

 

정렬 기능도 하,,, 이거 어떻게 만들어야 하나 싶어서

 

우리 팀원분 블로그를 참고해서 메모장에 써놓고 구현해보려고 했다.

 

 

 

이게뭔가싶겠지만...

 

일단 정렬 기능은 두개를 만들었는데

 

하나는 이름순, 다른 건 별점순이었다.

 

---

 

그 전에 만든 건 셀렉트 박스인데

 

기본 셀렉트 박스를 그대로 쓰기엔 너무 못생겨서............

 

다른 블로그를 또 참고해서 만들었다.

 

 

<button type="button" id="toggle-btn">
          정렬 🜄
        </button>

        <ul id="option-hide">
          <li><button type="button" class="option-btn" id="name-btn">이름순</button></li>
          <li><button type="button" class="option-btn" id='rating-btn'>별점순</button></li>
        </ul>

걍 간단하게 이정도로 만들었다.

 

정렬 버튼을 만들고, li태그로 버튼을 2개 연결한다.

 

정렬 버튼을 클릭해야 li 태그가 나타나도록 ul에는 기본적으로 display: none;을 준다.

 

#option-hide {
  display: none;

  border: none;
}

 

이제 정렬 버튼을 클릭하면 display가 block으로 바뀌면서 보이게 해야한다.

 

---

 

혹시나... 혹시나 서치에 걸려서 이 글이 보인다면 참고하지 마십시오 초보자의 코드입니다,,,

 

팀장님이 코드를 수정해주실 거라 진짜 코드 막 썼읍니다...;;

---

 

일단 상수에 html의 정렬 버튼을 할당한다.

 

sortBtn.addEventListener(
  'click',
  () =>
    (optionBtn.style.display =
      optionBtn.style.display === 'none' ? 'block' : 'none')
);

 

정렬 버튼을 클릭하면 짠...

 

삼항 연산자를 사용해서 optionBtn의 display가 none이면 block을 주고 아니면 none을 준다.

 

아주 간단하다.

 

---

 

그리고 정렬 기능!!

 

정렬 기능도 마찬가지로 상수에 죄다 할당한다.

const optionBtn = document.getElementById('option-hide');
const byNamed = document.getElementById('name-btn');
const byRating = document.getElementById('rating-btn');

하하하 진짜 초보자용 코드다.

 

지피티한테 줄여달라고 하면 줄여주긴 하는데 일단 냅뒀다.

 

 

먼저 이름순 코드를 가져와본다.

 

byNamed.addEventListener('click', async () => {
  const byNamedList = await movie();
  byNamedList.sort((a, b) =>
    a.title < b.title ? -1 : a.title > b.title ? 1 : 0
  );

  const movieCard = document.getElementById('movie-card-list');
  movieCard.innerHTML = '';

  byNamedList.map(({ poster_path, title, id }) => {
    movieCard.innerHTML += `<div class="movie-card">
      <img src="https://image.tmdb.org/t/p/original${poster_path}" alt="poster" onclick="alert('${id}')"/>
      <h2 class="movie-title">${title}</h2>
    </div>`;
  });
});

 

by named를 클릭하면 movie 함수의 api 정보를 가져올 테고,

이 정보는 byNamedList에 담아서 sort로 정렬한다.

 

sort에서 title을 뽑아 마찬가지로 삼항 연산자로 만들어준다.

(이유?... 그냥 제가 삼항 연산자를 조아하니까요,,,)

 

그리고 movieCard에 movie-card-list를 저장한 뒤

원래 movieCard애 ''를 넣어 빈 화면으로 만들어 준다.

 

다시 byNamedList를 가져와 map함수로 poste_path, title, id를 가져와서

innerHTML에 저렇게 나오도록 넣어주면 된다.

 

아주쉽지만 아주 긴 코드 ^^,,, 별점순도 비슷하다.

 

  a.vote_average < b.vote_average ? 1 : a.vote_average > b.vote_average ? -1 : 0

 

좀 길긴 한데 이름순이랑은 반대로 만들어 준다.

 

별점이 높은 순으로 떠야하니까.

 

어으 후련하다~

 

금요일이라서 그런가?