TMDB API 사용하기 4

사실 새벽에 방법을 찾아서 미리 코드를 추가하긴 했다.

 

1. 검색 창에 아무것도 입력하지 않았을 때도 alert 창을 띄우는 것

 

전

document.querySelector('#search-btn').addEventListener('click', function (event) {
        event.preventDefault();
        showResult();
      });
 
    function showResult() {
      let inputValue = document.querySelector('#input-text').value.toLowerCase(); //소문자로 변환

원래는 버튼을 클릭했을 때 새로 고침을 막으면서 showResult 함수가 실행되게 했고,

 

showResult는 inputValue를 가져와서 소문자로 값을 변환 시켰다.

 

 

후

 document.querySelector('#search-btn').addEventListener('click', function (event) {
        event.preventDefault();
        let inputValue = document.querySelector('#input-text').value.toLowerCase();
        inputValue.trim() === '' ? alert('검색어를 입력해주세요') : showResult(inputValue);
      });
 
    function showResult(inputValue) {
      let cards = document.querySelectorAll('.movie-card'); // 모든 영화 카드 선택

코드가 상당히 길어진 느낌은 있지만,,,

 

새로 고침을 막는 것까지는 같은데 내부에 inputValue 값을 소문자로 변환해 가져왔다. 

 

그리고 삼항 연산자를 사용해서 inputValue 내부에 내용이 없으면 alert가 뜨도록, 있으면 그대로 showResult가 실행되도록 바꿨다. 

 

그리고 그대로 showResult에 inputValue를 전달.

 

코드가 좀 길어진 감은 있지만 잘 실행된다.

 

 

 

2. movie img를 클릭했을 때만 movie id가 뜨게끔 하기

 

이건 쉬웠다. movie-card에 있는 onclick=alert를 movie img에 넣어주면 된다.

    return `<div class="movie-card"> 
      <img src="${movieImg}" alt="poster" onclick="alert(${movieId})"/>
      <h2 class="movie-title">${movieTitle}</h2>
      <p class="movie-overview">${movieOverview}</p>
      <p class="movie-vote">⭐️${movieVote}</p>
    </div>`

 

 

 

3. 그리고 피드백을 받았는데 폰트 크기, 색상이 잘 안 보인다는 피드백을 받아 수정했다.

+ 그리고 줄거리가 너무 길게 나오는 것 같아서 검색을 통해 긴 줄거리를 4줄만 나오게끔 수정했다.

 overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 4;

 

참고

https://kongmks.tistory.com/484

 

4. async / await + 주석을 사용해 코드의 가독성을 높여보면 좋겠다는 피드백을 받았는데

async와 await는 조금 더 공부가 필요할 것 같다,,,

 

5. 깃허브 커밋 메세지 좀 더 상세하게!

이건,,, 넘 사소한 거를 하나하나 기록하기 민망해서 그랬던 건데 코드를 먼저 좀 신중히 짜야할 것 같다.

지금까지는 그냥 막 올렸기 때문에,,,