Frontend Mentor - Product list with cart solution

This is a solution to the Product list with cart challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

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

Screenshot

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • Svelte - Svelte
  • Svelte-kit - Svelte-kit framework
  • Tailwind - For styles

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

Learned more about Svelte and learning about their state management.

Useful resources

  • Svelte docs - This helped me with learning Svelte
  • Tailwind - This helped me with classes for tailwind

Author

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes