I wrote the whole code properly without any error, but when opening movie-finder.html file in google chrome, and when typing the movie name and clicking on Search button, nothing displays, i have also activated the APIkey, but still nothing is shown when I click on search button, please help resolve my issue, here’s my whole code:
HTML code:
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title> Movie Finder </title>
<link rel= "stylesheet" href = "..//css/movie-finder.css">
<div class = "full_body">
<div class = "title"> Movie Finder </div>
<div class = "search-box">
<input type = "text" placeholder = "Search" class = "form-input" id = "search-input">
<button class = "search"> Search </button>
</div>
</div>
<div class = "movie-cards"> </div>
CSS code:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 18px;
font-family: "Helvetica Neue";
background-color: rgb(233, 233, 233);
}
.title {
font-size: 30px;
font-weight: 600;
color: white;
background-color: rgb(19, 19, 56);
width: 100%;
padding: 20px;
text-align: center;
}
.full_body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.form-input {
border: none;
outline: none;
background-color: white;
padding: 10px 20px;
border: 1px solid grey;
margin-right: 20px;
}
.search {
border: none;
outline: none;
background-color: rgb(19, 19, 56);
font-family: "Helvetica Neue";
padding: 10px 20px;
color: white;
}
.search-box {
display: flex;
justify-content: center;
align-items: center;
margin: 100px;
}
.movie-cards {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.card {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
background-color: rgb(24, 51, 59);
margin: 20px;
padding: 30px;
width: 700px;
}
.movie-title {
display: flex;
justify-content: space-between;
align-items: center;
width: 300px;
margin: 0px 200px;
}
.value {
font-size: 15px;
width: 200px;
}
JAVASCRIPT code:
const API_URL = “http://www.omdbapi.com/?apikey=[44813136]&s=”;
const API_URL_SEARCH = “http://www.omdbapi.com/?apikey=[44813136]&i=”;
let search_input = document.getElementById(“search_input”);
let card = document.getElementsByClassName(“movie-cards”)[0];
document.getElementsByClassName(“search”)[0].addEventListener(“click”,function(){
console.log(search_input.value);
const query = search_input.value;
if(query){
getMovies(API_URL+query);
}
});
async function getMovies(url){
const resp = await fetch(url);
const respData = await resp.json();
console.log(respData);
showMovies(respData.Search);
}
function showMovies(movies){
card.innerHTML = "";
movies.forEach(async function(movie){
const movieData = await fetch(API_URL_SEARCH+movie.imdbID);
const movieDataobj = await movieData.json();
movie_display(movieDataobj);
});
}
function movie_display(imovie){
const movieElm = document.createElement("div");
movieElm.classList.add("movie-card");
movieElm.innerHTML = `
<div class = "card">
<img src = "${imovie.Poster}" alt = "Poster" width = "300px" height = "300px"/>
<br>
<div class = "movie-description">
<span class = "movie-title><b>Title</b><span class="value">${imovie.Title}</span></span>
<span class = "movie-title><b>Rating</b><span class="value">${imovie.imdbRating}</span></span>
<span class = "movie-title><b>Director</b><span class="value">${imovie.Director}</span></span>
<span class = "movie-title><b>Released</b><span class="value">${imovie.Released}</span></span>
<span class = "movie-title><b>Genre</b><span class="value">${imovie.Genre}</span></span>
</div>
</div>
`;
card.appendChild(movieElm);
}