diff --git a/public/index.html b/public/index.html index aa069f2..4fc8859 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ 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`. --> - React App + Bmi calculator @@ -40,4 +40,4 @@ To create a production bundle, use `npm run build` or `yarn build`. --> - + \ No newline at end of file diff --git a/src/App.css b/src/App.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 93624ea..0000000 --- a/src/App.js +++ /dev/null @@ -1,11 +0,0 @@ -import "./App.css"; - -function App() { - return ( -
-

Hello World

-
- ); -} - -export default App; diff --git a/src/Bmi.css b/src/Bmi.css new file mode 100644 index 0000000..007ef98 --- /dev/null +++ b/src/Bmi.css @@ -0,0 +1,86 @@ +*{ + /* background-color: rgb(245, 141, 207); */ + background-image: url(/src/bgc2.jpg); + background-repeat: none; + background-position: center; + background-size: cover; + padding: 0; + margin: 0; + font-family: Verdana; +} + +.header{ + background-color: rgb(125, 189, 254); + height: 350px; + width: 400px; + margin: 40px auto; + display: flex; + flex-direction: column; + border-radius: 20px ; + justify-content: stretch; + background-image: none; +} +.header-tittle{ + column-rule-color: blue; + background-color: rgb(125, 189, 254); + margin: 0 auto; + padding: 30px 10px; + background-image: none; + +} +.header-bmi{ + display: flex; + flex-direction: column ; + background-color: rgb(125, 189, 254); + background-image: none; + +} +.header-bmi-label{ + background-color: rgb(125, 189, 254); + margin: 0 auto; + background-image: none; + font-weight: 500; +} +.header-bmi-input{ + background-color: rgb(125, 189, 254); + margin: 0 auto; + margin-bottom: 10px; + height: 25px; + width: 100px; + border-top: none; + border-left: none; + border-right: none; + background-image: none; + padding-left: 50px; +} +.header-bmi-input:focus{ + outline: none; +} +.header-bmi-btn{ + background-color: rgb(125, 189, 254); + margin: 0 auto; + margin-bottom: 20px; + margin-top: 20px; + height: 35px; + width: 100px; + border-radius: 20px; + background-color:rgb(239, 23, 160) ; + background-image: none; + color:white; + border: rgb(209, 177, 177) solid 2px; + font-family: Verdana; +} +.header-result{ + background-color: rgb(125, 189, 254); + margin: 0 auto; + background-image: none; + margin-top: 10px; + font-size: larger; + font-weight: lighter; +} +.header-result-value{ + + font-weight: 700; + background-image: none; + background-color: rgb(125, 189, 254); +} \ No newline at end of file diff --git a/src/Bmi.js b/src/Bmi.js new file mode 100644 index 0000000..f836266 --- /dev/null +++ b/src/Bmi.js @@ -0,0 +1,30 @@ +import { useState } from "react"; +import "./Bmi.css"; + +function Bmi() { + const [height,setHeight]=useState(""); + const [mass,setMass]=useState(""); + const [BMI ,setBMI]=useState("") + function calculate(){ + let newBMI = mass/(height*height); + setBMI(newBMI) + + } + return ( +
+

BMI Calculator🧮

+
+ + { setHeight(e.target.value) }}> + + { setMass(e.target.value) }}> + + + +
+ {BMI &&

Your BMI is {BMI}

} +
+ ); +} + +export default Bmi; diff --git a/src/bgc2.jpg b/src/bgc2.jpg new file mode 100644 index 0000000..5774bd3 Binary files /dev/null and b/src/bgc2.jpg differ diff --git a/src/index.js b/src/index.js index 8db5acb..d41593b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,10 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import App from "./App"; +import Bmi from "./Bmi"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + );