Body Mass Index calculator

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

Proud of:

• Using semantic HTML and following accessibility best practices in structuring the page​index.
• Implementing a clean, component-based architecture with AlpineJS Web Components​main, keeping the BMI Calculator modular and reusable ​bmi-calculator.
• Keeping the CSS efficient and organized using Sass and leveraging Vite with PurgeCSS for optimized performance​

What I’d do differently:

• Add client-side validation with visual feedback for invalid inputs.
• Improve state management and reactivity by using Alpine’s $store API instead of manual reactivity handling.

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

• Preventing the browser’s autofill styles from interfering with the input fields of the​ bmi calculator.

• Handling unit conversions without causing extra re-renders.

• Ensuring only used styles are included in production builds. For this I used Vite with PurgeCSS to remove unused CSS.

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

• Improving input validation: Would love feedback on better ways to validate height and weight inputs (e.g., handling extreme values gracefully).

• Optimizing the component structure: Open to suggestions on making the BMI calculator more reusable in other projects.

• Adding unit tests: Since there's only one standalone web component, is there an efficient way to test it without a full JS framework?