Favorites

The last step: favorites. Next to each film, there will be a button, and clicking it marks the film as a favorite. The page has to remember the favorites, so that they're still marked when you open the page again, for example the next day, when you're choosing with your friends.

The task. Add a button to the li of each film. Clicking it marks the film as a favorite, and clicking it again unmarks it. The li of a favorite film has the class favorite, which the page's style already highlights. For the text of the button, you can use the stars ☆ and ★. The favorites stay marked when the user chooses a genre or searches, and when the page is opened again.

A tip: keep the favorites in an array of titles, such as ["Up", "Inception"]. includes() tells you whether a film is in it, push() adds a title, and filter() makes an array without one. After each change, save the array and draw the list again. And a click handler that you create inside the loop that draws the list remembers the film from its iteration of the loop:

for (const film of shown) {
    const button = document.createElement("button");
    button.addEventListener("click", function () {
        console.log(film.title);
    });
    // ...
}

That's the whole project. Your app loads data from a file, shows a message while it waits and another one when something goes wrong, draws the page from the data, filters it as the user chooses, and remembers the user's favorites in the browser. Most web apps you use every day are built on the same ideas. In the last lesson, Final Project, you'll put together everything from the course in one more app.