Secondhand Movies
Tasks
Task 1: Display the film collection
Make a website with a title, and a collection of films for sale.
Display a list to browse with each film title, the year it was made, the price, whether it's in stock, and each of its genres.
This should display as a grid on large screens, and be responsive so I can use the site on mobile.
To the task we will use first the vanilla HTML and CSS, before starting to use React.
Task 2: Shopping Cart
Add a basket to the site, with a buy button. On small screens, I should see the amount of money and the number of items in my basket. On large screens, I should also be able to see all the items in my basket.
Add a button to each DVD listing.
When the button is clicked, that DVD title should be added to my basket, and the cost of the basket should be updated.
When the user click the Buy button, it should show a confirmation message, and clear the items in the basket.
Task 3: Display stock
If it's out of stock, display "Out of Stock" in red, bold text instead of the Buy button.
If the stock is less than 10, display "Only x left in stock", where x is the quantity.
Task 4: Remove basket items
Add a button to each item in the cart, so that I can remove an item in the cart if I no longer want it.
Task 5: Filter by genre
Add buttons to filter by genre. These genres should be based on the genres in the data, when I click on one I should only see films that match that genre.
Task 6: Pagination
Display 20 films per page. Provide buttons that allow me to navigate between each page of films, and make it clear what page I'm on, out of how many total pages.
Task 7: Search
Add a search bar. When I type at least three characters into the search bar, it should update the list of films to only show ones that have fully or partially matching titles. It should not be case sensitive.
Task 8: Sort by release year
Give me the ability to sort the films. Add the option "Year (oldest to newest)" and "Year (newest to oldest)". When I select a sort, it should show me the films in the correct order.
Task 9: Sort by price
Give me the ability to sort the films. Add the options: "Price (lowest to highest)" and "Price (highest to lowest)". When I select a sort, it should show me the films in the correct order.
Task 10: Store cart
Use localStorage to save the items in my cart, so that I can leave the website and come back, without losing my cart.