'What do these sudden appearances of console error messages mean?

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>

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.

console error messages (please help with first and last two)



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source