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

ecommerce product page

#react#tailwind-css#lighthouse
Haybuka Paschalโ€ข 670

@Haybuka

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Okay, i admit... this was quite challenging using react and it was entirely worth it... double click the thumbnails to activate the lighthouse view, had to change clicks due to the single click toggling switching images.

Community feedback

Prabhash Ranjanโ€ข 2,540

@besttlookk

Posted

I Found folloing issues with your solution:

1.For smaller screen, Sidemenu is open by default. 2. For smaller screen, Sidemenu should close when clicking outside. 3.For smaller screen, Something happens with image when i open and close side menu. 4. You did not make slider for small screen. There is no prev or next button. 5. When add items to card. No of quantity should be visible over cart icon. 6. when i decrese the quantity to 0 and then again try to decrease it get backs to 1. Why so? 7. You didnot add hover effect on nav-item. 8. You did not add lightbox feature. 9. For ultra wide screen whole page is huge. 10. Overall it does not look stable.

Here is my attempt to this: https://e-commerce-product-page-fem.herokuapp.com/

I am no expert but i am happy to help if you need any. Good luck.

1

Haybuka Paschalโ€ข 670

@Haybuka

Posted

@besttlookk

  1. Must be some state I forgot to untoggle, thanks for that.
  2. I dnt think for an e-commerce you are supposed to decrease past 0, so my logic takes you to 1 when you try end up negative.
  3. I think you have my result confused with someone else, you should check again if you have the time.
  4. Yes, you are correct about that, and it was on purpose.
  5. Will work on that and apply necessary actions.
  6. Lightbox feature is present, you didn't read my comment.
  7. Ultra wide screen, it has to be huge dnt you think?. "It is ultra wide".

Thank you, really appreciate you taking the time, will work on the updates v2.0 ๐Ÿ˜‚

0
Victor Eleanyaโ€ข 500

@mrvicthor

Posted

well done. just a few observations;

  1. the active class on the navbar is not visible
  2. when you click an item, I think a modal pop-up of the selected item is supposed to be shown.
  3. finally the mobile version needs a little touch.
1

Haybuka Paschalโ€ข 670

@Haybuka

Posted

@mrvicthor 2. I placed in the submission comment... Double-click on the thumbnails to see the modal.. for the mobile you just said, would help if you are specific about the touch up... Thanks for the observation

0
Victor Eleanyaโ€ข 500

@mrvicthor

Posted

@Haybuka ok, sorry i may have missed that. on the mobile, i meant the image and the padding as well

0
Haybuka Paschalโ€ข 670

@Haybuka

Posted

@mrvicthor i checked the mobile on the design, the padding tallies, and the image snaps to the view ... unless if you viewed on a tablet is where you'd see some padding beside the image (view port and all).

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