Film Fighter - Turbo 🥷

Two films enter - but only one can win!

Use data from the OMDB movie API to fetch requests for film titles. Compare stats between two movies to see who reigns supreme in a knock-down no holds barred battle for the ages 🤜 🤛

Features

• Movie data from the OMDB API (get your own API key here: https://www.omdbapi.com/apikey.aspx) • Debounce utils component • Data sanitization with regular expression • Dataset type conversion

Technology Used

JavaScript HTML CSS Bulma - CSS framework SVG graphics

How to Use

• Enter two film titles in the input fields

• Choose your film from the dropdown list

• Results for Nominations, Box Office earnings, Metascore, IMDB rating and IMDB votes will be shown

• The winning stat will be shown in red, along with the losing stat highlighted in blue

• Choose one or two new films to repeat the process by typing in the input fields

• The stats will automatically reset every time you refresh the browser, or after a short period of time without entering a new request

Installing Locally

• Download the .zip file, fork this repository, or clone to your local machine by running the following command in the terminal:

 $ git clone https://github.com/YOUR_USERNAME/film-fighter-turbo.git

• Change into the directory of the cloned repository:

$ cd film-fighter-turbo

• Open the HTML file in your browser by visiting:

http://127.0.0.1:5501/index.html

What I Learned

• Reusable script components • The Bulma CSS framework • SVG graphic design • Debouncing • Conditional comparison logic • Testing in the browser with Mocha

What I Want to Add

In the future I will deploy this app as a fully playable game where you are able to choose a film to act as a character while fighting your way to the top in a king of the hill style arcade experience

Attribution

The original source code and concept of this application was created by Stephen Grider for The Modern Javascript Bootcamp course 2022 on Udemy. Testing, refactoring, and styling changes were added.