completed bmi-react

src/App.css

@@ -0,0 +1,66 @@
+*{
+    margin:0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.main{
+    height: 100vh;
+    background-color: black;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.container{
+    height: 500px;
+    width: 500px;
+    box-shadow: 0px 0px 15px rgb(242, 215, 10);
+    border-radius: 50px;
+    text-align: center;
+
+}
+h1{
+    margin-top: 10px;
+}
+.inp{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+input{
+    margin-top: 20px;
+    height: 50px;
+    width: 200px;
+    text-align: center;
+    border-radius: 10px;
+    border: 2px solid gold;
+}
+p{
+    margin-top: 15px;
+    color: white;
+    text-align: center;
+
+}
+button{
+margin-top: 20px;
+height: 50px;
+width: 200px;
+text-align: center;
+border-radius: 10px;
+border: 2px solid gold;
+}
+.ans{
+    margin-top: 20px;
+        height: 40px;
+        width: 130px;
+        text-align: center;
+        border-radius: 10px;
+        border: 2px solid gold;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.25rem;
+}

src/App.js

@@ -1,9 +1,35 @@
 import "./App.css";
+import {useState} from 'react'
 
 function App() {
+  const [weight,setWeight] = useState(0);
+   const [height,setHeight] = useState(0);
+    const [name,setName] = useState('');
+   const [bmi,setBMI] = useState(0);
+
+function calc(){
+
+  setBMI(Math.round(weight/(height*height)));
+
+}
+
   return (
-    <div>
-      <h1>Hello World</h1>
+    <div className='main'>
+    <div className="container">
+      <h1>BMI Calculator</h1>
+     <div className="inp"> <input type='text'   onChange={(e)=>{
+       setName(e.target.value);}} placeholder="Enter your Name"/>
+     <input type='text'  className="weight" onChange={(e)=>{
+       setWeight(+e.target.value);
+     }}    placeholder="Enter your Weight"/>
+      <input type='text' className="height"  onChange={(e)=>{
+       setHeight(+e.target.value);}} placeholder="Enter your Height"/>
+       <button onClick={calc}>Calculate Your BMI</button>
+       <p>your Name is {name}, your weight is {weight}kg, your height is {height}m</p>
+      <p>and Your BMI is</p>
+      <div className="ans">{bmi}</div>
+      </div>
+    </div>
     </div>
   );
 }