개인프로젝트

영화 api정보 검색으로 찾기

<div id="movie-info" style="color: white;"></div>

<script>
document.getElementById("search-form").addEventListener("submit", function(event) {
    event.preventDefault(); // 기본 이벤트(페이지 새로고침) 방지

    var searchTerm = document.getElementById("search-input").value; // 검색어 가져오기
//api 호출
   fetch(`http://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieInfo.json?key=f&movieCd=${movieCd}`)
        .then(response => response.json())
        .then(data => {
            // 가져온 데이터를 처리하여 원하는 형태로 표시
            var movieList = data.movieListResult.movieList;
            var movieInfoHTML = ""; // 영화 정보를 담을 변수 초기화

            // 여기서는 검색 결과에서 첫 번째 영화 정보만 사용하도록 했지만, 실제로는 여러 영화 정보를 처리해야 합니다.
            if (movieList.length > 0) {
                var movieInfo = movieList[0];
                movieInfoHTML = `
                    <h2>${movieInfo.movieNm}</h2>
                    <p>영화명(영문): ${movieInfo.movieNmEn}</p>
                    <p>제작연도: ${movieInfo.prdtYear}</p>
                    <p>상영시간: ${movieInfo.showTm}분</p>
                    <p>감독: ${movieInfo.directors}</p>
                    <p>배우: ${movieInfo.actors}</p>
                    <!-- 기타 정보들도 필요에 따라 표시 -->
                `;
            } else {
                movieInfoHTML = "<p>검색 결과가 없습니다.</p>";
            }
            
            document.getElementById("movie-info").innerHTML = movieInfoHTML;
        })
        .catch(error => {
            console.error("에러 발생:", error);
            // 에러 메시지 표시 등의 처리
        });
});

// 검색 버튼에 클릭 이벤트 리스너 추가
document.getElementById("search-button").addEventListener("click", function(event) {
    document.getElementById("search-form").dispatchEvent(new Event("submit"));
});
</script>