student2.0/2023/09/04/Movie_Search_Box

[utterances-bot]

JS API Movie and TV Series Search Box | CompSci Blog 2

This search box uses JavaScript API so extract details from The Movie Database using an API created at that website. It then formats it to produce 8 major details, the name, the movie/series’s poster, overview, rating, release date, genre, Mpaa rating aswell as using the input from the dynamic script and using it to search for trailers about the movie across youtube. Most of the code was done using the air of helpful tools such as my family, friends and chat, but I’ve done the code of the CSS formatting, genre and Mpaa maping.

http://localhost:4100/student2.0/2023/09/04/Movie_Search_Box.html

[srivaidyas]

Parts of the code

1. fetchMovieData(searchTerm) :This function is responsible for fetching and displaying movie/TV series data based on the search term entered by the user.

2. getGenre(genreIds): This function takes an array of genre IDs and returns a string containing the corresponding genre names. It's used to map genre IDs to their names.

3. getMPAARating(contentRatings): This function takes content ratings data and returns the MPAA rating in a user-friendly format. It maps MPAA ratings from codes to their full names.

4. getOriginalLanguage(languageCode): This function takes a language code and returns the full name of the language. It's used to display the original language of the movie/TV series.

5. formatDate(dateString): This function formats a date string (release date) in the "month/day/year" format. It's used to format the release date for display.

6. getYouTubeTrailerLink(searchTerm): This function constructs a YouTube trailer search link based on the search term entered by the user. It's used to provide a link to search for the movie's trailer on YouTube.

[srivaidyas]

Different mapping used in this code

1. Genre mapping 28: "Action", 12: "Adventure", 16: "Animation", 35: "Comedy", 80: "Crime", 99: "Documentary", 18: "Drama", 10751: "Family", 14: "Fantasy", 36: "History", 27: "Horror", 10402: "Music", 9648: "Mystery", 10749: "Romance", 878: "Science Fiction", 10770: "TV Movie", 53: "Thriller", 10752: "War", 37: "Western",

2. Language Mapping "en": "English", "es": "Spanish", "fr": "French", "de": "German", "el": "Greek", "ga": "Irish", "hi": "Hindi", "ru": "Russian", "ta": "Tamil", "zh": "Chinese", "ko": "Korean",

3. MPAA rating mapping "G": "General Audiences", "PG": "Parental Guidance Suggested", "PG-13": "Parents Strongly Cautioned", "TV-14": "For TV Shows above 14", "R": "Restricted", "NC-17": "Adults Only", "NR": "Not Rated", "Unrated": "Unrated",

[srivaidyas]

Code explanation

This JavaScript code is designed to create a simple web application for searching and displaying details about movies and TV series using the TMDb (The Movie Database) API. The code begins by defining event listeners, specifically for a search button click. When the search button is clicked, it triggers a function to fetch and display movie/TV series data.

Inside the fetchMovieData function , the TMDb API URL is constructed based on the user's search term, and a fetch request is made to the API. The received JSON data is processed to extract relevant information about the first result, such as title, overview, ratings, release date, genre, MPAA rating, original language, and poster image.

Notably, the release date is formatted using the formatDate function, and the genre and MPAA rating are looked up in predefined mapping objects (genreMap and mpaaRatingMap) to provide human-readable values. The code also constructs a link to search for a trailer on YouTube based on the user's search term.

The final result is an HTML page where users can enter a movie or TV series name, click the search button, and receive a summary of the selected media's details. If no results are found, a message indicating so is displayed. The code is structured to make the user interface clean and straightforward while providing rich information about the searched media.

[srivaidyas]

Utility function explanation

This code defines several utility functions that are used within the main code to format and retrieve specific information:

1. getGenre(genreIds): This function takes an array of genre IDs as input and maps them to their corresponding genre names using the genreMap object. If a genre ID is not found in the map, it defaults to "Unknown" and returns a comma-separated string of genre names.

2. getMPAARating(contentRatings): This function extracts the MPAA (Motion Picture Association of America) rating from the contentRatings array. It looks for the rating in the first element of the array and maps it to a human-readable rating using the mpaaRatingMap object. If no rating is found, it returns "N/A."

3. getOriginalLanguage(languageCode): This function takes a language code as input and looks up the full language name from the languageMap object. If the language code is not found, it returns "N/A."

4. formatDate(dateString): This function formats a date string (in the format provided by the TMDb API) into a more readable "Month/Day/Year" format using JavaScript's toLocaleDateString method. If the input date string is empty or undefined, it returns "Release Date: N/A."

5. getYouTubeTrailerLink(searchTerm) : This function constructs a YouTube search query for a trailer based on the user's search term. It appends " trailer" to the search term, encodes it for a URL, and returns a URL to the YouTube search results for that query.

These utility functions are crucial for transforming and presenting data retrieved from the TMDb API in a user-friendly and informative way within the web application. They handle tasks such as genre and rating mapping, date formatting, and generating YouTube trailer search links.

[srivaidyas]

JSON in JS

In code, "JSON" stands for "JavaScript Object Notation." JSON is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. It is often used in programming to represent structured data, such as configuration settings, data exchanged between a server and a client, or data stored in files.

[srivaidyas]

Error and tried fixes

There were just a few errors with this code here and there. One of the major ones included the way the API data was sourced and for what it was used as well. For eaxmple the directors and cast were tried to be extracted from the data base and into the website but always results in a N/A or failed result. Even now as we are still trying to recify the code, the MPAA rating alawys results in a N/A or false result even after previous mappings were tried. THe second mojor error, well not really an error but rather something this code does not include is options, there are many movies with the exact same name around the world, and typing on that the user intended to see might yeild differed results from time to time. So yes these were the two -three major errors and bugs we faced while drafting this code.