오늘의 학습내용 : 영화 검색 기능 구현하기
| 3일차 목표 |
| HTML, CSS 사용하여 검색창 만들기 |
| 실시간으로 검색창에 입력한 영화 검색기능 만들기 |
◆ HTML, CSS 사용하여 검색창 만들기
사용자가 입력한 검색어로 영화 목록을 필터링하는 검색 기능을 구현한다. 우선 검색을 위한 Search bar를 html로 header 영역에 만들었다. CSS는 매번 원하는 이펙트를 구현할 수 있는 방법을 일일이 구글링하는데, 내 디자인 감각이 그다지 좋은 편이 아님을 다시금 깨닫는다.
<body>
<!-- searchbar -->
<header>
<input type="text" class="searchInput" placeholder="영화를 검색하세요">
</header>
<div class="movieList">
<!-- 카드 생성되는 영역 -->
</div>
<script src="script3.js"></script>
</body>header {
display: flex;
align-items: center;
position: relative;
background-color: #58db9a;
padding: 10px;
}
.searchInput {
width: 100%;
height: 35px;
padding-left: 40px;
border-radius: 26px;
letter-spacing: inherit;
font-size: 1rem;
background: rgba(0, 0, 0, 0.4);
color: white;
border: 1px solid white;
outline: none;
}
.searchInput::placeholder {
color: white;
}
◆ 검색 기능 구현하기
// 검색 기능 추가
const searchInput = document.querySelector('.searchInput');
searchInput.addEventListener("input", () => {
const searchKeyword = searchInput.value.toLowerCase(); // 대소문자 관계 없이 검색
const searchURL = `https://api.themoviedb.org/3/search/movie?api_key=
${apiKey}&includeadult=false&query=${searchKeyword}&language=ko-KR&page=1`;
if (searchKeyword) {
fetchMovies(searchURL); // 검색어가 있으면 검색 결과 가져오기
} else {
fetchMovies(popURL); // 검색어가 없으면 인기 영화 목록 가져오기
}
});
// 인기 영화 가져오는 함수
fetchMovies(popURL);
과제에 제시된 조건에서는 ① 검색어 입력 후 버튼 클릭 / Enter 키 ② 검색창 입력 결과에 따라 실시간 중 방법을 택해 검색 기능을 만들도록 했다. html로 작성한 input text 영역에 입력한 결과에 따라 실시간으로 영화 검색 결과를 보여주기로 결정하고, 검색어와 관련된 영화만 화면에 나타날 수 있도록 구현한다. tmdb에서 받아오는 데이터에 영화 영제도 포함되어 있어서, 영문으로 검색할 때 대소문자와 관계 없이 검색될 수 있도록 toLowerCase 를 사용했다.
◆ 발생한 문제 해결
검색 결과가 표시될 때 기존에 생성한 인기 영화 목록 카드들이 사라지지 않고 남아 있는 문제가 있다. 뒤에 키워드 검색 결과로 나온 영화 카드들이 따라붙었다(...) 해결 방법은 몇 번의 구글링을 통해 어렵지 않게 찾을 수 있었는데, 기존의 영화 목록을 초기화해주는 코드를 넣는다.
function movieContainer(results) {
movieList.innerHTML = ''; // 기존 영화 목록 초기화
results.forEach(movie => { // 각 영화 데이터를 movie로 처리
const movieCard = document.createElement('div');
movieCard.classList.add('card');
movieCard.innerHTML = `
<img src="https://media.themoviedb.org/t/p/w220_and_h330_face
${movie.poster_path}" alt="noimage" class="movieimg">
<h3>${movie.title}</h3>
<p>평점 ${movie.vote_average}점</p>
`;
movieList.appendChild(movieCard); // movieCard를 movieList에 추가
});
}
'스파르타코딩클럽 > 과제' 카테고리의 다른 글
| [React 개인과제_입문 주차] (기록용) (0) | 2024.11.01 |
|---|---|
| [React 개인과제_입문 주차] (기록용) (0) | 2024.10.30 |
| [JavaScript 개인과제_기초 주차] 4일차: 영화 상세 페이지 구현 (1) | 2024.10.21 |
| [JavaScript 개인과제_기초 주차] 2일차: (2) | 2024.10.17 |
| [JavaScript 개인과제_기초 주차] 1일차: TMDB API 연동 및 데이터 가져오기 (0) | 2024.10.15 |