bmi calculator in react js

How to build a BMI calculator in react js (react js project for beginners)

by
React js Project demo (what we are going to build)
Live Demo

Hi, welcome here in this tutorial we are going to develop a BMI calculator in React Js, The prerequisites for this project are as follows:

  • Node.js should be installed in your system
  • Create a brand new ReactJs project. Just copy the code below:
npx create-react-app my-app
JavaScript

The brand-new project should look like this:

Here is your App.js file, copy the code below and paste it into App.js.

import logo from './logo.svg';
import './App.css';
import Clock from './Projects/Clock';
import BmiCalculator from './Projects/BmiCalculator';

function App() {
  return (
    <>
      <div className='main-wrapper'>
        {/* <Clock /> */}
        <BmiCalculator />
      </div>
    </>
  );
}

export default App;
JavaScript

Here is your code for the app.css file:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
 
.container {
  box-shadow: 0px 0px 50px 10px rgba(255, 0, 0, 0.2);
  border-radius: 8px;
  padding: 3rem;
  background-color: rgb(0, 0, 0);
}
 
.bmi-input {
  width: 100%;
  font-size: 1.2rem;
  padding: 5px 4px;
  margin: 8px 0;
  border-radius: 5px;
  border: 3px solid;
}
 
.btn {
  width: 45%;
  font-size: 1.2rem;
  margin: 10px 0;
  padding: 10px 0;
  background-color: #000000;
  color: #4794e0;
  border: none;
  outline: 3px solid #4794e0;
  border-radius: 8px;
  cursor: pointer;
  justify-content: space-between;
}
 
.btn-reload {
  color: rgb(221, 47, 47);
  margin-left: 33px;
  outline: 3px solid rgb(221, 47, 47);
}
 
.center {
  text-align: center;
  margin: 24px 0;
}
 
.p-msg{
  margin: 10px 0;
}
 
.img-container {
  text-align: center;
}
 
.img-container img {
  height: 200px;
}
CSS

After creating a reactjs project, make a component ‘BmiCalculator.js’ and copy the code below and past it to ‘BmiCalculator.js’:

The code for the BmiCalculator.js is as follows:

import React, { useState } from 'react'

const BmiCalculator = () => {

    const [weight, setweight] = useState()
    const [height, setheight] = useState()
    const [bmi, setbmi] = useState('')
    const [msg, setmsg] = useState('')

    let calcBmi = (e) => {
        e.preventDefault()


        if (weight === 0 || height === 0) {
            setmsg("Please enter a valid number")
        } else {
            let formula = (weight / (height * height) * 703)
            setbmi(formula.toFixed(1))

            if(formula < 25){
                setmsg('You are underweight')
            } else if (formula >= 25 && formula < 30){
            setmsg('You are healthy weight')
            } else {
                setmsg('You are overweight')
            }
        }

    }

    let reload = () => {
        window.location.reload()
    }

    return (
        <>
            <div className='app'>
                <div className='container'>
                    <h2 className='center'>React Js - BMI Calculator</h2>

                    <form onSubmit={calcBmi}>

                        <div>
                            <label>Enter Weight (lbs)</label>
                            <input className='bmi-input' type="number" placeholder='1' value={weight} onChange={(e) => setweight(e.target.value)} />
                        </div>

                        <div>
                            <label>Enter Height (in)</label>
                            <input className='bmi-input' type="number" placeholder='1' value={height} onChange={(e) => setheight(e.target.value)} />
                        </div>

                        <div>
                            <button className='btn' type='submit'>Submit</button>
                            <button className='btn btn-reload' type='submit' onClick={reload}>Reload</button>
                        </div>
                    </form>

                    <div>
                        <h3>Your bmi is: {bmi}</h3>
                        <p className='p-msg'>{msg}</p>
                    </div>

                </div>
            </div>
        </>
    )
}

export default BmiCalculator
JavaScript

After writing the code into the editor you can run the command below:

npm run start
JavaScript
Download the Code
Here is the complete BMI calculator tutorial in reactjs.