Film Finder TMDB not working

Get Help Codecademy
1 
//Populate dropdown menu with all the available genres

const generateGenreDropdown = (genres) => {
    const select = document.getElementById('genres');
    for (const genre of genres) {
        let option = document.createElement('option');
        option.value= genre["id"];
        option.text = genre["name"];
        select.appendChild(option);
    }
};

//return the current genre selection from the dropdown menu
const getSelectedGenre = () =>{
    const selectedGenre = document.getElementById('genres').value;
    return selectedGenre;
};

//Display the like and dislike buttons on the page
const showBtns = () => {
    const btnDiv = document.getElementById('likeOrDislike');
    btnDiv.removeAttribute('hidden');
};

//Clear the current movie from the screen
const clearCurrentMovie = () => {
    const moviePosterDiv = document.getElementById('moviePoster');
    const movieTextDiv = document.getElementById('movieText');
    moviePosterDiv.innerHTML = '';
    movieTextDiv.innerHTML = '';
};

//clear the movie and get another random moview
const resetMovie = () => {
    clearCurrentMovie();
    showRandomMovie(); //should make this function in script.js
};

const createMoviePoster = (posterPath) => {
    const moviePosterUrl = `https://image.tmdb.org/t/p/original/${posterPath}`;
    const posterImg = document.createElement('img');
    posterImg.setAttribute('src', moviePosterUrl);
    posterImg.setAttribute('id', 'moviePoster');

    return posterImg;
};

//create HTML for movie overview

const createMovieOverview = (overview) => {
    const overviewParagraph = document.createElement('p');
    overviewParagraph.setAttribute('id', 'movieOverview');
    overviewParagraph.innerHTML = overview;


};


//returns a random movie from the first page of movies
const getRandomMovie = (movies) => {
    const randomIndex = Math.floor(Math.random() * movies.length);
    const randomMovie = movies[randomIndex];
    return randomMovie;
};


//display the movie

const displayMovie = (movieInfo) => {
    const moviePosterDiv = document.getElementById('moviePoster');
    const movieTextDiv = document.getElementById('movieText');
    const likeBtn = document.getElementById('like');
    const dislikeBtn = document.getElementById('dislike');
    const moviePoster = createMoviePoster(movieInfo.poster_path);
    const titleHeader = createMovieTitle(movieInfo.title);
    const overviewText = createMovieOverview(movieInfo.overview);

    moviePosterDiv.appendChild(moviePoster);
    movieTextDiv.appendChild(titleHeader);
    movieTextDiv.appendChild(overviewText);
  
    showBtns();
    likeBtn.onclick = resetMovie;
    dislikeBtn.onclick = resetMovie;
};









const tmdbKey = '431b4017e0612f761b3df8c0a6df23cf';
const tmdbBaseUrl = 'https://api.themoviedb.org/3';
const playBtn = document.getElementById('playButton');

const getGenres = async () => {
    const genreRequestEndpoint = '/genre/movie/list';
    const requestParams = `?api_key=${tmdbKey}`;
    const urlToFetch = tmdbBaseUrl + genreRequestEndpoint + requestParams;
    try {
        const response = await fetch(urlToFetch);
        if (response.ok){
            const jsonResponse = await response.json();
            const genres = jsonResponse["genres"];
            return genres;
        }
    } catch(e){
        console.log(e);
    }
};

const getMovies = async() => {
    const selectedGenre = getSelectedGenre();
    const discoverMovieEndpoint = '/discover/movie';
    const requestParams = `?api_key=${tmdbKey}&with_genres=${selectedGenre}`;
    const urlToFetch = tmdbBaseUrl + discoverMovieEndpoint + requestParams;
    try {
        const response = await fetch(urlToFetch);
        if(response.ok) {
            const jsonResponse = await response.json();
            const movies = jsonResponse.results;
            return movies; 
        }
    } catch(e){console.log(e);}
};


const getMovieInfo = async (movie) => {
    const movieId = movie.id;
    const movieEndpoint = `/movie/${movieId}`;
    const requestParams = `?api_key=${tmdbKey}`;
    const urlToFetch = tmdbBaseUrl + movieEndpoint + requestParams;
    try {
      if (response.ok){
        const jsonResponse = await response.json();
        const movieInfo = jsonResponse.results;
        return movieInfo; 
    }}
    catch(error){console.log(error);}
  
  
  
  };
  
  // Gets a list of movies and ultimately displays the info of a random movie from the list
  const showRandomMovie = async () => {
    const movieInfo = document.getElementById('movieInfo');
    if (movieInfo.childNodes.length > 0) {
      clearCurrentMovie();
    };
    const movies = await getMovies();
    const randomMovie = getRandomMovie(movies);
    const info= await getMovieInfo(randomMovie);
    displayMovie(info);
  
  
  };
  
  getGenres().then(generateGenreDropdown);
  playBtn.onclick = showRandomMovie();

