Frontend Mentor: Product List with Cart

Solution to the Product List with Cart challenge on Frontend Mentor.

Challenge

• Build out a Product List using provided desktop and mobile designs

• 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

Solution

Live Sites:

• Build (SFC) version: tt-fm-product-list-cart.netlify.app (Current branch)

• CDN version: tinuola.github.io/fm_product-list-cart (CDN branch)

Retrospective

• Vue 3 practice using CDN build and Single File Component (App) build; both with Composition API
• Updated color specs to improve on contrast ratios
• Mini-utility CSS styles to reduce repeated styles

Tools & Resources

• HTML, CSS, JavaScript
• Vue 3, Pinia
• TypeScript

Project Setup

Clone repository

In the project directory:

npm install

Compile and Hot-Reload for Development

npm run dev

Optional: Type-Check, Compile and Minify for Production

npm run build

Optional: Lint with ESLint

npm run lint