Project 3: Movie Finder

@raghav.srivastava I had made the changes but it is still showing some error.
Console shows:
“Uncaught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
at Function.from ()
at showMovies (movie_finder.js:24:8)
at getMovies (movie_finder.js:19:2)”

Hi @santanusingh018 ,
Can you please share the code?

@raghav.srivastava
My html code:

My js code:

Hi @santanusingh018 ,
Make the following changes,
Change &t= to &s=

const API_URL="http://www.omdbapi.com/?apikey=[yourkey]&s="

Also,you may remove Arrays.from()

It should work

1 Like

@raghav.srivastava yes now after changing the api, I am getting the results. Thank you for your help.

1 Like

M




ovie finder:javascript not working

@Nidhi26Singh08 Please open the developer tools, go to the network tab, reload the page and share a screenshot.

@Nidhi26Singh08 Please share your entire code as text.

My html code

Movie Finder
    <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>

    <script src="../javascript/movie_finder.js"></script>

  </body>
                                  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 JAVASCRIPT code

const API_URL =" http://www.omdbapi.com/?i=tt3896198&apikey=2b813b40&s=";
const API_URL_SEARCH = " http://www.omdbapi.com/?apikey=2b813b40&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=’

Poster
Title${imovie.Title} Rating${imovie.imdbRating} Director${imovie.Director} Released${imovie.Released} Genre${imovie.Genre}
'; card.appendChild(movieElm); }

@Nidhi26Singh08 there is a difference between single quote (') and backtick (`).

On line number 31 in your javascript,

movieElm.innerhtml=`//changed to ` from '

Poster
Title${imovie.Title} Rating${imovie.imdbRating} Director${imovie.Director} Released${imovie.Released} Genre${imovie.Genre}
`;//changed to ` from '

For multiline strings in javascript, we use backticks,not single quotation mark.

It’s not showing the image of the movie

@Nidhi26Singh08 make the following changes, and replace [yourkey] with your API key.


I checked the url on vs code and it is showing this

@Nidhi26Singh08 did you replace [yourkey] with your API key?

yes i did but still no response

@Nidhi26Singh08 Please upload your html, css and javascript files on google drive and share a public link so I can better understand the issue and provide a solution.

sir, i’m not getting results on searching any movie name in the project
this is drive link of my code
https://drive.google.com/drive/folders/1V_avxoMiT0JKaXJDhc6qSmmTkXcmoISR?usp=sharing

sir, please if anyone could reply, in could be of great help

Hi,

I have fixed the code. There were few minor errors. Kindly check the code I have attached and compare with yours.

moviefinder.js

var search_input= document.getElementById("search-input");
var 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);
	}
});

moviefinder.html

</body>
<script src="../javascript/moviefinder.js"></script>
</html>

Kindly let me know if you need any further help.