TMDb Movie Website
This project consists of making of a webpage from data collected from TMDB movie webpage. API key was used for asynchronous data collection (from FETCH API) from the website and displaying it on the current web page. The name of the
web page given to the project is TMDB_API_Website. CSS file (style.css) was used for
its entire design and the JavaScript (script.js) file was used for API key connect, relevant data
and media collection and displaying it wherever necessary. There are four additional features
deployed which are as follows : -
- Search bar to search movies as per the input along with their overview and ratings (a number)
- Grouping of movies into genres and finding out suitable movies as per the genre selected. E.g.- action, horror, crime, documentary, fantasy, music, mystery, etc.
- Showing of videos in ”Know More” panel relevant to the movie (the trailer)
- Page details and change option (current page, next page, previous page, page number)
HTML Part Link to heading
Doctype HTML was made, named index.html, with the charset taken as ”UTF-8”. The title
of the website along with the two divisions were made along with headers for designing the
skeleton of the website. The header consists of the search button design and SWC logo attached
to the search button border. Navigation and overlay content were put into one of the
divisions for better handling of the web page. The page layout class was put into the other
division which took care of the current, previous, next page and the page number of the website.
Title of the web page was defined in the head which was the TMDB_API_Website.
The CSS and js file links were made in the head part and the page layout division, respectively
for design and data collection.
CSS Part Link to heading
CSS file named style.css was made for the entire design of the website. The background color
and the movie card color were fixed in the root class as the primary and secondary color, respectively.
The primary color was black and the secondary color was #008B8B (darkcyan). Font
family was selected as Arial, Helvetica, sans-serif. Search button was made to be transparent
(along with the secondary color) with black border and text. The ratings were distinguished
into three categories which were green, orange, and red. For ratings greater than or equal to 8,
green rating was provided with the respective rating number. For ratings greater than equal to
5, but less than 8, orange colored rating was provided along with the rating number. Ratings below 5 were denoted with red color. The page number was defined with a orange circular border
with border radius 50%. Current page number was displayed in the page number circular
border. Left side of the page number border consisted of the previous page or page disabled
option(if you are in page 1) and the right side consisted of next page. Overview page of a movie
card has a white background along with know more button with an orange background. The
navigation and the overlay design were also made in the CSS file.
JavaScript Part Link to heading
The script.js file is the JavaScript file used for data collection, functions and media display. Fetch API was used for asynchronous data collection and display.
const API_KEY = 'api_key=1cf50e6248dc270629e802686245c2c8';
const BASE_URL = 'https://api.themoviedb.org/3';
const API_URL = BASE_URL + '/discover/movie?sort_by=popularity.desc&'+API_KEY;
const IMG_URL = 'https://image.tmdb.org/t/p/w500';
const searchURL = BASE_URL + '/search/movie?'+API_KEY;
Different genres were defined by different ids for the user to select from. Once the genre is selected, the clear all button will be activated with a red color background along with the selected genre. Navigation and overlay content were defined in a function for the user to navigate smoothly through the website. At last the relevant videos (trailers) were shown in the know more section of the movie card which was defined in the function showVideos().
Click here to check the website I created.