diff --git a/package-lock.json b/package-lock.json index 1349153..d79848d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,6 +61,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.8.tgz", "integrity": "sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==", "dev": true, + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.21.4", @@ -964,6 +965,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1129,6 +1131,7 @@ "url": "https://tidelift.com/funding/github/npm/browserslist" } ], + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001449", "electron-to-chromium": "^1.4.284", @@ -1450,6 +1453,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz", "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.4.0", @@ -2837,6 +2841,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -3277,6 +3282,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz", "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==", "dev": true, + "peer": true, "dependencies": { "esbuild": "^0.17.5", "postcss": "^8.4.23", @@ -3436,6 +3442,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.8.tgz", "integrity": "sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==", "dev": true, + "peer": true, "requires": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.21.4", @@ -4004,7 +4011,8 @@ "version": "8.8.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", - "dev": true + "dev": true, + "peer": true }, "acorn-jsx": { "version": "5.3.2", @@ -4121,6 +4129,7 @@ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz", "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==", "dev": true, + "peer": true, "requires": { "caniuse-lite": "^1.0.30001449", "electron-to-chromium": "^1.4.284", @@ -4365,6 +4374,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz", "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==", "dev": true, + "peer": true, "requires": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.4.0", @@ -5342,6 +5352,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, "requires": { "loose-envify": "^1.1.0" } @@ -5638,6 +5649,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz", "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==", "dev": true, + "peer": true, "requires": { "esbuild": "^0.17.5", "fsevents": "~2.3.2", diff --git a/src/App.jsx b/src/App.jsx index 98d0f49..906ac67 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,48 @@ import "./App.css"; +import IdCard from "./components/IdCard"; +import Greetings from "./components/Greetings"; +import Random from "./components/Random"; +import BoxColor from "./components/BoxColor"; function App() { return (

LAB | React Training

+ + + + + + Ludwig + François + Maxence + Maria + + + + + + + + + + + +
); } diff --git a/src/components/BoxColor.jsx b/src/components/BoxColor.jsx new file mode 100644 index 0000000..2b77f76 --- /dev/null +++ b/src/components/BoxColor.jsx @@ -0,0 +1,17 @@ +function BoxColor(props) { + const boxStyle = { + backgroundColor: `rgb(${props.r}, ${props.g}, ${props.b})`, + border: '1px solid black', + padding: '20px', + margin: '10px', + textAlign: 'center' + }; + return ( +
+

rgb({props.r}, {props.g}, {props.b})

+
+ ); +} + + +export default BoxColor; \ No newline at end of file diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx new file mode 100644 index 0000000..c90d50b --- /dev/null +++ b/src/components/Greetings.jsx @@ -0,0 +1,16 @@ +function Greetings(props) { + let greeting = ""; + + if (props.lang === "de") greeting = "Hallo"; + if (props.lang === "en") greeting = "Hello"; + if (props.lang === "es") greeting = "Hola"; + if (props.lang === "fr") greeting = "Bonjour"; + + return ( +

+ {greeting} {props.children} +

+ ); +} + +export default Greetings; \ No newline at end of file diff --git a/src/components/IdCard.jsx b/src/components/IdCard.jsx new file mode 100644 index 0000000..331ea76 --- /dev/null +++ b/src/components/IdCard.jsx @@ -0,0 +1,29 @@ +function IdCard(props) { + return ( +
+ {`${props.firstName} + +
+

+ First name: {props.firstName} +

+

+ Last name: {props.lastName} +

+

+ Gender: {props.gender} +

+

+ Height: {props.height}cm +

+

+ Birth: {props.birth.toDateString()} + + +

+ +
+
+ ) +} +export default IdCard; \ No newline at end of file diff --git a/src/components/Random.jsx b/src/components/Random.jsx new file mode 100644 index 0000000..b34d3b7 --- /dev/null +++ b/src/components/Random.jsx @@ -0,0 +1,11 @@ +function Random (props) { + const number = Math.floor(Math.random() * (props.max - props.min + 1)) + props.min; + return ( +
+

+ Random value between {props.min} and {props.max} > {number} +

+
+ ); +} +export default Random; \ No newline at end of file