tip-calculator HTML-CSS-Javascript-ES Modules

Solution retrospective
Semantic html it's very important and it does make a differents for user experience, can be improved.
What challenges did you encounter, and how did you overcome them?I didn't find any big challanges
What specific areas of your project would you like help with?class names in html, I always feel I can improve on
Please log in to post a comment
Log in with GitHubCommunity feedback
- @thisisharsh7
Great job on implementing the Tip Calculator! The structure is clear, the layout is responsive, and the use of semantic HTML is well-applied.
✅ What’s working well:
- Use of CSS variables (
:root
) makes theming and maintenance easy. - Your
bill-container::before
andpeople-container::before
for icon placement is a nice touch!
🔧 Suggestions:
- Class Naming: While class names like
bill-input
andnum-people
are descriptive, consider using BEM (Block Element Modifier) naming convention for scalability and readability (e.g.,calculator__input--bill
). - Component Structure: The
display
section could benefit from a separate component or wrapper to make it more modular. - HTML Structure: Move the
<span class="bill-error-msg">
below the.bill-container
for better DOM flow and potential accessibility improvements. - Reset Button: Consider enabling the reset button only when there's a change in input for a better user experience.
Overall, this is a clean implementation with good responsiveness and style. Keep coding! 🚀
- Use of CSS variables (
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