Responsive E-Commerce Product Page with SASS, BEM and EDA

This time, I took a further step in implementing the EDA pattern and switched to a modular structure. This approach helps encapsulate elements that should remain hidden from the outside, making development and refactoring more efficient. The solution is close to what it should be, though I’m aware of several improvements and adjustments that need to be made. I plan to refine it further next time—or perhaps refactor the project entirely and implement it using Vue, as I'm currently refreshing my knowledge of the framework.

First of all, managing the styling of the dialog was quite challenging, and I’m still struggling a bit with this component. Creating a custom backdrop and getting it to work properly was particularly tricky. Additionally, accessibility remains an area for improvement in this solution, as I couldn’t manage tabulation perfectly to ensure users can navigate solely with the Tab key. Getting all the logic to function cohesively was another challenge, but after implementing it with modules—returning objects with methods and fields separated by closures—it became somewhat easier to get everything working.