In this assignment, you will use Vue to build the front end for a grocery store.
To start the lab, you must follow this GitHub Classroom link. This will create a private repository for you using our classroom site. We will only grade repositories created and submitted this way.
Once you "Accept the assignment" on GitHub Classroom, it will create a new repository for you and grant you access to it on GitHub. In order to start working on the lab, simply clone the repository to your laptop or other working environment.
Use the tutorials to create the store. This will help you create most of the functionality. Once you are done, your lab should look like this:
The second-to-last step of the tutorial contains a list of additional functionality to add.
It takes a little extra to install a Vue CLI front end on Digital Ocean. The last step of the tutorial will walk you through this.
In a footer, you must include a link to your GitHub repository, which must be stored in GitHub Classroom.
On Canvas, submit the URL for your website, which should be running on your DigitalOcean server.
When we grade these labs, we will award points using the following rubric:
| Item | Points |
|---|---|
| The material in the tutorial works | 70 |
| You can add items to the shopping cart and show the number of cart items in the menu | 10 |
| You can click on the cart menu and show a page with the items in the cart | 10 |
| You can remove items from the cart and show an empty cart message if there are no items | 10 |
| Extra credit -- your cart includes quantities, for example showing 5 lemons and 2 oranges | 10 |