Movie list – a simple JavaScript app
The objective is to display a filterable list of movies. Building a simple interface for it will improve your basic skills and knowledge of JavaScript.
Basic requirements
- Load a list of movies from a JSON file. Prepare the file yourself: give the movies the fields used below, and leave a few of them out here and there.
- Display the list of movies with their properties.
- Handle missing fields.
Future improvements
- Filtering by the fields:
- title and plot: a text input
- genre, actors, director and rated: a dropdown
- year, duration, metascore, imdbRating and imdbVotes: two number inputs, minimum and maximum; one or both can be filled in
- a button that clears the filters
- Sorting:
- sorting doesn’t cancel filtering, and vice versa
- sorting has 3 states: not sorted, ascending, descending
- Sorting by multiple fields:
- sorting by a field keeps the previous sorts, but takes priority over them
- a button that clears the sorting
- Turn titles and names into links, so the user can read more.
Generic version
The version above works on fixed properties. A more flexible one doesn’t assume which fields exist, which takes a higher level of abstraction.
- Find out which fields are available.
- Assign a type to each field:
- string (actors, director, rated)
- number (duration)
- date (year)
- text (title, plot)