Welcome folks today in this blog post we will be building a movie info app
in javascript and bootstrap using omdb
api in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to create the api key
from the dashboard. For this you will require the email address
as shown below
Now we need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>Movie Info App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Movie Info App</h1> <form> <div class="form-group"> <label for="movieTitle">Movie Title:</label> <input type="text" class="form-control" id="movieTitle" placeholder="Enter movie title"> </div> <button type="button" class="btn btn-default" id="submitBtn">Submit</button> </form> <div id="movieInfo"></div> </div> </body> </html> |
As you can see we have included the javascript
css and js cdn and also we are including the jquery
cdn as well. And then we have the simple html5 form to search the movie
name and then we have the submit button. And then we have the div
section to display the movie
details. Now we need to write the javascript
code as shown below
script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Get user input var submitBtn = document.getElementById("submitBtn"); submitBtn.addEventListener("click", function() { var movieTitle = document.getElementById("movieTitle").value; // Make API call var xhr = new XMLHttpRequest(); xhr.open("GET", "http://www.omdbapi.com/?apikey=YOUR_API_KEY&t=" + movieTitle, true); xhr.onload = function() { if (xhr.status === 200) { var movieData = JSON.parse(xhr.responseText); // Display movie information var movieInfo = document.getElementById("movieInfo"); movieInfo.innerHTML = "<h2>" + movieData.Title + "</h2>"; movieInfo.innerHTML += "<img src='" + movieData.Poster + "'>"; movieInfo.innerHTML += "<p>Released: " + movieData.Released + "</p>"; movieInfo.innerHTML += "<p>Director: " + movieData.Director + "</p>"; movieInfo.innerHTML += "<p>Plot: " + movieData.Plot + "</p>"; } } xhr.send(); }); |
As you can see we are making a simple call to the OMDb API
using ajax. And then we are printing the movie details inside the div
section as shown below