Error in Movie Finder(project 3) js code

#1

Sir, I have pasted my js code and attached screenshot of my webpage below. I have checked the code many times and even the past posted issues are not matching with this. I kindly request you to help me in resolving this issue.

Screenshot (270)
Screenshot (270)1920×1080 80.3 KB 

const API_URL = "http://www.omdbapi.com/?i=tt3896198&apikey=dd241b5a&s=";

const API_URL_SEARCH = "http://www.omdbapi.com/?apikey=dd241b5a&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 = movieData.json();

        movie_display(movieDataobj);

    });

}

function movie_display(imovie){

    const movieElm = document.createElement("div");

    movieElm.classList.add("movie-cards");

    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.Released}</span></span>

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

            </div>

        </div>

    `;

    card.appendChild(movieElm);

}
#2

Hi @f20201586

Kindly include your HTML and other files in a zip and send it here so that I can look into it.

Regards

#3

Here is my Html Code:-

<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">

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

Here is 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:lightblue;

}

.title{

font-size: 30px;

font-weight: 600;

color: whitesmoke;

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', '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;

}

.cards{

display: flex;

justify-content: space-between;

align-items: center;

color: white;

background-color: darkviolet;

margin: 20px;

padding: 30px;

width: 700px;

}

.movie-title{

display: flex;

justify-content: space-between;

align-items: center;

width: 300px;

margin: 0 200px;

}

.value{

font-size: 15px;

width: 200px;

}

Here’s My Js code:-
const API_URL = “http://www.omdbapi.com/?i=tt3896198&apikey=df019e74&t=”;

const API_URL_SEARCH = “http://www.omdbapi.com/?apikey=df019e74&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.imbdRating}</span></span>

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

<span class="movie-title"><b>Relased Date</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);

}

It is not showing desire output Please help me out ASAP

#4

I have asked our team to look into it