Movie finder issue

#1

Due to some reason I am not able get any output even after searching for the movie. I think there is some error in my js code. Pls help.
Html code:

<!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="../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>
</body>
<script src="../javascript/movie_finder.js"></script>
</html>

Css code:

body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 20px;
    background-color: rgba(75, 77, 77, 0.496);
}

.title{
    font-size: 30px;
    font-weight: 700;
    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 15px;
    border: 1px solid grey;
    margin-right: 20px;
    border-radius: 50px;
}
.form-input:focus{
    background-color: whitesmoke;
}
.search{
    border: none;
    outline: none;
    background-color: rgb(0, 14, 139);
    padding: 10px 20px;
    color: white;
    border-radius: 10px;
}
.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;
    color: white;
    background-color: darkslateblue;
    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=a33a51f9”;

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

let search_input = document.getElementById(“search-input”);

let 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.imdb);

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

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

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

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

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

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

    </div>

</div>

`;

}

card.appendChild(movieElm);

#2

There seem to be a few errors in the JavaScript code.

Firstly, the API URLs are not correct. The correct URLs should be:

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

Secondly, there is a typo in the function name getmovies. The function should be named getMovies.

Thirdly, there is a syntax error in the showMovies function. The function should not have the async keyword before the forEach loop.

Lastly, the movie_display function is defined outside the showMovies function, causing an error. It should be defined inside the showMovies function.

Here is the corrected JavaScript code:

const API_URL_SEARCH = "http://www.omdbapi.com/?apikey=a33a51f9&i=";

let search_input = document.getElementById("search-input");
let 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-decription">
                <span class="movie-title"><b>Title</b> <span>${imovie.Title}</span></span>
                <span class="movie-title"><b>IMDb Rating</b> <span>${imovie.imdbRating}</span></span>
                <span class="movie-title"><b>Director</b> <span>${imovie.Director}</span></span>
                <span class="movie-title"><b>Release Date</b> <span>${imovie.Released}</span></span>
                <span class="movie-title"><b>Genre</b> <span>${imovie.Genre}</span></span>
            </div>
        </div>
    `;
    card.appendChild(movieElm);
}```

Do let me know if it helps you.
#3

hey I successfully got the desired output. Thank you so much for you help.