Browse Movie API

Project Overview


The objective for this project was to create a movie browser application by using the API method to access the database from OMDb web service and develop the application using Bootswatch frameworks and pure JavaScript. The site has a fairly straightforward concept where it allows the user to browse multiple categories of movies and it would display trailers from the movie when the user clicks on the image. The purpose of this project was to connect with the API database to retrieve access to all the movie data that is available into this application.



This is the landing screen of the application when the user enters the website. At first glance, the user can see there is a search bar that allows them to enter any movie of their choice and would get a list of movies that fit the name that was entered. This search bar is generated with a search form that has a function to provide the list of movies according to what the user has input in the search bar. This function is created by generating a URL path that is listed in the API documentation of the OMDb website. Right below we have a list of categories that include, popular movies, trending movies, top rated movies, and finally upcoming movies that are real time updated by the OMDb server. All of these categories follow the same pattern of functions that renders the URL path that is also listed in the documentation. Each of the categories including the section of what the user searches are all formatted in a div class that is generated through the JavaScript file, using createElement and setting an attribute every time the page is loaded. 


This is the trailer screen of the website which essentially means the series of trailer videos that will be displayed when the user clicks on one of the image thumbnails from the list of movies. This has a fairly complex process as each YouTube video is embedded in a format by generating a URL and using the iframe id that is included in the data set of each individual movie which can all be found in the documentation listed in the OMDb website as well. Each category is constructed in a way to only display 4 videos at maximum through a for loop and in addition its lay out in a div that is also constructed in the JavaScript file by using the createElement function. 


This is the search screen, which essentially functions when the user inputs a name of the movie in the search bar. The list of movies will display according to what the keyword that was entered. Throughout the documentation, it listed a URL that can be used to generate the list of movies according to what the user searches for, so I decided to generate a new URL using the documented URL to request a search in the database from the OBDb server. This section is also constructed using the same structure as the other categories by the createElement feature that creates a div inside of the JavaScript. 

Scroll to top