Getmovie info error

Инструкция для пользователей и владельцев ресурса.

Этот веб-сайт использует данные cookie, чтобы настроить персонально под вас работу сервиса. Используя веб-сайт, вы даете согласие на применение данных cookie. Больше подробностей — в нашем Пользовательском соглашении.

var sendTitle = function() {
  var title = $("input[name='movie-search-title']").val();
  getMovie(title)
  getQuotes(title)
}
$("input[name='movie-search-title']").keydown(function(e) {
  if (e.keyCode == 13) {
    e.preventDefault();
    sendTitle();
  }
})
// movie input autocomplete 
var searchInput = document.getElementById('searchBox');
var baseUrl = "http://sg.media-imdb.com/suggests/";
var result = document.getElementById('result');
searchInput.addEventListener('keyup', function() {
  $("#result").removeClass("hidden");
  //clearing blank spaces from input
  var cleanInput = searchInput.value.replace(/s/g, "");
  //clearing result div if the input box in empty
  if (cleanInput.length === 0) {
    result.innerHTML = "";
  }
  if (cleanInput.length > 0) {
    var queryUrl = baseUrl + cleanInput[0].toLowerCase() + "/" +
      cleanInput.toLowerCase() +
      ".json";
    $.ajax({
      url: queryUrl,
      dataType: 'jsonp',
      cache: true,
      jsonp: false,
      jsonpCallback: "imdb$" + cleanInput.toLowerCase()
    }).done(function(result) {
      //clearing result div if there is a valid response
      if (result.d.length > 0) {
        result.innerHTML = "";
      }
      for (var i = 0; i < result.d.length; i++) {
        let category = result.d[i].id.slice(0, 2);
        if (category === "tt" || category === "nm") {
          //row for risplaying one result
          let resultRow = document.createElement('p');
          resultRow.setAttribute('class', 'resultRow')
          //creating and setting description
          let description = document.createElement('div');
          description.setAttribute('class', 'description');
          let name = document.createElement('h4');
          let snippet = document.createElement('h5');
          if (category === "tt" && result.d[i].y) {
            name.innerHTML = result.d[i].l + " (" + result.d[i].y + ")";
            let nameText = name.innerHTML
            $(name).click(function(e) {
              e.preventDefault();
              let title = nameText.slice(0, nameText.lastIndexOf(" "))
              getMovie(title)
              getQuotes(title)
            });
          } else {
            name.innerHTML = result.d[i].l;
            let nameText = name.innerHTML
            $(name).click(function(e) {
              e.preventDefault();
              let title = nameText.slice(0, nameText.lastIndexOf(" "))
              getMovie(title)
              getQuotes(title)
            });
          }
          snippet.innerHTML = result.d[i].s;
          $(description).append(name);
          $(resultRow).append(description);
          $("#result").append(resultRow);
        }
      }
    });
  }
});

