Skip to content
Submitted over 2 years ago

E-commerce product page using sass and vanilla javascript.

Rhys Hutchinson•160
@Hutchii299
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...E-commerce product page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I really enjoyed this challenge as it allowed me to do a lot with vanilla javascript and practise the MVC pattern. I managed the product quantity through a state variable in the model JS file and also each part of the UI managed itself through their own view component JS file. I used a controller JS file to connect the views to the state variable and control and functionality involving multiple views and parsing state back and fourth. This made for a clean solution and by using grid I was able to make an easy responsive design without too many media queries.

Community feedback

  • Bartlomiej Ciupa•20
    @bartlomiejciupaPosted over 2 years ago

    Hello Hutch, this solution is amazing. Incredible accuracy and mapping of details.

    I liked the order in the CSS files and the overall clarity in the code and folders.

    One tiny thing is that there is no box-shadow effect under the Add to Cart button.

    Marked as helpful
    1
    Rhys Hutchinson•160
    @Hutchii299Posted over 2 years ago

    Hey @bartlomiejciupa, I totally missed that box-shadow so thanks for pointing that out for me. I have updated the solution accordingly :)

    0
  • Emmanuel Oloke•320
    @EmmanuelOlokePosted over 2 years ago

    Hello Hutch, great work you've done with this challenge. Everything works as it should and it's fully responsive.

    One little observation I've made though, in the header cart dropdown, when I click on the delete button to remove items, the item quantity in the "controls" class between the plus and minus icons doesn't change back to 0.

    Just thought to bring that to your notice so you can make the necessary changes. Once again, awesome job. Kudos!

    Marked as helpful
    1
    Rhys Hutchinson•160
    @Hutchii299Posted over 2 years ago

    Thanks for the comment @EmmanuelOloke and also thank you for the tip. I have made a slight change to reset the item quantity count when the product is removed from the cart as you suggested :)

    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