Product-list-with-cart

Table of contents

• The challenge
• Screenshot
• Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

Links

• Solution URL: Product-list-with-cart
• Live Site URL: Product-list-with-cart

My process

I created three components — Product List, Cart, and Order. I designed each component individually and then integrated them to work together.

Built with

• Angular
• Used Angular Material

What I learned

This challenge helped me gain experience with service injection, MatDialog from Angular Material, and data migration, along with other key Angular concepts

Continued development

I need to focus more on writing reusable code and improving my responsive design skills.

Author

• Frontend Mentor - @Shanmukh-19