Movie finder project not working kindly check my mistake

#1

my html code:

Movie Finder
Movie Finder
Search 
</div>
<div class="movie-cards"></div>

MY CSS CODE:

body{
box-sizing: border-box;
margin:0;
padding:0;
font-size:18px;
font-family:‘Lucida Sans’,‘Lucida Sans Regular’,‘Lucida Grande’,‘Lucida Sans Unicode’,Geneva,Verdana,sans-serif;
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;
}
.form-input:focus{
background-color: white;
}
.search{
border:none;
outline:none;
background-color:blue;
font-family:‘Lucida Sans’,‘Lucida Sans Regular’,‘Lucida Grande’,‘Lucida Sans Unicode’,Geneva,Verdana,sans-serif;
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;
padding:0px 200px;
}
.value{
font-size: 15px;
width:200px;
}

MY JS CODE:

const API_URL=" http://www.omdbapi.com/?i=tt3896198&apikey=fdfa4beb&s=";
const API_URL_SEARCH = “http://www.omdbapi.com/?apikey=fdfa4beb&i=”;

var search_input =document.getElementsById(“search_input”);
var card =document.getElementByClassName(“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=`

         <img src= "${imovie.poster}" alt="poster" width="300px" height="300px"/>

         <br></br>

         <div class="movie-description">

	        <span class="movie-title"><b>title</b><span class="value">${imovie.title}</span></span>

	        <span class="movie-title"><b>title</b><span class="value">${imovie.imdb.Rating}</span></span>

	        <span class="movie-title"><b>title</b><span class="value">${imovie.director}</span></span>

	        <span class="movie-title"><b>title</b><span class="value">${imovie.released}</span></span>

	        <span class="movie-title"><b>title</b><span class="value">${imovie.genre}</span></span>

        </div>

    </div>
`;//backtick
card.appendChild(movieElm);

}

please let me know what mistake i am doing?

#2

There are a few errors in your code:

  1. In your JS code, you have used the wrong quotation marks. Instead of “ and ”, you should use ".
  2. In your JS code, you have a typo in the getElementById method. It should be getElementById (not getElementsById).
  3. In your JS code, you have a typo in the getElementByClassName method. It should be getElementsByClassName (not getElementByClassName).
  4. In your JS code, you have a typo in the showMovies function. The parameter name is Movies (with an uppercase M), but you are using movies (with a lowercase m) in the forEach loop.

Do let us know if it helps you .

#3

still not working , i rectified these mistakes but still no output

#4

Screen Shot 1945-02-13 at 11.18.34 PM
Screen Shot 1945-02-13 at 11.18.34 PM1440×900 208 KB

#5

Give me some , i will check it again.

#6

??? whats’s the mistake?

#8

Hi @2001721075007 Can you share me the screenshot of output page , the error page . If possible share me the console page screenshot of your output.

#9

i got it done…thanks