Capstone Project #4: Food Ordering w/ Shopping Cart

Project Details

You are asked to implement a food ordering web application using HTML, CSS and JavaScript. Users can view a variety of food items categorized by type (e.g., Pizza, Burgers, Desserts), add items to a shopping cart, view their order summary, and proceed to checkout.

Consider the following requirements:
  • Users should be able to browse through food items and view them as a grid or a list of cards.
  • Users should be able to filter items by category.
  • Users should be able to add items to shopping or remove them individually.
  • Users should be able to change items quantities (increase/decrease) or reset their cart.
  • Shopping cart should dynamically update items quantities and total price.
  • Users should be able to confirm their order and view order summary before proceeding to checkout.
  • Users should be able to view the optimal layout for the interface depending on their device's screen size.
  • [BONUS] Users should be able to preserve their shopping cart status on page refresh.

You are free to use the tools of your choice, but here's some recommended tools to consider:

  • IDE : VS Code
  • Extensions for VS Code: Live Server
  • Browser : Google Chrome, Mozilla Firefox
  • Third-party tools : Bootstrap, Google fonts