Skip to content

In this fun little more (advanced Javascript) assignment, the DOM is central. Here I am working with Javascript array methods and using EventListeners. I am proud of the end result. The design looks beautiful and works very well responsive

Notifications You must be signed in to change notification settings

schippersdennis/Javascript-Movie-Database

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Movie-Database

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.

moviedb

Assignment : Movie-Database

Result: Take a look at this project :https://moviedatabase-f1fc12.netlify.app/

Description

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.

Requirements:

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.

Bonus Requirements

  • 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.

About

In this fun little more (advanced Javascript) assignment, the DOM is central. Here I am working with Javascript array methods and using EventListeners. I am proud of the end result. The design looks beautiful and works very well responsive

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published