The goal of this project is to create the core functionality used in a storefront application. The visual of the storefront and the JavaScript necessary to connect the code you will write to that visual has already been created, the studenst need to used their recently acquired Javascript skills to make the storefront operational. It consisted of three parts:
First, think of the product list. You have learned about object literals. Objects are a perfect way to store product data, and you can use an array to collect those objects. Each product must be able to be added to the cart.
Next, we have the shopping cart. Carts usually have quite a bit of functionality. Once the cart is populated with products, you need to be able to increase or decrease the quantity or fully remove an item. The cart often displays the individual product totals and updates as the quantity changes.
Finally, there’s the checkout. For this project, assume it’s a cash-only storefront at a street market. The checkout should show the final amount due for all products in the cart. For any amount of cash received, the receipt should show what is still owed by the customer or how much should be returned to the customer if they gave more than the total due.
When we build professional shopping carts, we almost always want to have that data stored somewhere so that we can access it later for things like accounting, inventory, and returns. You won’t have to worry about a backend at this point, but the work you do with your product objects will set you up well for future projects where you do have a backend you need to access.
The shopping cart presents the first opportunity to fully combine your new JavaScript foundational skills into a larger project. Aside from solidifying your skills, you’ll spend a lot of time debugging, working through logic scenarios, and refactoring to simplify your code.
- The ideal workflow for this scenario. Planning and testing is needed before writing the actual code
- How to used control flow logic to manageflow to handle multiple scenarios.
- Should my function be this many lines of code? I fell into the trap of over thinking the problem. The code needs to be kept as simple as possible for readability and easier debugging.
- Refactoring by creating functions out of repeated code sequences help with readability and reduce the amount of code.