const API_KEY =
  "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmY2U5NmYwNDIyODlhNWRjY2FiYmFjZDIzNTFiNzBhOCIsInN1YiI6IjY0YzE2ODMxZGY4NmE4MDBlNzgwMjQyNCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.O2XFMmGJG8hkQnUFu7BbenNOkwlPw98z5SqCe4cJWJM";

async function getMovies() {
  try {
    const response = await fetch("https://api.themoviedb.org/3/movie/popular", {
      headers: {
        Authorization: `Bearer ${API_KEY}`,
      },
    });

    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

async function displayMovies() {
  const movieListDiv = document.getElementById("movie-list");
  const moviePosterTemplate = document.getElementById("movie-card-template");

  const data = await getMovies();

  const movies = data.results; // Movies is an array of objects

  movies.forEach((movie) => {
    const movieCard = moviePosterTemplate.content.cloneNode(true);

    const titleElement = movieCard.querySelector(".card-body > h5");
    titleElement.textContent = movie.title;

    const movieParagraphElement = movieCard.querySelector(".card-text");
    movieParagraphElement.textContent = movie.overview;

    const movieImgElement = movieCard.querySelector(".card img");
    movieImgElement.setAttribute(
      "src",
      `https://image.tmdb.org/t/p/w500${movie.poster_path}`
    );

    const infoButton = movieCard.querySelector("button.btn");
    infoButton.setAttribute("data-movieId", movie.id);

    movieListDiv.appendChild(movieCard);
  });
}

async function showMovieDetails(btn) {
  const movieId = btn.getAttribute("data-movieId");
  const response = await fetch(
    `https://api.themoviedb.org/3/movie/${movieId}`,
    {
      headers: {Authorization: `Bearer ${API_KEY}`},
    }
  );
  const data = await response.json();

  const modalBody = document.querySelector("#movie-modal .modal-body");
  modalBody.innerHTML = "";

  // Create row
  const row = document.createElement("div");
  row.classList.add("row");

  // Create left column
  const leftCol = document.createElement("div");
  leftCol.classList.add("col-sm-6", "col-md-4");

  // Add movie poster to left column
  const poster = document.createElement("img");
  poster.src = `https://image.tmdb.org/t/p/w500${data.poster_path}`;
  poster.classList.add("movie-poster", "img-fluid");
  leftCol.appendChild(poster);

  // Create right column
  const rightCol = document.createElement("div");
  rightCol.classList.add("col-sm-6", "col-md-8");

  // Add movie details to right column
  const title = document.createElement("h2");
  title.textContent = data.original_title;
  rightCol.appendChild(title);

  const details = [
    {label: "Rating", value: data.vote_average},
    {label: "Runtime", value: `${data.runtime} minutes`},
    {label: "Genres", value: getGenres(data.genres)},
    {label: "Plot", value: data.overview, class: "plot-summary"},
    {label: "Cast", value: ""},
  ];

  details.forEach((detail) => {
    const detailElement = document.createElement("div");
    detailElement.textContent = `${detail.label}: ${detail.value}`;
    if (detail.class) detailElement.classList.add(detail.class);
    rightCol.appendChild(detailElement);
  });

  // Function to get genres as a comma-separated string
  function getGenres(genres) {
    return genres && Array.isArray(genres)
      ? genres.map((genre) => genre.name).join(", ")
      : "N/A";
  }

  details.forEach((detail) => {
    const detailElement = document.createElement("div");
    detailElement.textContent = `${detail.label}: ${detail.value}`;
    if (detail.class) detailElement.classList.add(detail.class);
    rightCol.appendChild(detailElement);
  });

  // Append columns to row
  row.appendChild(leftCol);
  row.appendChild(rightCol);

  // Append row to modal body
  modalBody.appendChild(row);
}

            
          

Code Explanation

API_KEY: Defines a constant variable API_KEY that holds an authentication token for accessing a movie database API. getMovies Function: An asynchronous function getMovies that fetches popular movies from the API. Uses the fetch function to make an HTTP request to the movie database API endpoint. Parses the response data as JSON and returns it. Handles errors using a try-catch block. displayMovies Function: An asynchronous function displayMovies that retrieves movie data using getMovies and populates the webpage with movie cards. Clones a template for a movie card, updates its content with movie details, and appends it to the webpage for each movie. showMovieDetails Function: An asynchronous function showMovieDetails that fetches detailed information about a specific movie by its ID. Retrieves the movie details and creates a modal to display them. Uses Bootstrap modal components and dynamically updates the content based on the selected movie. Handles errors using a try-catch block. HTML Template: Defines an HTML template for a movie card using the template element. Event Listeners: Attaches event listeners to buttons, triggering functions like displayMovies and showMovieDetails when buttons are clicked. Bootstrap and External Libraries: Includes Bootstrap CSS and JS from a CDN for styling and interactive components. Includes SweetAlert2 library for displaying custom alerts. Modal for Movie Details: Defines a Bootstrap modal structure for displaying detailed information about a movie. Uses a combination of Bootstrap classes for styling and responsiveness. Error Handling: Includes error handling in both getMovies and showMovieDetails functions using try-catch blocks. Miscellaneous: Utilizes ES6 features like async/await for handling asynchronous operations. Uses modern JavaScript syntax for DOM manipulation and event handling.