diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..85ccdd2
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react"]
+ }
+
\ No newline at end of file
diff --git a/App.jsx b/App.jsx
index 1aa6ae9..a2b3645 100644
--- a/App.jsx
+++ b/App.jsx
@@ -1,11 +1,66 @@
-import React from 'react';
+import React, { useState } from 'react';
+import "./design.css"
-class App extends React.Component {
- render() {
- return (
- simon, helloworld!!!
- );
+const App = () => {
+ const [height, setHeight] = useState('');
+ const [weight, setWeight] = useState('');
+ const [bmi, setBMI] = useState('');
+ const [message, setMessage] = useState('');
+ const [error, setError] = useState('');
+
+ const handleHeightChange = event => {
+ setHeight(event.target.value);
+ setError('');
+ setMessage('');
+ }
+
+ const handleWeightChange = event => {
+ setWeight(event.target.value);
+ setError('');
+ setMessage('');
+ }
+
+ const handleCalculateBMI = () => {
+ if (height <= 0 || weight <= 0) {
+ setError('Please enter valid values for height and weight.');
+ setBMI('');
+ return;
+ }
+
+ const bmi = calculateBMI(height, weight);
+ setBMI(bmi);
+
+ if (bmi < 18.5) {
+ setMessage('You are underweight.');
+ } else if (bmi >= 18.5 && bmi <= 24.9) {
+ setMessage('You have a healthy weight.');
+ } else if (bmi >= 25 && bmi <= 29.9) {
+ setMessage('You are overweight.');
+ } else {
+ setMessage('You are obese.');
+ }
}
+
+ const calculateBMI = (height, weight) => {
+ const heightInMeters = height / 100;
+ const bmi = weight / (heightInMeters * heightInMeters);
+ return bmi.toFixed(2);
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ {error &&
{error}
}
+ {message &&
{message}
}
+ {bmi &&
Your BMI is {bmi}
}
+