// primary movie information (API #1)
var getMovie = function(title) {
  $("#result").addClass("hidden")
  $("#main").removeClass("hidden");
  $("#search-form").trigger("reset");
  //format the OMDB api url 
  var apiUrl = `http://www.omdbapi.com/?t=${title}&plot=full&apikey=
  //make a request to the url 
  fetch(apiUrl)
    .then(function(response) {
      // request was successful 
      if (response.ok) {
        response.json().then(function(movieData) {
          // console.log(movieData)
          var movieTitle = movieData.Title
          getMovieId(movieTitle);
          getSoundTrack(movieTitle);
          getTrailer(movieTitle);
          var movieObj = {
            title: movieTitle,
          }
          var pastSearches = loadPastSearches();
          var alreadySearched = false
          if (pastSearches) {
            pastSearches.forEach(s => {
              if (s.title === movieTitle) {
                alreadySearched = true;
              }
            })
          }
          if (!alreadySearched) {
            for (var item of pastSearches) {
              let searchEl = document.createElement("a")
              let pastSearchTitle = item.title
              $(searchEl).text(pastSearchTitle)
              $(searchEl).addClass("past-search-item");
              $("#past-search-dropdown").append(searchEl)
              $(searchEl).click(function(e) {
                e.preventDefault();
                let title = pastSearchTitle
                getMovie(title)
                getQuotes(title)
              });
            }
          }
          saveSearch(movieObj)
          showMovie(movieData);
        });
      } else {
        alert("Error: title not found!");
      }
    })
    .catch(function(error) {
      alert("Unable to connect to CineXScore app");
      console.log(error)
    });
};
// get specialID for other movie details (API #2)
var getMovieId = function(movieTitle) {
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": `https://imdb8.p.rapidapi.com/title/find?q=${movieTitle}`,
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "imdb8.p.rapidapi.com",
      "x-rapidapi-key": 
    }
  };

  $.ajax(settings).done(function(response) {
    console.log(response);
    var specialId = response.results[0].id
    var specialId = specialId.replace("/title/", "")
    var specialId = specialId.replace("/", "")
    // console.log(specialId)
    getMovieImgs(specialId)
    getPromos(specialId)
  });
}
// get hero image (API #2)
var getPromos = function(specialId) {
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": `https://imdb8.p.rapidapi.com/title/get-hero-with-promoted-video?tconst=${specialId}&purchaseCountry=US&currentCountry=US`,
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "imdb8.p.rapidapi.com",
      "x-rapidapi-key": 
    }
  };
  $.ajax(settings).done(function(promoData) {
    // console.log(promoData);
    $("#hero-image").attr("src", promoData.heroImages[0].url)
  });
}
// get additional images (API #2)
var getMovieImgs = function(specialId) {
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": `https://imdb8.p.rapidapi.com/title/get-images?tconst=${specialId}&limit=25`,
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "imdb8.p.rapidapi.com",
      "x-rapidapi-key": 
    }
  };

  $.ajax(settings).done(function(movieImgs) {
    // console.log(movieImgs);
    $("#cast-image").attr("src", movieImgs.images[0].url);
  });
}
// get movie soundtrack (API #3)
var getSoundTrack = function(movieTitle) {
  var movieTitle = movieTitle.replaceAll(" ", "")
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": `https://shazam.p.rapidapi.com/search?term=${movieTitle}%20soundtrack&locale=en-US&offset=0&limit=5`,
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "shazam.p.rapidapi.com",
      "x-rapidapi-key": 
    }
  };

  $.ajax(settings).done(function(soundTrackData) {
    // console.log(soundTrackData);
    var albumName = soundTrackData.tracks.hits[0].track.title
    var albumDetails = soundTrackData.tracks.hits[0].track.subtitle
    var albumImg = soundTrackData.tracks.hits[0].track.images.coverart
    var albumUrl = soundTrackData.tracks.hits[0].track.url
    $("#soundtrack-title").text(albumName)
    $("#soundtrack-image").attr("src", albumImg)
    $("#soundtrack-link").attr("href", albumUrl)
    $("#soundtrack-details").text(albumDetails)
    var trackObj = {
      name: albumName,
      url: albumUrl
    };
    $("#save-to-favorites").click(function(e) {
      e.preventDefault();
      saveTrack(trackObj)
    });
  });
}
// get movie trailer (API #3)
var getTrailer = function(movieTitle) {
  var movieTitle = movieTitle.replaceAll(" ", "");
  var movieTitle = `${movieTitle}officialtrailer`
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": `https://youtube-search-results.p.rapidapi.com/youtube-search/?q=${movieTitle}`,
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "youtube-search-results.p.rapidapi.com",
      "x-rapidapi-key": 
    }
  };

  $.ajax(settings).done(function(trailerData) {
    // console.log(trailerData);
    $("#video-title").text(trailerData.items[0].title)
    var embedCode = trailerData.items[0].url.replace("https://www.youtube.com/watch?v=", "")
    var trailerLink = `https://www.youtube.com/embed/${embedCode}`
    $("#trailer").attr("src", trailerLink)
    $("#video-description").text(trailerData.items[0].description)

  });
}
// get movie quotes (API #4)
var getQuotes = function(title) {
  $("#quote-items").html("");
  $("#movie-quotes-heading").removeClass("hidden");
  var title = title.replaceAll(" ", "_")
  const settings = {
    "async": true,
    "crossDomain": true,
    "url": `https://movie-and-tv-shows-quotes.p.rapidapi.com/quotes/from/${title}`,
    "method": "GET",
    "headers": {
      "x-rapidapi-host": "movie-and-tv-shows-quotes.p.rapidapi.com",
      "x-rapidapi-key": 
    }
  };

  $.ajax(settings).done(function(quoteData) {
      // console.log(quoteData);
      showQuotes(quoteData)
    })
    .fail(function(xhr, status, error) {
      //Ajax request failed.
      var errorMessage = xhr.status + ': ' + xhr.statusText
      console.log(`Error - ${errorMessage}`);
      $("#movie-quotes-heading").addClass("hidden");
    });
}
// change the page HTML to show movie information
var showMovie = function(movieData) {
  $("#movie-title").text(movieData.Title)
  $("#year-rating").text(`${movieData.Year}, ${movieData.Rated}`)
  $("#genre").text(`${movieData.Genre}`)
  $("#synopsis").text(movieData.Plot)
  $("#poster").attr("src", movieData.Poster);
  $("#cast-list").text(`Main Cast: ${movieData.Actors}`)
  $("#director").text(`Director: ${movieData.Director}`)
  $("#writer").text(`Writer(s): ${movieData.Writer}`)
  $("#imdb-rate").text(`${movieData.Ratings[0].Source} - ${movieData.Ratings[0].Value}`)
  $("#tomatoes-rate").text(`${movieData.Ratings[1].Source} - ${movieData.Ratings[1].Value}`)
  $("#metacritic-rate").text(`${movieData.Ratings[2].Source} - ${movieData.Ratings[2].Value}`)
  var tomatoesRate = (movieData.Ratings[1].Value).replace("%", "")
  parseInt(tomatoesRate)
  if (tomatoesRate <= 60) {
    $("#tomatoes-rate-image").attr("src", "https://www.clipartmax.com/png/full/351-3516739_cherry-tomato-clipart-tomatoe-rotten-tomatoes-icon-png.png")
  } else if (tomatoesRate >= 60) {
    $("#tomatoes-rate-image").attr("src", "https://www.clipartmax.com/png/full/50-503981_rotten-tomatoes-fresh-logo.png")
  }
}
// if there are famous quotes display those on page 
var showQuotes = function(quoteData) {
  $("#movie-quotes-heading").text("Movie Quotes")
  quoteData.forEach(quoteItem => {
    var carouselItem = document.createElement("div")
    $(carouselItem).html(`<h4 class='quote'>"${quoteItem.quote}"<br><br><span class='quote-character'>-${quoteItem.character}</span></h4><br>`)
    $(carouselItem).appendTo("#quote-items");
  });
}
// save past search
var saveSearch = function(movieObj) {
  var pastSearches = loadPastSearches();
  pastSearches.push(movieObj);
  localStorage.setItem("movieObjects", JSON.stringify(pastSearches))
}
loadPastSearches = function() {
  var pastSearches = JSON.parse(localStorage.getItem("movieObjects"));
  if (!pastSearches || !Array.isArray(pastSearches)) {
    var pastSearches = []
  }
  return pastSearches;
}
// dropdown favorite soundtrack buttons 
var saveTrack = function(trackObj) {
  var faveTracks = JSON.parse(localStorage.getItem("trackObjects"));
  if (!faveTracks || !Array.isArray(faveTracks)) {
    var faveTracks = []
  }
  var alreadySearched = false
  if (faveTracks) {
    faveTracks.forEach(t => {
      if (t.name === trackObj.name) {
        alreadySearched = true;
      }
    })
  }
  if (!alreadySearched) {
    let trackEl = document.createElement("a")
    $(trackEl).addClass("fave-track");
    $(trackEl).text(trackObj.name);
    $(trackEl).attr("href", trackObj.url);
    $(trackEl).attr("target", "_blank")
    $("#favorite-tracks-dropdown").append(trackEl)
  }
  faveTracks.push(trackObj);
  localStorage.setItem("trackObjects", JSON.stringify(faveTracks))
}
// populate favorites list when page loads
var populateFavorites = function() {
  var faveTracks = JSON.parse(localStorage.getItem("trackObjects"));
  if (!faveTracks || !Array.isArray(faveTracks)) {
    var faveTracks = []
  }
  for (var track of faveTracks) {
    let trackEl = document.createElement("a")
    $(trackEl).addClass("fave-track");
    $(trackEl).text(track.name);
    $(trackEl).attr("href", track.url);
    $(trackEl).attr("target", "_blank")
    $("#favorite-tracks-dropdown").append(trackEl)
  }
}
$(window).load(populateFavorites())
// clear searches and favorite tracks
$("#clear-searches").click(function(e) {
  e.preventDefault();
  [...$(".past-search-item")].map(thisSearch => thisSearch.remove());
  localStorage.removeItem("movieObjects");
});
$("#clear-favorites").click(function(e) {
  e.preventDefault();
  [...$(".fave-track")].map(thisTrack => thisTrack.remove());
  localStorage.removeItem("trackObjects");
});

