Merge pull request #247 from praptisharma28/bmicalci

BMI Calculator added
Kritika30032002 · Jan 30, 2024 · 9002585 · 9002585
2 parents 9b03a10 + 1159fa3
commit 9002585
Show file tree

Hide file tree

Showing 8 changed files with 315 additions and 1 deletion.
diff --git a/BMI_Calculator/.gitignore b/BMI_Calculator/.gitignore
@@ -0,0 +1,15 @@
+# Ignore node_modules directory
+node_modules/
+
+# Ignore build output
+build/
+
+# Ignore IDE and editor files
+.vscode/
+.idea/
+
+# Ignore environment-specific files
+.env
+
+# Ignore log files
+*.log
diff --git a/BMI_Calculator/README.md b/BMI_Calculator/README.md
@@ -0,0 +1,34 @@
+# BMI - Calculator
+
+## Tech Stack
+
+- React
+- JavaScript
+- HTML
+- CSS
+
+## How to Run the Code
+
+To run the code, follow these steps:
+
+1. Clone the repository.
+2. Navigate to the project directory.
+3. Install the dependencies by running the following command in your terminal:
+
+    ```bash
+    npm install
+    ```
+
+4. Start the development server by running the following command:
+
+    ```bash
+    npm start
+    ```
+
+5. Open your browser and visit `http://localhost:3000` to view the application.
+
+## Demo Video
+
+Check out the demo video below to see the BMI Calculator in action:
+
+[![BMI Calculator Demo](https://youtu.be/WEU9jhG0hSE?si=4_XtXizDHEUxOh85/0.jpg)](https://youtu.be/WEU9jhG0hSE?si=4_XtXizDHEUxOh85)
diff --git a/BMI_Calculator/package.json b/BMI_Calculator/package.json
@@ -0,0 +1,28 @@
+{
+    "name": "simple-bmi-calculatorreact",
+    "version": "1.0.0",
+    "description": "",
+    "keywords": [],
+    "main": "src/index.js",
+    "dependencies": {
+      "react": "17.0.2",
+      "react-dom": "17.0.2",
+      "react-scripts": "4.0.0"
+    },
+    "devDependencies": {
+      "@babel/runtime": "7.13.8",
+      "typescript": "4.1.3"
+    },
+    "scripts": {
+      "start": "react-scripts start",
+      "build": "react-scripts build",
+      "test": "react-scripts test --env=jsdom",
+      "eject": "react-scripts eject"
+    },
+    "browserslist": [
+      ">0.2%",
+      "not dead",
+      "not ie <= 11",
+      "not op_mini all"
+    ]
+  }
diff --git a/BMI_Calculator/public/index.html b/BMI_Calculator/public/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+</body>
+
+</html>
diff --git a/BMI_Calculator/src/App.jsx b/BMI_Calculator/src/App.jsx
@@ -0,0 +1,177 @@
+import React, { Component } from "react";
+import "./styles.css";
+// class App extends Component {
+//   constructor(props) {
+//     super(props);
+//     this.state = {
+//       fullName: '',
+//       weight: '',
+//       height: '',
+//       bmi: '',
+//       message: '',
+//       optimalWeight: ''
+//     };
+
+//     this.handleChange = this.handleChange.bind(this);
+//     this.calculateBMI = this.calculateBMI.bind(this);
+//     this.handleSubmit = this.handleSubmit.bind(this);
+//   }
+
+//   handleChange(e) {
+//     this.setState({ [e.target.name]: e.target.value });
+//   }
+
+//   calculateBMI() {
+//     let heightSquared = ((this.state.height / 100) * this.state.height) / 100;
+//     let bmi = this.state.weight / heightSquared;
+//     let low = Math.round(18.5 * heightSquared);
+//     let high = Math.round(24.99 * heightSquared);
+//     let message = '';
+//     if (bmi >= 18.5 && bmi <= 24.99) {
+//       message = 'You are in a healthy weight range';
+//     } else if (bmi >= 25 && bmi <= 29.9) {
+//       message = 'You are overweight';
+//     } else if (bmi >= 30) {
+//       message = 'You are obese';
+//     } else if (bmi < 18.5) {
+//       message = 'You are under weight';
+//     }
+
+//     this.setState({ message: message });
+//     this.setState({
+//       optimalWeight:
+//         'Your suggested weight range is between ' + low + ' - ' + high
+//     });
+//     this.setState({ bmi: Math.round(bmi * 100) / 100 });
+//   }
+
+//   handleSubmit(e) {
+//     this.calculateBMI();
+//     e.preventDefault();
+//     // console.log(this.state);
+//   }
+
+//   render() {
+//     return (
+//       <div className="App">
+//         <div className="App-header" />
+//         <form onSubmit={this.handleSubmit}>
+//           <h2>BMI calculator</h2>
+//           <div>
+//             <label>Please enter your name</label>
+//             <input
+//               autoComplete="off"
+//               type="text"
+//               name="fullName"
+//               value={this.state.fullName}
+//               onChange={this.handleChange}
+//             />
+//           </div>
+//           <div>
+//             <label>Enter your height in cm</label>
+//             <input
+//               type="number"
+//               name="height"
+//               value={this.state.height}
+//               onChange={this.handleChange}
+//             />
+//           </div>
+
+//           <div>
+//             <label>Enter your weight in kg</label>
+//             <input
+//               type="number"
+//               name="weight"
+//               value={this.state.weight}
+//               onChange={this.handleChange}
+//             />
+//             <br />
+//           </div>
+//           <div>
+//             {/* <input type="submit" value="Submit" /> */}
+//             <button type="submit">submit</button>
+//             <h3> {this.state.message} </h3>
+//             <h3> {this.state.bmi} </h3>
+//           </div>
+//         </form>
+//       </div>
+//     );
+//   }
+// }
+
+// export default App;
+
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      height: "",
+      weight: "",
+      bmi: "",
+      msg: ""
+    };
+
+    // this.handleChange = this.handleChange.bind(this);
+    // this.handleSubmit = this.handleSubmit.bind(this);
+    // this.calculateBMI = this.calculateBMI.bind(this);
+  }
+
+  handleChange = (e) => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+
+  calculateBMI = () => {
+    let heightSq = (this.state.height / 100) * (this.state.height / 100);
+    let bmi = this.state.weight / heightSq;
+    let msg = "";
+    if (bmi < 18.5) {
+      msg = "under Weight";
+    } else if (bmi >= 18.5 && bmi <= 24.9) {
+      msg = "Normal Weight";
+    } else if (bmi >= 25 && bmi <= 29.9) {
+      msg = "Over Weight";
+    } else if (bmi >= 30) {
+      msg = "Obesity";
+    }
+    this.setState({ msg: msg });
+    this.setState({ bmi: Math.round(bmi * 100) / 100 });
+  };
+
+  handleSubmit = (e) => {
+    this.calculateBMI();
+    e.preventDefault();
+  };
+
+  render() {
+    return (
+      <div className="App">
+        <form onSubmit={this.handleSubmit}>
+          <h2> BMI calculator </h2>
+          <div>
+            <label>Height(cm)</label>
+            <input
+              type="number"
+              value={this.state.height}
+              name="height"
+              onChange={this.handleChange}
+            />
+          </div>
+
+          <div>
+            <label>Weight</label>
+            <input
+              type="number"
+              value={this.state.weight}
+              name="weight"
+              onChange={this.handleChange}
+            />
+          </div>
+          <button type="submit">Submit</button>
+          <h2> {this.state.bmi} </h2>
+          <h2> {this.state.msg} </h2>
+        </form>
+      </div>
+    );
+  }
+}
+export default App;
diff --git a/BMI_Calculator/src/index.jsx b/BMI_Calculator/src/index.jsx
@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+  rootElement
+);
diff --git a/BMI_Calculator/src/styles.css b/BMI_Calculator/src/styles.css
@@ -0,0 +1,28 @@
+.App {
+    display: flex;
+    justify-content: center;
+    border-radius: 5px;
+    background-color: lightcoral;
+    padding: 20px;
+    border: 1px solid cadetblue;
+    border-radius: 100px;
+  }
+
+  input {
+    width: 100%;
+    padding: 5px;
+    margin: 8px 0;
+    box-sizing: border-box;
+  }
+
+  button {
+    width: 100%;
+    padding: 5px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    background-color: lightslategray;
+  }
+  button:hover {
+    background-color: lightsteelblue;
+  }
+
diff --git a/package-lock.json b/package-lock.json