Scribd
Upload
29 views5 pages

Bmi Calculator

The document outlines the creation of a cross-platform BMI calculator application using React Native. It includes an algorithm for calculating BMI based on user input for weight and height, along with a React component structure for the app. The program successfully executes the BMI calculation and displays the result along with a corresponding message about the user's weight category.

Uploaded by

punitha20053
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views5 pages

Bmi Calculator

The document outlines the creation of a cross-platform BMI calculator application using React Native. It includes an algorithm for calculating BMI based on user input for weight and height, along with a React component structure for the app. The program successfully executes the BMI calculation and displays the result along with a corresponding message about the user's weight category.

Uploaded by

punitha20053
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

EXP NO:01

BMI CALCULATOR
DATE:

AIM:
To Using react native, build a cross platform application for a BMI calculator.

ALGORITHM:
Step 1: Start
Step 2: Initialize state variables for weight, height, BMI, and message.
Step 3: Create a function to calculate BMI when the button is clicked.
Step 4: Check if both weight and height are entered. If not, display a message to enter both
values.
Step 5: Convert height to meters and calculate BMI using the formula: BMI = weight / (height *
height).
Step 6: Set the BMI value and display a message based on the BMI category.
Step 7: Stop the program.

PROGRAM:
APP.JS
import React, { useState } from "react";
import "./App.css";
function App() {
const [weight, setWeight] = useState("");
const [height, setHeight] = useState("");
const [bmi, setBmi] = useState(null);
const [message, setMessage] = useState("");
const calculateBMI = () => {
if (!weight || !height) {
setMessage("Please enter both weight and height.");
return;
}
const heightInMeters = height / 100;
const bmiResult = weight / (heightInMeters *
heightInMeters);setBmi(bmiResult.toFixed(2));

if (bmiResult < 18.5) {


setMessage("You are underweight.");
} else if (bmiResult >= 18.5 && bmiResult < 24.9) {
setMessage("You have a normal weight.");
} else if (bmiResult >= 25 && bmiResult < 29.9) {
setMessage("You are overweight.");
} else {
setMessage("You are obese.");
}
};

return (
<div className="App">
<h1>BMI Calculator</h1>
<div className="input-container">
<label>Weight (kg):</label>
<input
type="number"
value={weight}
onChange={(e) => setWeight(e.target.value)}
placeholder="Enter your weight"
/>
</div>
<div className="input-container">
<label>Height (cm):</label>
<input
type="number"
value={height}
onChange={(e) => setHeight(e.target.value)}
placeholder="Enter your height"
/>
</div>
<button onClick={calculateBMI}>Calculate BMI</button>
{bmi && (
<div className="result">
<h2>Your BMI: {bmi}</h2>
<p>{message}</p>
</div>
)}
</div>
);
}

export default App;


APP.CSS
.App {
text-align: center;
font-family: Arial, sans-serif;
margin-top: 50px;
}
h1 {
color: #333;
}
.input-container {
margin: 10px;
}
input {
padding: 8px;
margin-top: 5px;
width: 200px;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
margin-top: 20px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 30px;
font-size: 18px;
}
label {
font-size: 16px;
}
OUTPUT:
Commands:
Change folder name>>cd my-app
Run command>>npm start
RESULT:
Thus, the using react native, build a cross platform application for a BMI calculator was executed
successfully.

You might also like