/* KEEP THIS CLASS */

.hidden {
  display: none;
}


/* IMPORTANT FOR JS */


/* Styling I added (can change) */

#cast-image {
  width: 80%;
  height: 80%;
}

#tomatoes-rate-image {
  width: 80%;
  height: 80%;
}

#soundtrack-image {
  width: 60%;
  height: 60%;
}

#video-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.navbar {
  display: flex;
  flex-direction: row;
  margin-bottom: 0;
  background-color: #40376E;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  font-family: Montserrat, sans-serif;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

footer .glyphicon {
  font-size: 20px;
  margin-bottom: 20px;
  color: #40376E;
}


/* end of my own styling */


/* all from template */

body {
  font: 400 15px Lato, sans-serif;
  line-height: 1.8;
  color: #818181;
}

h2 {
  font-size: 24px;
  text-transform: uppercase;
  color: #303030;
  font-weight: 600;
  margin-bottom: 30px;
}

h4 {
  font-size: 19px;
  line-height: 1.375em;
  color: #303030;
  font-weight: 400;
  margin-bottom: 30px;
}

.jumbotron {
  background-color: #40376E;
  color: #fff;
  padding: 100px 25px;
  font-family: Montserrat, sans-serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

form {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-direction: row;
}

#results {
  display: flex;
  flex-direction: column;
  justify-content: left;
  width: 20%;
  text-align: left;
  color: antiquewhite;
}

.container-fluid {
  padding: 60px 50px;
}

.bg-grey {
  background-color: #f6f6f6;
}

.logo-small {
  color: #40376E;
  font-size: 50px;
}

.logo {
  color: #40376E;
  font-size: 200px;
}

.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}

.item h4 {
  font-size: 19px;
  line-height: 1.375em;
  font-weight: 400;
  font-style: italic;
  margin: 70px 0;
}

.item span {
  font-style: normal;
}

@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

@media screen and (max-width: 768px) {
  .col-sm-4 {
    text-align: center;
    margin: 25px 0;
  }
  .btn-lg {
    width: 100%;
    margin-bottom: 35px;
  }
}

@media screen and (max-width: 480px) {
  .logo {
    font-size: 150px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>CineXScore</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="assets/css/style.css">
</head>

<body id="top" data-spy="scroll" data-target=".navbar" data-offset="60">

  <!-- Navigation Menu -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <a id="logo" class="navbar-brand">CineXScore</a>
    <div class="dropdown navbar-brand">Past Searches
      <i class="fa fa-caret-down"></i>
      <div id="past-search-dropdown" class="dropdown-content">
        <a id="clear-searches">Clear</a>
      </div>
    </div>
    <div class="dropdown navbar-brand">Favorite Tracks
      <i class="fa fa-caret-down"></i>
      <div id="favorite-tracks-dropdown" class="dropdown-content">
        <a id="clear-favorites">Clear</a>
      </div>
    </div>
  </nav>


  <!-- Movie Search Section -->
  <div id="movie-search" class="jumbotron text-center">
    <h1>Search for a movie!</h1>
    <form id="search-form">
      <input id="searchBox" name="movie-search-title" type="text" class="form-control" size="50" placeholder="movie title" />
      <button id="searchBtn" type='button' class="btn btn-danger" onclick="sendTitle()">Search</button>
    </form>
    <div id="result"></div>
  </div>

  <!-- hero image -->
  <div id="hero">
    <img id="hero-image" src="" />
  </div>

  <main id="main" class=hidden>
    <!-- Container (primary movie info) -->
    <div id="movie-info" class="container-fluid">
      <div class="row">
        <div class="col-sm-8">
          <h2 id="movie-title"></h2><br>
          <h4 id="year-rating"></h4>
          <h4 id="genre"></h4><br>
          <p id="synopsis"></p>
          <br><button href="#soundtrack" id="get-soundtrack" class="btn btn-default btn-lg">Get the soundtrack</button>
        </div>
        <div class="col-sm-4">
          <span id="movie-poster">
        <img id="poster" src="" />
      </span>
        </div>
      </div>
    </div>

    <!-- Container (cast) -->
    <div id="cast" class="container-fluid bg-grey">
      <div class="row">
        <div id="cast-icon" class="col-sm-4">
          <span>
        <img id="cast-image" src="https://cdn-icons-png.flaticon.com/512/3873/3873990.png" />
      </span>
        </div>
        <div class="col-sm-8">
          <h2>Cast</h2><br>
          <h4 id="cast-list"></h4><br>
          <p id="director">
          </p>
          <p id="writer">
          </p>
        </div>
      </div>
    </div>

    <!-- Container (Score Section) -->
    <div id="rating" class="container-fluid">
      <div class="row">
        <div class="col-sm-4">
          <span id="rating-img">
        <img id="tomatoes-rate-image" src="https://www.pinpng.com/pngs/m/339-3397388_movie-film-clipart-png-download-film-reel-clip.png"/>
      </span>
        </div>
        <div class="col-sm-8 text-center">
          <h2>SCORE</h2><br>
          <h4 id="imdb-rate"></h4><br>
          <h4 id="tomatoes-rate"></h4><br>
          <h4 id="metacritic-rate"></h4><br>
        </div>
      </div>
    </div>

    <!-- Container (Sountrack Section) -->
    <div id="soundtrack" class="container-fluid text-center bg-grey">
      <h2>Soundtrack</h2><br>
      <h4 id="soundtrack-title"></h4>
      <div class="container-fluid text-center">
        <a id="soundtrack-link" href="" target="_blank">
          <img id="soundtrack-image" src="https://www.pinclipart.com/picdir/middle/572-5727023_icon-music-and-film-clipart.png" />
        </a>
        <p id="soundtrack-details"></p>
        <button id="save-to-favorites" class="btn btn-default btn-lg">Save to favorites!</button>
      </div>
    </div>

    <!-- Container (Movie Quotes Section)-->
    <div id="movie-quotes" class="container-fluid text-center">
      <h2 id="movie-quotes-heading"></h2>
      <div id="quote-items" class="carousel slide text-center" data-ride="carousel"></div>
    </div>

    <!-- Container (Trailer Section)-->
    <div id=video-container>
      <h4 id="video-title"></h4>
      <iframe id="trailer" width="860" height="615" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <p id="video-description"></p>
    </div>

    <!-- Footer -->
    <footer class="container-fluid text-center">
      <a href="#top" title="To Top">
        <span class="glyphicon glyphicon-chevron-up"> Top </span>
      </a>
    </footer>
  </main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>

</html>