fikrcamp · abdule-yo · Dec 13, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +38,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,137 @@
+body {
+    margin: 0px;
+    padding: 0px;
+    box-sizing: border-box;
+}
+
+
+
+.container {
+    /* background: #f4a261; */
+    /* background-image: url(./images/bmi2.jpg); */
+    background-image: url(./images/bmi3.webp);
+    background-size: 100% 110%;
+    background-repeat: no-repeat;
+    background-position: bottom 30px center;
+    text-align: center;
+    padding-top: 14%;
+    height: 35vw;
+    width: 100%;
+
+}
+
+.child {
+    background-color: #354f52;
+    display: inline-block;
+    padding: 20px 100px;
+    border: 3px black solid;
+    border-radius: 30px;
+    background-image: url(./images/bmi100.png);
+    background-size: 230px 160px;
+    background-repeat: no-repeat;
+    background-position: bottom left -10px;
+
+
+}
+
+.header {
+    background-color: #457b9d;
+    display: inline-block;
+    padding: 0px 10px;
+    border: 2px solid black;
+    border-radius: 10px;
+    color: #f2f2f2;
+}
+
+.label-height {
+    font-size: 20px;
+    color: #f2f2f2;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
+}
+
+
+.label-height>input {
+    padding: 3px 25px;
+    text-align: center;
+    font-size: 15px;
+    border: 1px solid;
+    border-radius: 10px;
+    background-color: antiquewhite;
+    outline: 1px solid black;
+    margin-left: 5px;
+
+}
+
+.label-weight {
+    font-size: 20px;
+    color: #f2f2f2;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
+}
+
+.label-weight>input {
+    padding: 3px 25px;
+    text-align: center;
+    font-size: 15px;
+    border: 1px solid;
+    border-radius: 10px;
+    background-color: antiquewhite;
+    outline: 1px solid black;
+    margin-left: 5px;
+    margin-top: 10px;
+
+}
+
+/* .label-mass {
+    font-size: 20px;
+    color: #f2f2f2;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
+} */
+
+/* .label-mass>input {
+    padding: 3px 25px;
+    text-align: center;
+    font-size: 15px;
+    border: 1px solid;
+    border-radius: 10px;
+    background-color: antiquewhite;
+    outline: 1px solid black;
+    margin-left: 5px;
+    margin-top: 10px;
+} */
+
+.btn {
+    margin-top: 20px;
+    padding: 10px 14px;
+    border-radius: 15px;
+    border: 0.5px solid black;
+    cursor: pointer;
+}
+
+.btn>span {
+    font-size: 14px;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    font-style: italic;
+    font-weight: bolder;
+
+}
+
+
+.result {
+    color: white;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-size: 20px;
+    padding-top: 20px;
+}
+
+.result>span {
+    font-family: cursive;
+    color: #f4a261;
+    font-style: italic;
+}
+
+
+
+
+/* .inputs {
+    text
+} */
diff --git a/src/App.js b/src/App.js
@@ -1,9 +1,38 @@
 import "./App.css";
+import { BsFillArrowRightCircleFill } from "react-icons/bs";
+import { useState } from "react"
 
 function App() {
+  const [inputh, setInputh] = useState()
+  const [inputw, setinputw] = useState()
+  const [bmi, setBmi] = useState()
+
+  // function calculation
+  function calculate() {
+    let finalCal = inputw / (inputh * inputh)
+    setBmi(finalCal)
+
+  }
   return (
     <div>
-      <h1>Hello World</h1>
+      <div class="container">
+        <div class="child">
+          <h1 class="header"> Calculate Your BMI </h1>
+          <div class="inputs">
+            <label class="label-height">Enter Your height :-
+              <input type="number" placeholder="Enter Here" onChange={(e) => setInputh(e.target.value)} />
+            </label>
+            <br />
+            <label class="label-weight">Enter Your weight :-
+              <input type="number" placeholder="Enter Here" onChange={(e) => setinputw(e.target.value)} />
+            </label>
+            <br />
+            <button class="btn" onClick={calculate}><span>Calculate</span></button>
+
+            <h2 class="result">YOUR BMI IS : <span>{bmi}</span></h2>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

diff --git a/src/images/bmi.webp b/src/images/bmi.webp
diff --git a/src/images/bmi100.png b/src/images/bmi100.png
diff --git a/src/images/bmi2.jpg b/src/images/bmi2.jpg
diff --git a/src/images/bmi3.webp b/src/images/bmi3.webp
diff --git a/src/images/bmi4.jpeg b/src/images/bmi4.jpeg
diff --git a/src/images/bmi5.jpg b/src/images/bmi5.jpg
diff --git a/src/images/bmi6.jpg b/src/images/bmi6.jpg
diff --git a/src/images/bmi7.png b/src/images/bmi7.png
diff --git a/src/images/bmi8.jpg b/src/images/bmi8.jpg
diff --git a/src/images/bmi9.png b/src/images/bmi9.png