It’s not working. When I press Play Button. Nothing happens. Plz help! :frowning:

2

It looks like there might be a few issues with the code. Here are a few things you can try to troubleshoot the problem:

  1. Check for console errors: Open up the browser console (usually by pressing F12 or Ctrl+Shift+J) and see if there are any errors. Fixing these errors might resolve the issue.

  2. Check the API key: Make sure that the tmdbKey variable contains a valid API key. You can get a key from API Overview — The Movie Database (TMDB).

  3. Check the endpoint URLs: Make sure that the endpoint URLs in getGenres, getMovies, and getMovieInfo are correct. You can check the API documentation at API Docs.

  4. Check the getMovieInfo function: It looks like the response variable is not defined in the try block. You might need to add a fetch call to get the movie info.

  5. Check the displayMovie function: Make sure that the createMovieTitle function is defined and returns a valid header element.

  6. Check the HTML: Make sure that the HTML elements referenced in the JavaScript code exist in the HTML file and have the correct IDs.

  7. Add console logs: You can add console logs throughout the code to see where the code is breaking or to inspect the values of variables. For example, you can add a console log to showRandomMovie to see if it is being called when you click the Play button.

alternatively I’ve provided a fixed version of your code below for reference:

// Populate dropdown menu with all the available genres
const generateGenreDropdown = (genres) => {
  const select = document.getElementById('genres');
  for (const genre of genres) {
    let option = document.createElement('option');
    option.value = genre["id"];
    option.text = genre["name"];
    select.appendChild(option);
  }
};

// Return the current genre selection from the dropdown menu
const getSelectedGenre = () => {
  const selectedGenre = document.getElementById('genres').value;
  return selectedGenre;
};

// Display the like and dislike buttons on the page
const showBtns = () => {
  const btnDiv = document.getElementById('likeOrDislike');
  btnDiv.removeAttribute('hidden');
};

// Clear the current movie from the screen
const clearCurrentMovie = () => {
  const moviePosterDiv = document.getElementById('moviePoster');
  const movieTextDiv = document.getElementById('movieText');
  moviePosterDiv.innerHTML = '';
  movieTextDiv.innerHTML = '';
};

// Clear the movie and get another random movie
const resetMovie = () => {
  clearCurrentMovie();
  showRandomMovie(); // should make this function in script.js
};

const createMoviePoster = (posterPath) => {
  const moviePosterUrl = `https://image.tmdb.org/t/p/original/${posterPath}`;
  const posterImg = document.createElement('img');
  posterImg.setAttribute('src', moviePosterUrl);
  posterImg.setAttribute('id', 'moviePoster');

  return posterImg;
};

// Create HTML for movie title
const createMovieTitle = (title) => {
  const titleHeader = document.createElement('h2');
  titleHeader.setAttribute('id', 'movieTitle');
  titleHeader.innerHTML = title;

  return titleHeader;
};

// Create HTML for movie overview
const createMovieOverview = (overview) => {
  const overviewParagraph = document.createElement('p');
  overviewParagraph.setAttribute('id', 'movieOverview');
  overviewParagraph.innerHTML = overview;

  return overviewParagraph;
};

// Returns a random movie from the first page of movies
const getRandomMovie = (movies) => {
  const randomIndex = Math.floor(Math.random() * movies.length);
  const randomMovie = movies[randomIndex];
  return randomMovie;
};

// Display the movie
const displayMovie = (movieInfo) => {
  const moviePosterDiv = document.getElementById('moviePoster');
  const movieTextDiv = document.getElementById('movieText');
  const likeBtn = document.getElementById('like');
  const dislikeBtn = document.getElementById('dislike');
  const moviePoster = createMoviePoster(movieInfo.poster_path);
  const titleHeader = createMovieTitle(movieInfo.title);
  const overviewText = createMovieOverview(movieInfo.overview);

  moviePosterDiv.appendChild(moviePoster);
  movieTextDiv.appendChild(titleHeader);
  movieTextDiv.appendChild(overviewText);

  showBtns();
  likeBtn.onclick = resetMovie;
  dislikeBtn.onclick = resetMovie;
};

const tmdbKey = '431b4017e0612f761b3df8c0a6df23cf';
const tmdbBaseUrl = 'https://api.themoviedb.org/3';
const playBtn = document.getElementById('playButton');

const getGenres = async () => {
  const genreRequestEndpoint = '/genre/movie/list';
  const requestParams = `?api_key=${tmdbKey}`;
  const urlToFetch = tmdbBaseUrl + genreRequestEndpoint + requestParams;
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
      const jsonResponse = await response.json();
      const genres = jsonResponse["genres"];