What I learned new

---

검색기능 구현과 카드를 누르면 작동하는 작업을 했다.
hide(): 선택한 요소를 사라지게 한다.
show(): 선택한 요소를 나타나게 한다.
val(): 양식(form)의 값을 가져오거나 값을 설정
keyup() : keyboardevent, 키를 땔 때! keydown 이나 keypress도 있음

What I tried

---

      // 이미지 클릭시 아이디 나오게 하기
      $(`#${id} img`).click(() => {
        window.alert(`영화 ID: ${id}`);
      });

$(`#${id} img`) 이 얼마나 이해가 안 가는 코드인가!
우선$()은 jquery 선택자이고, #${id}는 cardTemp에서 div박스의 id를 ${id}로 지정해주어서 #이 붙은거고 img는 id로 식별되는 영화 카드 내의 특정 이미지를 뜻한다
결론은 그 이미지를 click했을 때 window.alert으로 id가 뜬다는 것!

// 클릭과 입력을 위해 변수에 할당해주기
    let inputElement = $(document.querySelector("input"));
    let mouseDown = document.querySelector("button");

    // 검색하는 함수
    function search() {
      let inputText = inputElement.val().toLowerCase(); //input에 입력 받은 값을 담아주고 소문자 처리.
      $(".movie-card").hide(); // 일단 다 숨기기
      
      // 입력값이랑 title이랑 비교하여 
      // includes(): 배열의 항목에 특정 값이 포함되어 있는지를 판단 T/F 값으로 반환.
      //movie["id"]와 동일한 요소
      results
        .filter((movie) => movie["title"].toLowerCase().includes(inputText))
        .forEach((movie) => {
          $(`#${movie["id"]}`).show();
        });
    }

    mouseDown.addEventListener("click", search);
// enter의 키코드는 13번
    inputElement.keyup(function press(enter) {
      if (enter.keyCode == 13) {
        search();
      }
    });
  });

우선 button과 input를 변수에 각자 지정해놓고, 검색하는 함수를 만들어줬다.
input에 입력한 값을 가져오거나 값을 설정하는 메소드인 val()로 입력 값을 가져온 뒤 소문자로 처리한다.
검색 값과 일치하는 카드만 남길 거니까 hide로 다 숨겨주고 입력 값과 title 비교 하여 includes() 함수로 필터링 해준다. id로 설정한 이유는 id가 고유 식별자이기 때문!
참고 : https://blog.munilive.com/posts/keyboard-keycode-value.html

Realization

---

hide(), show(), val(), keyup()등 다양한 메서드를 배웠고, jquery 선택자에 조금 익숙해 진 거 같다.