Fully Responsive Tip Calculator Using Vanilla JS & SCSS

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

Most proud of: I'm proud of implementing a clean, responsive layout and dynamic tip calculations with clear user feedback for errors (like zero people input).

Next time: I would improve accessibility by adding ARIA labels and enhance form validation for a more robust user experience.

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

Challenge: One key challenge was handling real-time input validation, especially when users entered zero for the number of people, which could cause calculation errors.

Solution: I implemented conditional checks and user feedback, displaying an error message and styling the input field red to alert users, ensuring the app remains user-friendly and error-free.

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

I'd appreciate feedback on the following areas:

1. Error Handling Logic – Is there a cleaner or more efficient way to handle input validation, especially for zero or invalid values?
2. SCSS Structure – Are there improvements I can make to make the SCSS more modular or DRY?
3. Accessibility – What ARIA roles or enhancements would make the UI more accessible?
4. JavaScript Readability – Is the current structure of the DOMContentLoaded function and event handling clear and maintainable?
5. Responsive Layout – Are there any improvements for better responsiveness on very small or very large screens?

Your suggestions on any of these areas would be very valuable!