Responsive Tip Calculator built with SASS/BEM and Vanilla JS + Vite

Solution retrospective
I made the app as close to the design as possible and also added some other nitty features such as showing validation checks and tips for the user.
What challenges did you encounter, and how did you overcome them?I encountered different layout challenges since it was hard to style radio buttons in the form according to grid layout as well as catch their input in the form. Also I wanted to reuse components as much as possible so had to think about how well can I reuse different fields having same styles. I also had problems rendering the correct error on the field that the user was typing in since to make it maintainable I had to create a utility function that would render that message.
What specific areas of your project would you like help with?I wanted to modularize my code in the js into different files but on doing that my styles wouldn't apply and I had no idea what was going on. Since I was using vite, I thought that it had to do something with this. So how do i use different files as js modules and import them in a single file and then initialize it with vite. Do i have to change some config settings? It would be really helpful if you can provide me that solution! Thanks
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Adesh Katiya's solution.
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