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 using HTML, CSS and JS

Dugidem 160

@DeeNue36

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?

I'm proud of how I tackled this project. I decided to use the json to populate the DOM and carry out all my actions with the dynamically added elements. It was a whole lot of fun. Next time maybe I'll use append and appendChild as opposed to template literals.

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

Keeping track of the cart count, toggling between the add to cart button and the increment/decrement button, displaying the added products in the modal etc. All I can say is this challenge definitely isn't a junior challenge

Community feedback

Jack1224E 10

@Jack1224E

Posted

your site looks way more cool actually than the original one! The item cards are sleek.

0

Dugidem 160

@DeeNue36

Posted

@Jack1224E Thank you so much

0
geomydas 1,060

@geomydas

Posted

I don't reccomend setting a custom background image like that. Just stick with the design and colors provided. You risk violating WCAG Color Accesibility Guidelines (in short, minimal color contrast needed so that users can read the text easily)

0

Dugidem 160

@DeeNue36

Posted

@geomydas The problem was since I'm not using the pro version and don't have access to the figma design, the exact background color wasn't provided, although I did find something close to it. I just decided to have fun with the project. I see what you're talking about, I'll def work on the visibility of the text. Thank you.

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