diff --git a/package-lock.json b/package-lock.json index 494bd2e..b4d8bb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,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" } @@ -14160,6 +14161,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", + "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26959,6 +26968,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-icons": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", + "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index a0bce27..dab4671 100644 --- 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 index aa069f2..a25d574 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,19 @@ - - - - - - - - - - - React App - - - -
- - - + + + \ No newline at end of file diff --git a/src/App.css b/src/App.css index e69de29..3929952 100644 --- 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 +} */ \ No newline at end of file diff --git a/src/App.js b/src/App.js index 93624ea..eb99283 100644 --- 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 (
-

Hello World

+
+
+

Calculate Your BMI

+
+ +
+ +
+ + +

YOUR BMI IS : {bmi}

+
+
+
); } diff --git a/src/images/bmi.webp b/src/images/bmi.webp new file mode 100644 index 0000000..910d177 Binary files /dev/null and b/src/images/bmi.webp differ diff --git a/src/images/bmi100.png b/src/images/bmi100.png new file mode 100644 index 0000000..4859ebd Binary files /dev/null and b/src/images/bmi100.png differ diff --git a/src/images/bmi2.jpg b/src/images/bmi2.jpg new file mode 100644 index 0000000..a5c4cbf Binary files /dev/null and b/src/images/bmi2.jpg differ diff --git a/src/images/bmi3.webp b/src/images/bmi3.webp new file mode 100644 index 0000000..6385723 Binary files /dev/null and b/src/images/bmi3.webp differ diff --git a/src/images/bmi4.jpeg b/src/images/bmi4.jpeg new file mode 100644 index 0000000..881a7b3 Binary files /dev/null and b/src/images/bmi4.jpeg differ diff --git a/src/images/bmi5.jpg b/src/images/bmi5.jpg new file mode 100644 index 0000000..2625026 Binary files /dev/null and b/src/images/bmi5.jpg differ diff --git a/src/images/bmi6.jpg b/src/images/bmi6.jpg new file mode 100644 index 0000000..8e18688 Binary files /dev/null and b/src/images/bmi6.jpg differ diff --git a/src/images/bmi7.png b/src/images/bmi7.png new file mode 100644 index 0000000..594c74e Binary files /dev/null and b/src/images/bmi7.png differ diff --git a/src/images/bmi8.jpg b/src/images/bmi8.jpg new file mode 100644 index 0000000..eba135b Binary files /dev/null and b/src/images/bmi8.jpg differ diff --git a/src/images/bmi9.png b/src/images/bmi9.png new file mode 100644 index 0000000..ede32a2 Binary files /dev/null and b/src/images/bmi9.png differ