Tip Calculator App HTML/CSS/JS

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

I'm most proud of the accessibility improvements I made throughout the project. Starting with basic HTML and progressively enhancing it with proper ARIA attributes, focus management, and error handling created a calculator that's usable for everyone. The clean implementation of form validation with visual feedback is another highlight.

I'm also particularly proud of the error handling system that provides clear feedback without being intrusive, and the robust event handling that maintains consistent state across different user interactions.

Next time, I would plan my HTML structure with accessibility in mind from the start rather than refactoring later.

Additionally, I would implement a more modular JavaScript structure, potentially using small utility functions or even a simple state management pattern. Breaking the calculation logic into smaller, more testable functions would improve maintenance.

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

The biggest challenges were:

1. Styling form inputs while maintaining accessibility: Creating custom styles for number inputs while keeping them fully accessible required several iterations.
2. Focus states for compound elements: Getting the focus outline to wrap around both the icon and input field took experimentation with various CSS properties.
3. Custom validation: Balancing HTML5 validation with custom JavaScript validation for better user experience was complex.
4. Browser persistence issues: Handling the unexpected persistence of form state after page reload required understanding browser behavior and implementing explicit reset logic.
5. Input validation timing: Determining when to validate inputs (on input vs. on change) to provide a smooth user experience without premature error messages.

I overcame these by breaking problems down into smaller pieces, researching specific solutions, and iteratively improving the implementation based on feedback. The page refresh issue in particular taught me the importance of explicitly controlling state initialization rather than relying on browser defaults.

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

• Testing strategy: Implementing unit tests for calculation functions to verify accuracy with edge cases like zero values and decimal precision

• State management: Refactoring to a more structured approach using a central state object or module pattern instead of separate variables

• Input validation: Enhancing error handling with more descriptive user feedback for different error conditions

• Accessibility verification: Testing with actual screen readers to ensure ARIA implementations and dynamic updates work correctly

• Browser compatibility: Ensuring consistent form behavior across different browsers, especially regarding form state persistence