E-commerce Product Page

What are you most proud of, and what would you do differently next time?

Next time I would like to try structuring the JavaScript to be more "component-like", by creating objects or classes where each "component" manages its own state, DOM elements, and methods.

What challenges did you encounter, and how did you overcome them?

Building this e-commerce page involved two particularly engaging challenges: the lightbox image gallery and the shopping cart functionality.

For the lightbox gallery, the main challenge was creating a responsive experience. This was overcome by using JavaScript to detect screen size, enabling the full lightbox only on desktop. On mobile, a simpler touch-friendly image slider was implemented. Dynamically updating the main lightbox image and synchronizing it with active thumbnail states required careful DOM manipulation and event handling. Accessibility was also a key consideration, ensuring keyboard navigation and ARIA attributes were correctly implemented for the lightbox modal.

The shopping cart presented challenges in managing client-side state and dynamically reflecting changes in the UI. I addressed this by using a JavaScript object to store cart items and their quantities. Functions were developed to dynamically render cart items in the dropdown, update quantities, calculate totals, and handle item removal. Ensuring the cart icon badge accurately reflected the number of items and that the UI updated seamlessly after each cart operation (add, remove, quantity change) was a crucial part of the implementation.

What specific areas of your project would you like help with?

• Is the HTML structure clear, semantic, and well-organized? Are there any tags I could have used more appropriately for better semantics or accessibility?
• How effective is my use of ARIA attributes for accessibility in components like the sidebar, cart dropdown, and lightbox?
• How could I improve the state management for the shopping cart or the selected image index? Are there alternative approaches I could consider for a project of this scale?
• Are there any obvious performance considerations I might have overlooked, especially regarding image loading or DOM manipulation in JavaScript?