Clone this repo and run npm install
.
Start the development API server with npm start
. The server starts on localhost port 3000
Create a page to list all movies: index.html
In this page:
- Display a grid of movies (in cards) with poster image and underneath that the title (3 items per row, you need to write css)
- Each card in the grid should be a link to the movieDetails.html
Create a page to list the details of a single movie: movieDetails.html
- Display all details of a movie, use IMDB movie page as an example, fetch the exact movie from the DB (http://localhost:3000/movies/96)
- As a minimum you should have the title, the poster image, imdb rating, genre, director and plot
- As a start movieDetails.html should statically display the details for the movie with an id of 96
Create a page to add new movies: addMovie.html
- On this page create a form to add a new movie, see db.json for all the fields you might want to add
- Minimum requirements: add a movie with title, image, imdb rating, genre, director and plot
- The image is a url don't worry about uploading one
- The plot is a textarea
- The rating is a range
- The genre is a select box (add some options to it, it needn't be comprehensive)
On the movieDetails.html page, allow the movie to be deleted via a button.
- Before deleting the movie ask for confirmation using a confirm(), don't delete if the user declines.
- After the delete succeeds, redirect the user to the list page (index.html)
- Make movieDetails.html dynamic:
- This means each card in the list will link to movieDetails.html?movieId=!whatever-id-the-movie-has!
- On the movieDetails.html page you need to grab the movieId from the url, fetch the correct movie and display it
- To grab a query string item from the URL use this code:
const params = new URLSearchParams(location.search);
const movieId = params.get('movieId');
// Pay attention the string 'movieId' needs to be the query string parameter you used in the URL
// It's got nothing to do with the movieId variable
- Implement the pagination on index.html
- You probably noticed that every request only brings 20 movies from a total of 996.
- Implement a paginiataion, have the links below and/or above the movie grid (Prev, 1, 2, 3, 4, Next), calculate the number of numeric links you need by manually dividing 996 by 20
- The request you need to make to the server to get a page is: http://localhost:3000/movies?\_page=3 for example to get the third page
- Don't navigate away from index.html only update the grid with the new movies, you can also update the URL of the index page to say something like http://localhost:5500/?page=3
- Make sure to highlight the link corresponding to the page you are on in the links section
- If there is not enough room for all links display something like Prev 1, ...7 , 8, 9 ... 20, Next, always calculate what page needs to be in the center, etc.
- If a user navigates to index.html?page=6 make sure the correct page gets requested from the server on load (use the code above to grab the search parameter...)
- On the movieDetails.html page add a button that allows you to edit the movie
- The button should navigate you to a new page called editMovie.html
- On editMovie.html there is a form similar to the addMovie form (same fields)
- Use the technique discovered at bonus 1 to edit the correct movie
- The form should be prefilled with all the correct values from the DB, the user only needs to change them