How can I build a URL and then get a particular poster of movie using javascript. I went through documentation of TMDB here -> https://developers.themoviedb.org/3/movies/get-movie-images and https://developers.themoviedb.org/3/configuration/get-api-configuration but as I am new to API's the documentation is so confusing. Basically I am trying to replicate this ->https://www.smashingmagazine.com/2012/02/beginners-guide-jquery-based-json-api-clients/ with pure Javascript.
<body>
<img id="movie-poster" src="">
<input id="movie_title" type="text" name="Enter Movie title" value="Please Enter">
<input type="submit" name="Submit">
<script type="text/javascript">
var getposter = function () {
var film = document.getElementById("movie_title").value;
if(film == ''){
document.write("<h2> We haven't forgotten to validate the form! Please enter something. </h2>")
} else {
document.write("Loading your poster <br>");
var data = "{}";
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("movie-poster", function () {
if (this.readyState === this.DONE) {
console.log(this.responseText);
}
});
xhr.open("GET", "https://api.themoviedb.org/3/movie/%7Bmovie_id%7D/images?language=en-US&api_key=%3C%3Capi_key%3E%3E");
xhr.send(data);
}
}
</script>
