E-commerce product page

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

I'm most proud of how I structured and organized my HTML and JavaScript to ensure both accessibility and responsiveness across devices. The custom-built lightbox and interactive cart logic challenged me, and completing them without any external libraries felt very rewarding.

Next time, I would approach the JavaScript logic with better modularity in mind—breaking functions into smaller, reusable parts. I would also incorporate more testing for edge cases, especially when handling user interactions like rapid clicks or invalid states in the cart.

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

One major challenge I encountered was managing the cart state and ensuring it updated accurately when users added, removed, or toggled items. Initially, my logic didn’t handle multiple item additions correctly, and removing items would sometimes break the layout.

To overcome this, I broke the problem down into smaller parts—first isolating the logic that adds items, then the one that updates the display, and finally the one that handles removal. I also used console.log() frequently to debug state changes and DOM updates, which helped me trace the issues step by step.

Another challenge was building the lightbox gallery to open and close correctly while syncing thumbnail selections. I carefully studied how event delegation and class toggling work and used that knowledge to fix issues with overlay closing and image swapping.

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

I would appreciate feedback on the following areas:

• Accessibility best practices: I’ve added basic aria-labels and ensured keyboard navigability, but I’m not entirely confident everything is as accessible as it could be. I'd love advice on how to improve this, especially regarding the lightbox gallery and cart modal.

• JavaScript optimization: Are there parts of my JavaScript that could be simplified or written in a more efficient way, especially regarding event delegation or state management for the cart and lightbox?

• Responsive design refinements: The layout works on mobile and desktop, but I'm not sure if I’ve used the most scalable or maintainable approach for responsiveness. I’d appreciate insights into how I could make it more robust or efficient using modern CSS techniques.

• CSS structuring: I'm currently using utility classes and custom properties. Any tips on better organizing my CSS or making it more reusable would be helpful.