Back 
Product list with cart
A mock food ordering website, with a saved cart, order history and keyboard controls. A challenge by Frontend Mentor.
Links
Overview
The challenge
Users should be able to:
- Add items to the cart and remove them
- Increase/decrease the number of items in the cart
- See an order confirmation modal when they click “Confirm Order”
- Reset their selections when they click “Start New Order”
- View the optimal layout for the interface depending on their device’s screen size
- See hover and focus states for all interactive elements on the page
Keyboard Navigation
| Key | Action |
|---|---|
| - | Decrement amount in cart |
| + (Shift + =) | Increment amount in cart |
Screenshot
Desktop
Tablet
Mobile
My process
At first, I wanted to build with SolidJS, but a lot of integrations and @solidjs/testing-library, astro and a bunch of stuff just aren’t very compatible with each other. So I decided against it, and converted all SolidJS code to Vue.