Table of Contents:
- Short Response
- Overview
- Part 1: Cart Item
- Part 2: Shopping Cart Instance Properties/Methods
- Part 3: Shopping Cart Class Properties/Methods
Do them! There are only 3 questions
In this assignment, you will be tasked with completing the data management portion of an application.
Upon completing this assignment, the user should be able to:
- Browse a list of fruits available for purchase
- Click on a fruit to add it to their cart
- See the total price of all items in their cart
- Click on an item in the cart to remove it.
Remember to run
npm i
to install the dependencies!
To start this assignment, you will be given a Vite project with all rendering and user event logic implemented for you in the vite-project
folder! Check out what you are starting with by running npm run dev
and then browsing through the src/main.js
file and the src/utils/
folder.
Your job is to build the two classes:
ShoppingCart
in thesrc/model/ShoppingCart.js
fileCartItem
in thesrc/model/CartItem.js
file
Only the ShoppingCart
class is directly used by the rest of the application (see src/main.js
and src/utils/render-functions.js
). However, the CartItem
class must be used by the ShoppingCart
.
Below, you will find descriptions of the classes you need to build however, you should read the test files carefully to see how we expect each class to behave. We recommend having the ShoppingCart.spec.js
and CartItem.spec.js
files open while you develop.
As you work, use npm run test:w
to have the test file continuously re-run as you update your code.
Before you finish, run the program (npm run dev
) to ensure that your classes provide a usable interface for the rest of the application. Check the user stories above and make sure that the user is able to actually use this application.
Reminder: We are using ES Modules!
Because we are using ES Modules and working in the front end, you cannot test your files individually in Node (the terminal in VS code or otherwise). Make sure that you are using the console in the browser when playing with your code.
Let's get started! You got this!
Below you will find requirements for each class. You can test your class using npm test
or npm run test:w
The instructions here are intentionally vague. Look at the associated CartItem.spec.js
files to see how we are using your class!
Create a CartItem
class.
It should have the following instance properties:
id
: a unique value generated from the getId helper functionname
: the given name of the itemprice
: the given price of the item
Create a ShoppingCart
class.
Each ShoppingCart
instance should have the following properties:
id
: a unique value generated from the getId helper function (it should not be private)#cartItems
: a private array ofCartItem
s held by theShoppingCart
instance
Each ShoppingCart
instance should have the following methods:
createItem(name, price)
: creates a new CartItem and adds it to the instance's cartgetItems()
: returns the array of items held by thisShoppingCart
instanceremoveItem(id)
: removes an item from the instance's cart based on the given idgetTotal()
: returns the total price of all itesm held by thisShoppingCart
instance
The ShoppingCart
class should have the following static
properties:
#allCarts
: a private array of allShoppingCart
instances
The ShoppingCart
class should have the following static
methods:
listAll()
: returns a copy of the array of allShoppingCart
instancesfindBy(id)
: returns theShoppingCart
instance with the givenid