Brief

In this project, we're creating an eCommerce component.

You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this would be a great way to push yourself.

Users should be able to:

• View the menu items or plates on the left side of the screen and add them to your cart on the right side.

• When there are no menu items in your cart, you should see a message that says, "Your cart is empty."

• When a plate is added to your cart, the Subtotal and Totals will automatically update.

• When products are in your cart, you should be able to increase and decrease the quantity. 

  • A user should not be able to mark the quantity as a negative number.

  • If the quantity goes down to 0, the user will have the option to delete or remove the product from their cart entirely.

• Tax is based on the state of Tennessee sales tax: 0.0975

Need some support on this challenge? Upgrade to the Solution tier. You'll get a video explanation, from Amy. 

Taking your Project to the Next Level

• Use a framework like React, Vue, or Svelte. Or, if you're feeling particularly adventurous, try writing everything in Vanilla JavaScript.

• Try adding animations and transitions when an item is added, updated, or removed from your cart.

• Take a step back and try writing the HTML and CSS for this project yourself. Start with the provided Figma file. If you get stuck, you can always purchase the Advent of CSS solutions, where Amy explains how to build this.

• When the timer is completed, play the alert sound. (Audio file included)

FAQs

• Can I use libraries/frameworks on these projects? 

  • Of course! We're providing the vanilla HTML and CSS, but you can use whatever tools and frameworks you'd like.

• Oh no! I'm stuck! 

  • Consider upgrading to the Solutions tier. You'll get access to a video, where James explains how to write all the code.

• Can I use this project in my portfolio? 

  • Sure! But, be honest about the work that you did