Regarding the project3(Movie finder)

#1 
<!DOCTYPE html>
<html lang="en">
<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="movie.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.js"></script>
</html>
#2 
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: lightskyblue;

}
.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: darkblue;
	font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	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: darkblue;
	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;
}
#3

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

const API_URL_SEARCH =“http://www.omdbapi.com/?apikey=ba027c07&i=”;

var search_input=document.getElementById(“search_input”);

var card=document.getElementByClassName(“movie-cards”)[0];

document.getElementByClassName(“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.createdElement("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.imbdRating}</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.Released}</span></span>

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

        </div>

    </div>

    ;

card.appendChild(movieElm);

}

#4

Please help …I have rechecked the code so many times but am unable to get the output. Thank You

#5

Hi @kariyamsumasree Can you please share Console screenshot of your movie finder page.

#6

Screenshot 2023-06-19 184451
Screenshot 2023-06-19 1844511738×961 181 KB

#7

Even when i change style attribute for its not cmg…

#8

Noted. Give me some time to check the error in your code .

#9

Hi, there are some error in your js code

  1. Make the changes in function movie_display(imovie)
const movieElm=document.createElement("div");
movieElm.classList.add("movie-card");
movieElm.innerHTML=`
  1. Make changes in first 4 line , use getElements instead of getElement
var search_input=document.getElementsById(“search_input”);
var card=document.getElementsByClassName(“movie-cards”)[0];
  1. In html code, make the changes
<input type="text" placeholder="search" class="form-input" id="search_input"/>

Do make the changes and let me know if it works.