Tip calculator app using HTML, CSS and Javascript

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

💡 Proud of:

• I wrote clean, reusable, and well-structured JavaScript by implementing DRY (Don't Repeat Yourself) principles and using pure functions.
• Improved accessibility by using semantic HTML and ensuring error messages are properly displayed.
• Made the UI responsive and WCAG-compliant, ensuring it works well on mobile and desktop devices.

🔄 Next time, I would:

• Consider using a state management approach (e.g., an object to track all input values) for better scalability.
• Implement unit tests to ensure calculation functions work correctly in all cases.
• Explore CSS animations to enhance user experience when showing/hiding error messages.

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

❌ Challenges:

• Handling cases where people input is 0 (which causes division errors).
• Ensuring reset button is disabled when there’s no valid input.
• Positioning and styling SVG icons inside inputs for better UI/UX.

✅ How I solved them:

• Created a validation function (validatePeopleInput()) that prevents calculations if the input is invalid.
• Centralized logic for enabling/disabling the reset button.
• Used CSS flexbox & absolute positioning to properly align icons inside input fields.

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

🔍 Possible improvements/questions:

• Is there a more efficient way to handle state updates? (e.g., using an object instead of multiple variables)
• Would it be beneficial to add local storage to remember user preferences (e.g., last tip percentage used)?
• How could we further optimize accessibility to ensure screen readers interpret the form elements correctly?

Would love any feedback on how to further refine and optimize the project! 🚀