Steps to Build the BMI Calculator Application

// BmiCalculator.js
import React, { useState } from 'react';
import './BmiCalculator.css';  // Import CSS for styling

function BmiCalculator() {
  // State variables for inputs and results
  const [weight, setWeight] = useState('');
  const [height, setHeight] = useState('');
  const [bmi, setBmi] = useState(null);
  const [status, setStatus] = useState('');

  // Event handler to calculate BMI when button is clicked
  const calculateBMI = () => {
    // Simple validation: ensure weight and height are provided
    if (!weight || !height) {
      alert('Please enter both weight and height!');
      return;
    }
    // Calculate BMI = weight (kg) / [height (m)]^2
    const heightInMeters = parseFloat(height) / 100;  // convert cm to m
    const bmiValue = (parseFloat(weight) / (heightInMeters * heightInMeters)).toFixed(2);
    setBmi(bmiValue);

    // Determine BMI category based on standard ranges
    let bmiStatus = '';
    if (bmiValue < 18.5) {
      bmiStatus = 'Underweight';
    } else if (bmiValue < 25) {
      bmiStatus = 'Normal weight';
    } else if (bmiValue < 30) {
      bmiStatus = 'Overweight';
    } else {
      bmiStatus = 'Obese';
    }
    setStatus(bmiStatus);
  };

  return (
    <div className="container">
      <h1>BMI Calculator</h1>
      <div className="input-group">
        <label>Weight (kg): 
          <input 
            type="number" 
            value={weight}
            onChange={(e) => setWeight(e.target.value)}
            placeholder="Enter weight in kg" 
          />
        </label>
      </div>
      <div className="input-group">
        <label>Height (cm): 
          <input 
            type="number" 
            value={height}
            onChange={(e) => setHeight(e.target.value)}
            placeholder="Enter height in cm" 
          />
        </label>
      </div>
      <button onClick={calculateBMI}>Calculate BMI</button>

      {/* Display the result only when BMI is calculated */}
      {bmi && (
        <div className="result">
          <h3>Your BMI: {bmi}</h3>
          <h3>Status: {status}</h3>
        </div>
      )}
    </div>
  );
}

export default BmiCalculator;

/* BmiCalculator.css */
.container {
max-width: 500px;
margin: 2rem auto;
padding: 20px;
background-color: #f0f0f0;
border-radius: 8px;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 1rem;
}
.input-group {
margin: 10px 0;
text-align: left;
}
.input-group label {
font-size: 16px;
color: #555;
}
.input-group input {
display: block;
width: 100%;
padding: 8px;
margin-top: 5px;
font-size: 15px;
box-sizing: border-box;
}
button {
padding: 10px 20px;
margin-top: 15px;
font-size: 16px;
cursor: pointer;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
font-weight: bold;
color: #333;
}

// App.js
import React from 'react';
import BmiCalculator from './BmiCalculator';
function App() {
return (
<div className="App">
<BmiCalculator />
</div>
);
}
export default App;