const getMovie = async (val = "") => {
const options = {
method: "GET",
headers: {
accept: "application/json",
Authorization:
"Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3ZTgyODI3ZDZmZmE5NDRjNDU2N2FlODIzZTE1ZTJkZiIsInN1YiI6IjY2MjYyNTI4ZWI3OWMyMDE2NWQ0M2Q1MSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.bdvFO8e_naip64AYTGlq-zQSBQdh2vSqX6BTdRn-yH4",
},
};
const response = await fetch(
options
);
const json = await response.json();
console.log(response);
console.log(json);
const responseArray = json.results;
console.log(responseArray);
const movieInfo = responseArray
.map((movieInfo, i) => {
if (movieInfo.title.includes(val))
return `
<div class="movieInfo" id="${movieInfo.id}">
${movieInfo.poster_path}" />
<p class="movieTitle" id="movieName">${movieInfo.title}</p>
<p class="movieOverview">${movieInfo.overview}</p>
<p class="movieVoteAverage">Rating: ${movieInfo.vote_average}</p>
</div>`;
})
.join("");
console.log(movieInfo);
const movieSection = document.getElementById("movieSection");
//movieSection.innerHTML = "";
movieSection.innerHTML = movieInfo;
// const movieName = document.querySelectorAll(".movieTitle");
document.addEventListener("click", (event) => {
// const movieId = event.target.getAttribute("class");
if (event.target.closest(".movieInfo")) {
alert("movieID : " + event.target.closest(".movieInfo").id);
// console.log(event.target.closest(".movieInfo").children[1].innerText);
// console.log(event.target.closest(".movieInfo").children);
}
});
const searchInput = document.getElementById("Text");
const searchButton = document.getElementById("Button");
searchButton.addEventListener("click", (event) => {
event.preventDefault();
const val = searchInput.value;
getMovie(val);
// 전체 리스트 저장 -> 배열 필터 함수(맵 필터 중요)
// 객체: 변수 타입(데이터 타입 { key: value })
// 함수: 인풋 아웃풋 (매개변수(공백도) , 리턴값) 필수
});
};
await getMovie();
개인 과제를 어느정도 완성하였고 , 아직 완성하지 못하여 도움이 필요하신 분들께
설명을 드리며 다시 한 번 코드를 돌아보는 학습 시간을 가졌다