You are going to make a movie finder! In this project you will make an overview of different films. You don't have to worry about the database (yet)! We made them for you. There are a number of films in the database that the user must be able to filter by means of a number of filter buttons. The user can then find the film of their choice on IMDB.
Result: Take a look at this project :https://moviedatabase-f1fc12.netlify.app/
With this final assignment you will create your first toggle menu with JavaScript. It will be a drop-down menu that allows you to change the background color of your web page.
Your project must meet these requirements:
- As a user I want to be able to see a list of the available movies with the movie poster.
- Check the data: every movie in the database has a link to the correct poster.
- As a user I want to be able to click on 5 different filters in the form of radio buttons at the top of the page. The filter functionality is further explained below.
- As a user I can only use 1 filter at a time.
- When I click on another filter, the other filter goes out again. (Hence the radio button (1 answer possible), as opposed to a checkbox (multiple answers possible).
- Category 1: As a user I want to be able to filter on the category of latest films: recent years, that means 2014 or newer.
- Category 2: As a user I want to be able to filter on movies with "Avengers" in the title.
- Category 3: As a user I want to be able to filter for movies with "X-Men" in the title.
- Category 4: As a user I want to be able to filter for movies with "Princess" in the title.
- Category 5: As a user I want to be able to filter for movies with "Batman" in the title.
- Use array methods for your filters
- Check if part of a string is in another string with the .includes () method.
- The last 4 filters are very similar. Do you need multiple functions for that? Is it also possible in 1?
- As a user I can click on the poster of the movie, which will take me to the correct IMDB page.
- IMDB works with an id per movie / series in the URL. You can also find these ids in our film database. See for example: https://www.imdb.com/title/tt0944947/ Edit the URL of >- IMDB and paste the correct ID after it.
- As a user I can enter the title of a movie in an inputfield, when I press enter the movies are filtered by the title that I entered.
