Body Mass Index (BMI) calculator using React.js

By Ashutosh Anand

A simple Body Mass Index (BMI) calculator made using React.js and basic css.It can be used to know about your BMI and you can work on your body based on the results.

Firstly import the necessary dependencies,CSS file and the useState hook from React.

The App component is defined, which represents the main application.

Inside the component, it initializes several pieces of state using the useState hook:

• weight: Stores the weight input.

• height: Stores the height input.

• bmi: Stores the calculated BMI value.

• message: Stores a message based on the BMI calculation result.

There's a bmicalculate function that is called when the form is submitted. This function:

• Prevents the default form submission behavior.
• Checks if the height or weight inputs are zero and shows an alert if they are, asking the user to enter valid values.
• If valid values are provided, it calculates the BMI using the formula (weight / (height * height)) * 703 and stores the result in the bmi state.
• Based on the BMI value, it sets a message in the message state to categorize the user as underweight, a healthy weight, or overweight.

The JSX structure of the application is defined in the return section:

• It includes a heading "BMI CALCULATOR" which depicts the name of the app.
• A form with input fields for weight and height and a submit button.
• Below the form, it displays the calculated BMI value and a message based on the BMI category.

The input fields for weight and height are controlled components, meaning their values are controlled by the state variables weight and height, and their values change as the user inputs data.

When the form is submitted, the bmicalculate function is called, which calculates the BMI and updates the UI with the result and message.

 

                                       CODE:

import './App.css'

import {useState} from 'react'
function App() {

  const[weight,setweight]=useState()
  const[height,setheight]=useState()
  const[bmi,setbmi]=useState('')
  const[message,setmessage]=useState('')

  let bmicalculate =(e)=>{
    e.preventDefault();
    if(height ==0 || weight==0)
    {
      alert('Please enter a valid value!!!')
    }
    else
    {
      let bmi =(weight/(height*height))*703;
      setbmi(bmi.toFixed(1));

      if (bmi < 25) {
        setmessage('You are underweight ???? ')
      } else if (bmi >= 25 && bmi < 30) {
        setmessage('You are a healthy weight  ???? ')
      } else {
        setmessage('You are overweight ???? ')
      }
    }
  }
  return (

  );
}

export default App;

 

                                                                   CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
.container-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #b75f5f;
}
 
.container {
  box-shadow: 0px 0px 20px #ccc;
  border-radius: 8px;
  padding: 3rem;
}
 
input {
  width: 100%;
  font-size: 1.2rem;
  padding: 15px 4px;
  margin: 8px 0;
  border-radius: 8px;
}
 
.btn {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  margin: 8px 0;
  padding: 15px 0;
  background-color: #0077EE;
  color: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  cursor: pointer;
}
/* unvisited link */
 
.btn-outline {
  background-color: #fff;
  color: #A6BCDA;
  border: none;
}
 
.center {
  text-align: center;
  margin: 24px 0;
  color: #fafafa;
}
 
p {
  margin: 10px 0;
}
 
.img-container {
  text-align: center;
}
 
.img-container img {
  height: 200px;
}

 

https://coderspacket.com/uploads/user_files/2023-09/Screenshot_(28)-1695220430-2258.png

https://coderspacket.com/uploads/user_files/2023-09/Screenshot_(29)_(1)-1695220355-2258.png

https://coderspacket.com/uploads/user_files/2023-09/Screenshot_(31)-1695220321-2258.png

https://coderspacket.com/uploads/user_files/2023-09/Screenshot_(30)-1695220276-2258.png