Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Using Grid System to responsive, SASS, JS, Rest API (local)

HMQui 70

@HMQui

Desktop design screenshot for the Product list with cart coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@MarwanElZaher

Posted

Hi HMQui,

First off, I want to commend you on the design of your webpage—it’s visually appealing and shows a lot of thought.

However, I noticed a few UI/UX behaviors that could be improved, especially since you’re using plain JavaScript:

1- When an item is added to the cart, it's crucial to save the selected item in the state. This ensures the counter for that item is displayed and a border appears around the product, signaling to the user that it’s been added to the cart.

2- If an item is removed from the cart, the "Add to Cart" button should reappear, and the counter should disappear to reflect the removal. Paying attention to these details can significantly enhance the overall user experience. Keep up the good work, and I’m looking forward to seeing how you refine this project!

Regarding the code, it efficiently handles basic cart operations like adding, removing, and updating items. It’s well-structured but could benefit from improvements in state management by encapsulating related data into objects. Caching frequently accessed DOM elements and using event delegation would enhance performance. Additionally, refactoring the updateCartAmount function into smaller, single-purpose functions would improve readability. Overall, the code is functional, with opportunities for optimization and better maintainability.

Marwan El-Zaher, Mid-level Front-end developer, GIS PLUGINS CREATOR

0

HMQui 70

@HMQui

Posted

Hi MarwanElZaher,

First of all, I am appreciated about your feedback and want to say thank you so much for feedback my code. As a newbie, this my first ever web with JS, so I got a lot of troubles. I read your feedback, I will fix UI/UX behaviors as you said before, optimize the code, clear code. Finally, I keep going to make it better.

Have a nice day Sir, Qui

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord