개인과제(영화사이트 바닐라스크립트) (3) 썸네일형 리스트형 [내일배움캠프] 개인 과제 영화 사이트 -바닐라스크립트로 제작-2 영화카드를 선택하면 영화의 id를 alert하는 기능을 구현해야한다. function select(id) { alert(`영화 id: ${id}`); } id값을 매게변수로 alert하는 함수를 만든다. let temp_html = ` 카드의 요소를 전부 담고 있는 div에 onclick으로 함수를 실행하도록 설정한다. 결과물 영화를 검색기능 구현하기 Search : 영화를 검색할 수 있도록 input칸과 버튼을 만든다. 버튼을 클릭하면 검색한 영화를 불러오는 search()함수를 실행한다. function search() { const search_Input = document.querySelector('#search-input');//검색 값을 가져온다.// const search_word = sea.. [내일배움캠프] 개인 과제 영화 사이트 -바닐라스크립트로 제작- 1 먼저 영화api를 받아온다. 받아오고 싶은 영화의 정보를 클릭 후 코드를 복사한다. const options = { method: 'GET', headers: { accept: 'application/json', Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1NmQ2MDljY2M4YTk2OGQ4NmY3MDY5MGE5MmU3ZWMwMCIsInN1YiI6IjY0NzA4YTIwNzcwNzAwMDExOTI0ODFmYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.5NjHTZbzSO0wzPIHy0BTBCKG3LvrIYUl4GMa0h1E5VE' } }; fetch('https://api.themoviedb.org/3/mo.. [내일배움캠프] 개인 과제 영화 사이트 -바닐라스크립트로 제작- 과제 개요 ●순수 바닐라 자바스크립트만으로 영회리스트 조회 및 검색 UI 구현 ●스타일링 작업하며 css 와 친해지기 요구사항 ●jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기 ●TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기 ●영화정보 카드 리스트 UI 구현 ▷TMDB에서 받아온 데이터를 브라우저 화면에 카드 형태의 데이터로 보여줍니다. ▷카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수로 들어갑니다. ▷카드 클릭 시에는 클릭한 영화 id 를 나타내는 alert 창을 띄웁니다. ●영화 검색 UI 구현 ▷API로 받아온 전체 영화들 중 영화 제목에 input 창에 입력.. 이전 1 다음
