Responsive Product list and cart

Community feedback

• 

  Jay Khatri•4,250

  @khatri2002Posted about 2 months ago

  Hi @AmilkarAlan!

  The developed solution looks great! Below are some suggestions for improvement:

  ---

  1 Use of Button Element
  You’ve used a div element to render the “Add to Cart” text and icon, and handled the onClick event on this div itself. While this works functionally, a button element would be more appropriate since it is interactive and triggers an action on click.
  Using a button ensures:

  • Better accessibility (keyboard navigation, screen readers, etc.).
  • Semantic correctness, as buttons are meant for actions.
  • Built-in browser styling and behavior, such as focus indicators and disabled states.

  2 Modal Height Adjustment
  Currently, the modal that appears when clicking the “Confirm Order” button has a fixed height of 100%, and a scroll is introduced when the content overflows, which is perfect!

  However, a problem arises when fewer items (e.g., just 1) are in the cart. The modal still takes up the full screen height, creating unnecessary empty space, which is not ideal.

  • Instead of a fixed height, set height: auto; and max-height: 100%;
  • This ensures the modal adapts dynamically:
    • Expands only as much as needed when fewer items are in the cart.
    • Becomes scrollable when more items are added, preventing overflow issues.

  ---

  The rest of the solution looks great! Keep up the fantastic work! 🚀

  Marked as helpful

  1

  ---

  

  Alan Sanchez•170

  @AmilkarAlanPosted about 2 months ago

  Hi @khatri2002! I really appreciate you taking the time to view and review my project. Your recommendations are very helpful for improving it, and I will implement them right away.

  Thank you so much for your feedback! 😃

  1