E-commerce product page with vanilla Javascript

Community feedback

• 

  P

  Karthik suryadevara•825

  @karthik2265Posted over 2 years ago

  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

  1

  ---

  

  samuel jacobs•330

  @Samuel-jacobsPosted over 2 years ago

  @karthik2265 Thank you very much for your feedback. I'll have a look at the aspect ratio suggestion. The header items looked pretty aligned at the time, I made a last minute change that might have upset it I'll also take a look at that. Your suggestion is great for the notification thing I think I'll start with that. I really appreciate your input Karthik. have a great day

  1