From a5eb20a62b2388a5a96070da2d1e16e09cb0669d Mon Sep 17 00:00:00 2001 From: tnirupama3 <62882088+tnirupama3@users.noreply.github.com> Date: Tue, 11 Apr 2023 17:59:54 -0700 Subject: [PATCH 1/3] Inputting height and weight --- App.jsx | 38 ++++++++++++++++++++++++++++++++------ another.pl | 14 ++++++++++++++ package.json | 11 +++++++---- 3 files changed, 53 insertions(+), 10 deletions(-) create mode 100644 another.pl diff --git a/App.jsx b/App.jsx index 1aa6ae9..f20c0b2 100644 --- a/App.jsx +++ b/App.jsx @@ -1,11 +1,37 @@ -import React from 'react'; +import React, { useState } from 'react'; +import -class App extends React.Component { - render() { - return ( -
simon, helloworld!!!
- ); + +const App = () => { + const [height, setHeight] = useState(''); + const [weight, setWeight] = useState(''); + const [bmi, setBMI] = useState(''); + + const handleHeightChange = event => { + setHeight(event.target.value); + } + + const handleWeightChange = event => { + setWeight(event.target.value); } + + const handleCalculateBMI = () => { + const bmi = calculateBMI(height, weight); + setBMI(bmi); + } + + return ( +
+ + +
+ + +
+ + {bmi &&

Your BMI is {bmi}

} +
+ ); } export default App; diff --git a/another.pl b/another.pl new file mode 100644 index 0000000..52148cf --- /dev/null +++ b/another.pl @@ -0,0 +1,14 @@ +{ + "presets": [ + "@babel/preset-react", + [ + "@babel/preset-env", + { + "targets": { + "node": "current" + } + } + ] + ], + "plugins": ["@babel/plugin-proposal-class-properties"] +} diff --git a/package.json b/package.json index d1195c2..b74fe60 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "helloworld", "version": "1.0.0", - "description": "", + "description": "--- first, you should install node and npm.", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", @@ -14,9 +14,12 @@ "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.5.0", - "react": "^15.1.0", - "react-dom": "^15.1.0", + "npm": "^9.6.4", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "start": "^5.1.0", "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1" - } + }, + "devDependencies": {} } From c8633a8732f537d8f3269d165ecf6b8f34711c74 Mon Sep 17 00:00:00 2001 From: tnirupama3 <62882088+tnirupama3@users.noreply.github.com> Date: Tue, 18 Apr 2023 16:47:52 -0700 Subject: [PATCH 2/3] adding validation message and classification of BMI --- App.jsx | 34 +++++++++++++++++++++++++++++++--- calculateBMI.jsx | 5 +++++ design.css | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 82 insertions(+), 3 deletions(-) create mode 100644 calculateBMI.jsx create mode 100644 design.css diff --git a/App.jsx b/App.jsx index f20c0b2..ed1c942 100644 --- a/App.jsx +++ b/App.jsx @@ -1,23 +1,49 @@ import React, { useState } from 'react'; -import - const App = () => { const [height, setHeight] = useState(''); const [weight, setWeight] = useState(''); const [bmi, setBMI] = useState(''); + const [message, setMessage] = useState(''); + const [error, setError] = useState(''); const handleHeightChange = event => { setHeight(event.target.value); + setError(''); + setMessage(''); } const handleWeightChange = event => { setWeight(event.target.value); + setError(''); + setMessage(''); } const handleCalculateBMI = () => { + if (height <= 0 || weight <= 0) { + setError('Please enter valid values for height and weight.'); + setBMI(''); + return; + } + const bmi = calculateBMI(height, weight); setBMI(bmi); + + if (bmi < 18.5) { + setMessage('You are underweight.'); + } else if (bmi >= 18.5 && bmi <= 24.9) { + setMessage('You have a healthy weight.'); + } else if (bmi >= 25 && bmi <= 29.9) { + setMessage('You are overweight.'); + } else { + setMessage('You are obese.'); + } + } + + const calculateBMI = (height, weight) => { + const heightInMeters = height / 100; + const bmi = weight / (heightInMeters * heightInMeters); + return bmi.toFixed(2); } return ( @@ -29,9 +55,11 @@ const App = () => {
+ {error &&

{error}

} + {message &&

{message}

} {bmi &&

Your BMI is {bmi}

} ); } -export default App; +export default App; \ No newline at end of file diff --git a/calculateBMI.jsx b/calculateBMI.jsx new file mode 100644 index 0000000..c6f6e35 --- /dev/null +++ b/calculateBMI.jsx @@ -0,0 +1,5 @@ +const calculateBMI = (height, weight) => { + const heightMeters = height / 100; + const bmi = weight / (heightMeters * heightMeters); + return bmi.toFixed(2); + } \ No newline at end of file diff --git a/design.css b/design.css new file mode 100644 index 0000000..eb1ab5a --- /dev/null +++ b/design.css @@ -0,0 +1,46 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + } + + .container { + max-width: 600px; + margin: 0 auto; + padding: 20px; + } + + form { + display: flex; + flex-direction: column; + gap: 10px; + margin-bottom: 20px; + } + + form label { + font-weight: bold; + } + + form input[type="number"] { + padding: 10px; + border-radius: 5px; + border: 1px solid #ccc; + } + + form button { + background-color: #4CAF50; + color: white; + padding: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + } + + .error { + color: red; + } + + .message { + font-weight: bold; + } + \ No newline at end of file From 40bfae53fe9e7b2e0c15d6e39c12a9ff38e4f51b Mon Sep 17 00:00:00 2001 From: tnirupama3 <62882088+tnirupama3@users.noreply.github.com> Date: Wed, 3 May 2023 02:51:08 -0700 Subject: [PATCH 3/3] Add all the working files --- .babelrc | 4 ++++ App.jsx | 3 ++- calculateBMI.jsx | 5 ----- design.css | 1 + dist/index.js | 2 ++ dist/index.js.LICENSE.txt | 32 ++++++++++++++++++++++++++++++++ index.html | 4 ++-- main.js | 2 +- package.json | 25 +++++++++++++++---------- webpack.config.js | 35 ++++++++++++++++++++++------------- 10 files changed, 81 insertions(+), 32 deletions(-) create mode 100644 .babelrc delete mode 100644 calculateBMI.jsx create mode 100644 dist/index.js create mode 100644 dist/index.js.LICENSE.txt diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..85ccdd2 --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["@babel/preset-env", "@babel/preset-react"] + } + \ No newline at end of file diff --git a/App.jsx b/App.jsx index ed1c942..a2b3645 100644 --- a/App.jsx +++ b/App.jsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import "./design.css" const App = () => { const [height, setHeight] = useState(''); @@ -47,7 +48,7 @@ const App = () => { } return ( -
+

diff --git a/calculateBMI.jsx b/calculateBMI.jsx deleted file mode 100644 index c6f6e35..0000000 --- a/calculateBMI.jsx +++ /dev/null @@ -1,5 +0,0 @@ -const calculateBMI = (height, weight) => { - const heightMeters = height / 100; - const bmi = weight / (heightMeters * heightMeters); - return bmi.toFixed(2); - } \ No newline at end of file diff --git a/design.css b/design.css index eb1ab5a..e31f3b3 100644 --- a/design.css +++ b/design.css @@ -8,6 +8,7 @@ body { max-width: 600px; margin: 0 auto; padding: 20px; + background-color: #4CAF50; } form { diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..036c7aa --- /dev/null +++ b/dist/index.js @@ -0,0 +1,2 @@ +/*! For license information please see index.js.LICENSE.txt */ +(()=>{"use strict";var e={418:e=>{var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,l){for(var a,o,u=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),i=1;i{var r=n(294),l=n(418),a=n(840);function o(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n