Skip to content

Conversation

@ayushiu
Copy link

@ayushiu ayushiu commented Oct 6, 2024

Title: Update BMI Calculator Functionality and Styling

Summary:
This PR enhances the existing BMI calculator by updating the JavaScript functionality, refining the HTML structure, and applying new CSS styles to improve the user experience and interface.

Changes Made:

  1. HTML Structure:**
    • Modified the HTML code for the BMI section to include specific input fields for:
    • Gender: Dropdown selection for male and female.
    • Age Group: Dropdown selection with age categories (child, teen, adult, senior).
    • Height: Input field for height in centimeters.
    • Weight: Input field for weight in kilograms.
    • Ensured that all inputs are required for a successful calculation.

2 CSS Styling:

  • Applied new styles for the form, making it user-friendly and visually appealing.
  • Enhanced the overall design of the BMI calculator section to align with modern UI/UX standards.
  1. JavaScript Enhancements:
    • Implemented comprehensive validation checks for the inputs to ensure all fields are filled before calculation.
    • Updated BMI calculation logic to categorize results based on age groups (child, teen, adult, senior) and gender.
    • Improved the readability of the result by displaying BMI and its corresponding category clearly.

Impact:
These updates provide a more interactive and informative BMI calculator, catering to a wider audience by incorporating demographic-specific calculations. The improved styling enhances usability, making it easier for users to input their data and receive results.

BMI before
bmi before
BMI after
bmi after

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant