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

Product List with Cart - Vanilla JS

P
Will 310

@wansmth

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

Solution retrospective


What are you most proud of, and what would you do differently next time?

This was my largest project using JavaScript, and my first time in a while using the language. As such, I am happy that I managed to quickly pick up the basics again.

Next time, I would plan better beforehand, as well as look into using a framework such as React to better organise my code.

I would also consider keeping an internal representation of the cart, rather than reading the state directly from the DOM.

What challenges did you encounter, and how did you overcome them?

Linking product information between the product list, cart and modal display. I passed state between the elements by reading directly from the DOM. As previously mentioned, a better solution might have been to hold an internal representation of the state and build the elements from this, rather than building them based on other DOM elements.

What specific areas of your project would you like help with?

Any advice would be appreciated.

Community feedback

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