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=836f8b0`
//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": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
}
};
$.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¤tCountry=US`,
"method": "GET",
"headers": {
"x-rapidapi-host": "imdb8.p.rapidapi.com",
"x-rapidapi-key": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
}
};
$.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": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
}
};
$.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} soundtrack&locale=en-US&offset=0&limit=5`,
"method": "GET",
"headers": {
"x-rapidapi-host": "shazam.p.rapidapi.com",
"x-rapidapi-key": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
}
};
$.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": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
}
};
$.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": "229d984177msh18d191b1335378fp137dcejsn7c92ab2acfaf"
}
};
$.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 >
<a id="logo" >CineXScore</a>
<div >Past Searches
<i ></i>
<div id="past-search-dropdown" >
<a id="clear-searches">Clear</a>
</div>
</div>
<div >Favorite Tracks
<i ></i>
<div id="favorite-tracks-dropdown" >
<a id="clear-favorites">Clear</a>
</div>
</div>
</nav>
<!-- Movie Search Section -->
<div id="movie-search" >
<h1>Search for a movie!</h1>
<form id="search-form">
<input id="searchBox" name="movie-search-title" type="text" size="50" placeholder="movie title" />
<button id="searchBtn" type='button' 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" >
<div >
<div >
<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" >Get the soundtrack</button>
</div>
<div >
<span id="movie-poster">
<img id="poster" src="" />
</span>
</div>
</div>
</div>
<!-- Container (cast) -->
<div id="cast" >
<div >
<div id="cast-icon" >
<span>
<img id="cast-image" src="https://cdn-icons-png.flaticon.com/512/3873/3873990.png" />
</span>
</div>
<div >
<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" >
<div >
<div >
<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 >
<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" >
<h2>Soundtrack</h2><br>
<h4 id="soundtrack-title"></h4>
<div >
<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" >Save to favorites!</button>
</div>
</div>
<!-- Container (Movie Quotes Section)-->
<div id="movie-quotes" >
<h2 id="movie-quotes-heading"></h2>
<div id="quote-items" 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 >
<a href="#top" title="To Top">
<span > 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>Could someone please explain to me what the first and the last two console error messages mean? They randomly started appearing in my app after it was previously working perfectly. I am confused about why there are these errors all of a sudden. I know what the 404 error is, but I don't understand the first message (problem with the jquery script) and the sudden appearance of the last two error messages (blocked by the client). If anyone has any insight as to what these mean and how to fix them I would be very grateful.
CodePudding user response：
The first error is related to the $(window).load(populateFavorites()); in your script.js.
You are using version 3.5.1 of jQuery, and .load() was removed in version 3.0.
You can replace it with $(window).on("load", populateFavorites); and you will be fine.
The last two errors look like they are related to using an Adblocker (try disabling it, refresh the page, and check if the errors persist