개발일지
[내배캠] 영화검색페이지 만들기 본문
내배캠 첫 번째 개인프로젝트 영화정보 오픈API TMDB를 이용한 영화검색 사이트 만들기!
📌 필수요구사항
1) jQuery 라이브러리 사용 없이 순수 바닐라 자바스크립트 사용하기
2) TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기
3) 영화정보 카드 리스트 UI 구현 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수로 들어갑니다.
4) 영화 검색 UI 구현
5) 안내해준 javascript문법 요소를 이용하여 구현
위 5가지 필수요구사항에 만족하는 사이트를 만들면 되는 과제였다 !!
📌 과제 만들기
일단 과제에 들어가기 전 화면에 보이는 틀부터 잡아주었다.
<body>
<script src="js/movie.js"></script>
<header><h1 class="title">내배캠 최고 평점 영화 콜렉션</h1></header>
<form class="search">
<label for="movie_name">영화 검색 : </label>
<input
type="text"
placeholder="영화 제목을 검색해 보세요!"
id="movie_name"
/>
<button id="searchbtn">검색</button>
</form>
<section id="card"></section>
</body>section부분에 javascript로 카드를 삽입해 줄예정이다 ㅎㅎ
const movies = data.results; // 영화 목록 추출
const moviesArea = document.getElementById("card"); // html의 id 값 가져오기
function movieList(val = "") {
moviesArea.innerHTML = movies
.map((movie) => {
if (movie.title.toLowerCase().includes(val.toLowerCase())) {
return `
<div class="movie_card" onclick="showAlert(${movie.id})">
<img class="image" src="https://image.tmdb.org/t/p/w500${movie.poster_path}">
<h3>${movie.title}</h3>
<p class= "overview">${movie.overview}</p>
<p class= "vote_average" >Rating: ${movie.vote_average}</p>
</div>
`;
} // html 템플릿 추가
})
.join("");
}
movieList();
// 검색기능 구현을 위한 html id 가져오기
const searchInput = document.getElementById("movie_name"); // input
const searchBtn = document.getElementById("searchbtn"); // button
searchBtn.addEventListener("click", (e) => {
e.preventDefault();
const val = searchInput.value;
console.log(val);
movieList(val);
});
})
addEventListener를 이용하여 input value값을 매개변수로 넣어 위 함수를 한번 더 호출해 검색된 html 템플릿을 붙여 주었다..!
바닐라 스크립트로만 사이트를 만들어보는 건 처음이라 막막하고 모르는 것도 많았지만 혼자 검색도 해보고 직접 실패도 하고 성공도 하면서 재미있게 만들었던 것 같다 ㅎㅎ
내가 부족한 부분을 알게 되고 배울 수 있는 개인과제였다 !
다음프로젝트는 더 잘 만들어보자 화이팅👏🏻
'TIL' 카테고리의 다른 글
| TIL 2024.05.02 (0) | 2024.05.02 |
|---|---|
| TIL 2024.05.01 (0) | 2024.05.01 |
| TIL 2024.04.29 (0) | 2024.04.29 |
| TIL 2024.04.26 (0) | 2024.04.26 |
| TIL 2024.04.23 (0) | 2024.04.23 |