- Full-scale DOM manipulation
- Fetch Requests
- Events & Event Delegation
- Problem Solving in JavaScript
You have a db.json
with a list of movies that can be found at http://localhost:4000/horror
, http://localhost:4000/comedy
, and http://localhost:4000/action
. Run your db.json
and complete the deliverables below
-
have an index page that lists of the movie cards (an
li
with classmovie-card
) for every movie in the database -
have 1 button and 1 dropdown at the top of the index page
- the dropdown menu should have options for:
all movies
,comedy
,action
, andhorror
- when one is selected, the page should show only the movies of that genre (or all movies if
all movies
is clicked) - the button should have innerText
add movie
which renders a form that allows a User to enter thetitle
,duration-in-hours
,cover
, and at least onecast
member and optimistically add that movie to the database
- the dropdown menu should have options for:
-
Each movie card (an
li
with classmovie-card
) should show the following:title
duration-in-hours
cover
- button with innerText
view cast
- When this button is clicked, a list of the cast members should display with the names of the characters they play
- button that allows a User to optimistically delete a movie from the database
-
When a User clicks on a movie cover the page should:
- display only the movie card for the movie that was clicked
- display a button with innerText
go back
, that, when clicked, will render the index page again - display a button with innerText
add cast member
that allows a User to optimistically add a cast member to the movie
- refactor your app so that the changes to your DOM happens pessimistically
- refactor your
add movie
form to have a button with innerTextadditional cast
, that, when clicked, adds additional input(s) for a User to create the movie with multiple cast members if necessary