Js not working for Moviefinder

#1

dbt 2
dbt 2823×900 77.7 KB

dbt 3
dbt 3918×767 121 KB

dbt
dbt1066×567 91.7 KB

Please check my code, i have rechecked it several times

#2

Do anybody have a solution for this

#3

Hi @nazimnaz107 share the code , through images we can’t check the error in your code.

#4
Movie Finder
Movie Finder
Search

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: rgb(19,19,56);
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-card{
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;
}

const API_URL =“http://www.ombdapi.com/?i=tt3896198&apikey=59654cabf&s=”;
const API_URL_SEARCH =“Loading...”;

var search_input = document.getElementById(“search-input”);
var card = document.getElementsByClassName(“movie-card”)[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 movielm = document.createElement(“div”);
movielm.classList.add(“movie-card”);
movielm.innerHTML=`


${imovie.title} ${imovie.imdbRating} ${imovie.Director} ${imovie.Released} ${imovie.Genre}

`;
card.appendChild(movieElm);
}

#5

Hi ,

There are a few errors in your code. Here are the corrections:

  1. Change “ and ” to ". Replace all occurrences of “ and ” with ".
  2. Correct the API URLs. Replace API_URl with API_URL in the getMovies function.
  3. Update the API URL for fetching movie data. Replace API_URL_SEARCH with the correct OMDB API URL: const API_URL_SEARCH = "http://www.omdbapi.com/?apikey=59654cabf&i=";
  4. Fix the variable name in the movie_display function. Change movielm to movieElm to match the variable name used in the code.

Do check and let me know if it helps you.

#6

no still it doesn’t work

#7

hello sir, i changed everything as you requested. Double inverted coma what i used in the code is right one “” it was changed only when i copied it. Still can’t find the mistake.I have already send you the screenshots

#8

Hi, here are the corrected Js code.

const API_URL = "http://www.omdbapi.com/?i=tt3896198&apikey=c854f9fd&s=";
const API_URL_SEARCH = "http://www.omdbapi.com/?&apikey=c854f9fd&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 = "";
  if (movies) {
    movies.forEach(async function (movie) {
      console.log(movie.imdbID);
      const movieData = await fetch(API_URL_SEARCH + movie.imdbID);
      const movieDataobj = await movieData.json();
      console.log(movieDataobj);
      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 check and let me know if it helps you.

#10

Thank You sir, it worked, what was the mistake… :smiley: :smiley: :smiley: :smiley:

#11

Hi, @nazimnaz107 The below mention error are directly seen in your code.

  1. Fixed the API URL for the OMDB API in both API_URL and API_URL_SEARCH variables.
  2. Replaced the invalid quotation marks (“ and ”) with normal quotation marks (").
  3. Renamed the variable movielm to movieElm in the movie_display function to match the variable name used in other parts of the code.