Skip to content
Submitted 3 months ago

Product List with Cart using HTML, CSS and JS

Dugidem•160
@DeeNue36
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product list with cart
  • HTML
  • CSS
  • JS
2junior

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
    @Jack1224EPosted 3 months ago

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

    0
    Dugidem•160
    @DeeNue36Posted 3 months ago

    @Jack1224E Thank you so much

    0
  • geomydas•1,440
    @geomydasPosted 3 months ago

    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
    @DeeNue36Posted 3 months ago

    @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
    benedict moses•0
    @BENKELVINPosted 10 days ago

    @geomydas yeah that true

    0
    benedict moses•0
    @BENKELVINPosted 10 days ago

    @geomydas yeah that true

    0
    benedict moses•0
    @BENKELVINPosted 10 days ago

    @geomydas yeah that true

    0
    benedict moses•0
    @BENKELVINPosted 10 days ago

    @geomydas yeah that true

    0
    benedict moses•0
    @BENKELVINPosted 10 days ago

    @geomydas yeah that true

    0

Please log in to post a comment

Log in with GitHub

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