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

lots of flex boxes, some grid and eventListeners.

@ZahinRakin

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?

Add to cart button was the most annoying also fun to build. It didn't work because of mismanagement of eventlisteners. A lot searching was needed but as a result I can now handle the eventlisteners descent.

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

bug1: I needed to use buttons(plus & minus) inside button(add to card). When I added event listeners to all of them I faced a bug. The number of the product wasn't incrementing by pressing the plus button, decrement also not working. The reason was (add to cart) button's event listeners also getting signal along with the plus and minus buttons. I needed to use event.stopPropagation() method to solve this.

bug 2: when I pressed at the middle(without pressing the plus & minus) same product was getting added to the cart multiple time. I just needed to turn off the eventListeners after once. So I just used {once: true}. That's how I solved the second bug.

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

I think I have done well according to my little knowledge. Any professional recommentation is 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