I’m getting no results in movie finder project.
This is my API key :-
http://www.omdbapi.com/?i=tt3896198&apikey=b11ee3bd
Hi @ShreyPatnaik,
On line 4, you have used document.getElementByID("movie-cards")[0], it should be
getElementsByClassName("movie-cards")[0]. Remember ids are unique to specific elements, but one class can apply to multiple elements, so the [0] notation fetches the first element using that class.
In your javascript file on line 35, it should be ${imovie.Poster} instead of $(imovie.Poster) in the src attribute of the img tag.
Do let me know if you need any other help.
Hi @ShreyPatnaik,
In your HTML file, you have imported the script outside the body tag. Please import it before like the following:
<script src="../javascript..........."></script>
</body>
</html>
Hi @raghav.srivastava
It is still not working after importing script tag inside body tag
My webpage isn’t displaying any search results after entering movie name.
@ShreyPatnaik It seems like an invalid path issue, the path to the javascript file may be wrong… Please share a screenshot of your folder structure.
Hi @ShreyPatnaik,
please try setting src attribute of the script tag as relative path ../javascript/movie_finder.js. If it doesn’t work please go to developer tools on chrome/other browsers. Then open the network tab. Then reload the page and send a screenshot.
I set the src attribute as a relative path.
Here is the screenshot of Network Tab in Developer console.
Should I paste the code for all the three files as text ?
Hi @ShreyPatnaik,
As I can see your browser is indeed loading the javascript, meaning the path is correct. Please enter name of a movie, and hit the search button while the network tab is open and upload the screenshot. Yes, you may share the code as text.
This is the HTML CODE
<head>
<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">
</head>
<body>
<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>
<script src="../javascript/movie_finder.js"></script>
</body>
Code for CSS
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 20 px;
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;
}
Code for JavaScript
const API_URL = “http://www.omdbapi.com/?i=tt3896198&apikey=b11ee3bd”;
const API_URL_SEARCH= “http://www.omdbapi.com/?apikey=b11ee3bd=”;
var search_input = document.getElementById(“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= `
<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);
}
Hi @ShreyPatnaik,
There were some basic mistakes in your js, I have posted them below and added appropriate comments
Remember, " and “,” are different characters, always use "(straight quotes)
//const API_URL = “http://www.omdbapi.com/?i=tt3896198&apikey=b11ee3bd”;
const API_URL = "http://www.omdbapi.com/?i=tt3896198&apikey=b11ee3bd";//made change " not “
// const API_URL_SEARCH= “http://www.omdbapi.com/?apikey=b11ee3bd=”;
const API_URL_SEARCH= "http://www.omdbapi.com/?apikey=b11ee3bd=";//made change " not “
var search_input = document.getElementById("search-input");//made change, search-input, not search_input, also " not “
var card = document.getElementsByClassName("movie-cards")[0];//made change " not “,getElementsByClassName not getElementByClassName
document.getElementsByClassName("search")[0].addEventListener("click",function(){//made change " not “ ,getElementsByClassName not getElementByClassName
console.log(search_input.value);
@ShreyPatnaik please append t= ( https://www.omdbapi.com/?i=tt3896198&apikey=YOUR_API_KEY&t=) in the link. Also, please delete your API key from the forum, as it should be kept private.