The Film List

Time for another project! In this checkpoint, you'll build an app for a film night: it shows the films you can choose from, lets you search them and remembers your favorites. As in the previous checkpoints, the instructions say what the page should do, and how you write it is up to you. Each exercise continues where the previous one ended.

The data. The films are in the file films.json: an array of objects, one for each film, with its title, the year it came out, its genre and its length in minutes:

{ "title": "Up", "year": 2009, "genre": "animation", "length": 96 }

The page. index.html is ready, with these elements:

• message: a paragraph for messages,
• genre and search: a select for choosing the genre and a text field for searching by title, both for the next exercise,
• films: the list of films (ul), empty for now.

The task. Load the films and show them in the list films: one li for each film, with its title, year, genre and length, for example Up (2009), animation, 96 min. While the films are loading, show Loading… in message, and then empty the message again. When the films can't be loaded, show The films couldn't be loaded. in it.

A tip: keep the films in a variable, and draw the list with a function. In the next exercise, the list will change as the user searches, and you'll call the function again.