E-commerce product page with vanilla Javascript
Solution retrospective
Hello, fellow devs. I decided I'd spent too much time on this project so I opted to submit it first. There's a feature I'm yet to add. It's the notification on the cart icon when an item is added. I have a few ideas about handling it already but suggestions would be appreciated. Also, any feedback at all would be appreciated. happy coding. Cheers.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@karthik2265
Hey samuel 🙋♂️
Looks great, the responsiveness is good.
The HTML and JS are well-structured.
One thing I have noticed is that the images are not preserving their ratio when the size of the screen changes. An option to preserve aspect ratio is to use the image as background image for a div and adjust it to the middle. Take a loot at this for info: https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio
And another little issue is that the items in the header are not aligned, they are off by a little. Adding this should solve the issue. .topnav { align-items: center; }
Overall well done.
About the feature you are yet to add, I guess you might have already thought of this, you can add a click event listener for the add to cart button and do some styling to show notification on the cart, like setting the display of number element which shows the no of items in the cart to "block" and then after a few seconds (using setTimeout) turn it back to its original display "none", like a blink like thing. You can try animations for this as well using CSS.
Thank You 😀
Marked as helpful
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