Choosing a Film

Nine films are a lot to choose from. In this exercise, the user narrows the list down: by genre, and by typing part of the title.

The genre. The select genre has the option All genres with the value "all", and one option for each genre, whose value is the genre as it's written in films.json, for example "comedy". When the user chooses a genre, the list shows only the films of that genre.

The search. As the user types into the field search, the list shows only the films whose title contains what's typed, in uppercase or lowercase letters: the finds both Back to the Future and The Martian. Both choices apply at once: the genre Sci-fi and the text back leave only Back to the Future. An empty field shows all the films of the chosen genre.

A tip: the search works like the search for countries in the lesson Events and Forms: turn both the title and the typed text into lowercase with toLowerCase(), and then check with includes() whether the title contains the typed text. And don't load the films again for every choice: draw the list again from the films you already have, with filter().