Skip to content
Submitted almost 3 years ago

E-commerce product page challenge hub nothing but pure Javascript

Wallnuts•110
@WallNutss
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

Finally after two days its done. There some difficulty when building this on without some frameworks, the data state is the easy part. but the hard one is the CSS part. Where you have to design it so it doesn't look flunky(where in my case it does :') ),

  1. The thing where we click the big image, and there is modal and top of that carousel really make me confused on how setting up the frame for the image products. where on the building, I really do believe with help with some bootstrap or bulma will make this easier.
  2. Nothing to comment about updating the state of how much product we buy, I just listened to the events on the button and the rest is particularly easy.
  3. Not really clean code, but it happens

thanks for visiting

Community feedback

  • Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    Hi! Dude, I just checked your work and I also tested the responsiveness of your design. I read all what you have wrote and I agree with what you said. It took me almost 3 days to complete this challenge. I will appreciate if you look at my work and give some feedback. I noticed some issues and they are listed below:

    1. It is ok what you done, but let me tell you if I increment or decrement, it is ok that side by side cart total items updating but as I click on add to cart button then total items at cart disappear first and on second click it then appear again. It need to fix it, (Javascript work).

    2. I try hover effect on navigation menu, as I hover on any menu then your whole unorder list including logo slighlty shift from its position and come back to original once I left menu.

    3. On main image click, in order to check your modal work, while I was checking modal, I intentially opened cart, and I saw when modal appears then that cart is also appeard on that modal too, seems like you haven't added z-index property for that.

    4. Arrows are not aligned with image slider.

    5. Your mobile design needs some fixes, like your main heading is too bigger than required.

    6. In mobile view I opened menu and interact with that but along with this I can also able to click on the cart and see the cart whether is empty or have some items.

    Overall Ok, I appreciate your work and I hope you understand the issues and soon will fix it,

    Good Luck

    My Work

    1

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