13일차( keyup, autofocus )

주 기능 두가지 (

   1. api 호출 후 필요한 항목을 할당 및 웹 페이지에 출력

   2. 항목 중 title을 input에 입력하면 input의 값과 일치하는 title의 card(div)만 출력

)를 구현하고

나머지 옵셔널한 기능을 구현했다. css는 따로 추가적으로 작성하지 않겠다.

 

// Enter 입력시 button 클릭 호출, *html - input 태그에 따로 keyup=""을 삽입하지않아도 작동한다

searchInput.addEventListener("keyup", function(e){

     if(e.code === 'Enter'){

         searchButton.click();

    }

})

// 페이지 랜딩시 input 태그에 자동으로 커서가 들어가서 깜빡거리는 autofocus는

input 태그 안에 autofocus 만 추가해주면 됐다.

<input id="inputBox" autofocus class="search-box" type="text" placeholder="Please enter the Title.">

 

css는 display : flex or gird 정도 사용을 권장했는데 gird로 card의 배열정도만 정리해주고 마무리했다.

재미있는 프로젝트였다. 기능 구현에 대한 갈증이 있었는데 이제 시작이라는 생각에 신난다.

잘 하던 못 하던 비비면서 어떻게든 해나갈것이다.

내일은 후기 전체 리뷰 및 팀프로젝트 발제가 남아있다.