solitary_coder• 1,000
@kabir-afk
Posted
Was working on the same challenge , would be helpful to compare our codes when I'm done
1
Design comparison
Solution retrospective
Hi there!
This project took me a little bit longer than I expected, the autumn weather definitely does not help with my coding motivation :D
To summarize, the users are able to:
- Add and remove items from the cart.
- Update quantity of the cart items.
- View the cart's content.
- Open a modal gallery carousel by clicking on the large product image and interact with it.
- Switch the large product image by clicking on the small thumbnail image.
- Interact with mobile gallery by tapping the arrow buttons or swiping right or left.
- View the optimal layout for the site depending on their device's screen size.
- See hover states for all interactive elements on the page.
In addition to this:
- The cart is stored within local storage, so it's fetched from there as soon as the page reloads.
- Users can swipe between slides on mobile devices - I used React Swipeable library to implement this feature.
As always, I'll be grateful for any feedback.
Thanks & Happy Coding! 🎃
Community feedback
@RafaelSS427
Posted
Hi Better5afe, I really enjoyed your work! I would like to share with you 2 possible improvements you could implement.
- It would be great to pause the animation of your image carousel when the user's cursor is over it.
- Every time the user changes image, you could reset the time it takes for the carousel to go to the next image, this will avoid abrupt jumps between images.
As you can see these are improvements related to the user experience. I hope my observations are helpful! :D
0
Marvellous Obatale• 520
@MARVELGARR
Posted
nice, only there is a small responsive error in mobile view... i need to go and update min cause i left out some features like hover and favicon
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