Project 3: Movie Finder

[raghav.srivastava]

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

[Nidhi26Singh08]

yes i did but still no response

[raghav.srivastava]

@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.

[bt19eee021]

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

[bt19eee021]

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

[ravi.ujjwal]

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.

[bt19eee021]

Sir, its already done. thank u very much for the help.

[kunalshome2001]

Hello, my movie finder isn’t working as well and I can’t find the mistake
Kindly help me out
It’d be a great help if this could be fixed asap
Most probably the problem is in the js code
The codes are below:
HTML:

Movie Finder

Movie Finder

Search

CSS:
body{
box-sizing: border-box;
margin:0;
padding:0;
font-size:18px;
font-family: ‘Lucida Sans’, ‘Lucida Grande’;
background-color: lightblue;
}
.title{
font-size:30px;
font-weight: 600;
color: white;
background-color: darkblue;
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: darkblue;
font-family: ‘Lucida Sans’;
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: mediumblue;
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:
const API_URL =“http://www.omdbapi.com/?i=tt3896198&apikey=f472daf0&s=”;
const API_URL_SEARCH =“http://www.omdbapi.com/?apikey=f472daf0&i=”;

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)
}
});

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 Date</b><span class="value">${imovie.Realeased}</span></span> <span class="movie-title"><b>Genre</b><span class="value">${imovie.Genre}</span></span> </div> </div> ;
card.appendChild(movieElm);
}

[kunalshome2001]

could you solve this query asap?

[ravi.ujjwal]

@kunalshome2001
is your query resolved?

[kunalshome2001]

not yet, can you help me out?

[ravi.ujjwal]

Hi,

Kindly share the HTML code.

[kunalshome2001]

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Movie Finder</title>
	<link rel="stylesheet" href="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>

</body>
<script src="movie_finder.js"></script>
</html>

[kunalshome2001]

CSS code:

body{
	box-sizing: border-box;
	margin:0;
	padding:0;
	font-size:18px;
	font-family: 'Lucida Sans', 'Lucida Grande';
	background-color: lightblue;
}
.title{
	font-size:30px;
	font-weight: 600;
	color: white;
	background-color: darkblue;
	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: darkblue;
	font-family: 'Lucida Sans';
	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: mediumblue;
	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/?i=tt3896198&apikey=f472daf0&s=";
const API_URL_SEARCH ="http://www.omdbapi.com/?apikey=f472daf0&i=";

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)
	}
});

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 Date</b><span class="value">${imovie.Realeased}</span></span>
		        <span class="movie-title"><b>Genre</b><span class="value">${imovie.Genre}</span></span>
		      </div>
		    </div>
 `;
    card.appendChild(movieElm);
}

[ravi.ujjwal]

Hi @kunalshome2001

It was a very minor error from your side.

Just change the search-input to search_input in the HTML code so that the JavaScript can refer to the correct element.

<div class="search-box">
	<input type="text" placeholder="Search" 
	class="form-input" id="search_input">
	<button class="search">Search</button>
</div>

[kunalshome2001]

yea its working now, thank you