From b0c510aa748797b8be8653323056064bbd4669ab Mon Sep 17 00:00:00 2001 From: eren-brcn Date: Mon, 9 Feb 2026 10:58:29 +0300 Subject: [PATCH] Solved lab --- package-lock.json | 14 +++++++++++++- src/App.jsx | 36 +++++++++++++++++++++++++++++++++-- src/components/BoxColor.jsx | 28 +++++++++++++++++++++++++++ src/components/CreditCard.jsx | 13 +++++++++++++ src/components/Greetings.jsx | 23 ++++++++++++++++++++++ src/components/IdCard.jsx | 24 +++++++++++++++++++++++ src/components/Random.jsx | 23 ++++++++++++++++++++++ 7 files changed, 158 insertions(+), 3 deletions(-) create mode 100644 src/components/BoxColor.jsx create mode 100644 src/components/CreditCard.jsx create mode 100644 src/components/Greetings.jsx create mode 100644 src/components/IdCard.jsx create mode 100644 src/components/Random.jsx 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..a8e0ae8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,43 @@ import "./App.css"; +import IdCard from "./components/IdCard.jsx"; +import Greetings from "./components/Greetings.jsx"; +import Random from "./components/Random.jsx"; +import BoxColor from "./components/BoxColor.jsx"; function App() { return (
-

LAB | React Training

+

IdCard

+ + + +

Greetings

+ Ludwig + François + +

Random

+ + + +

BoxColor

+ +
); } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/BoxColor.jsx b/src/components/BoxColor.jsx new file mode 100644 index 0000000..0ee2bf5 --- /dev/null +++ b/src/components/BoxColor.jsx @@ -0,0 +1,28 @@ +import React from 'react'; + +const BoxColor = ({ r, g, b }) => { + const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; + const color = `rgb(${r},${g},${b})`; + + const boxStyle = { + backgroundColor: color, + color: r + g + b > 400 ? 'black' : 'white', + height: '100px', + margin: '10px', + border: '1px solid black', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + fontWeight: 'bold' + }; + + return ( +
+ {color} + {hex} +
+ ); +}; + +export default BoxColor; \ No newline at end of file diff --git a/src/components/CreditCard.jsx b/src/components/CreditCard.jsx new file mode 100644 index 0000000..c7f0bc9 --- /dev/null +++ b/src/components/CreditCard.jsx @@ -0,0 +1,13 @@ +function CreditCard(props) { + return ( +
+

{props.type}

+ {/* Show only last 4 digits */} +

•••• •••• •••• {props.number.slice(-4)}

+

Expires: {props.expirationMonth}/{props.expirationYear} {props.bank}

+

{props.owner}

+
+ ); +} + +export default CreditCard; \ No newline at end of file diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx new file mode 100644 index 0000000..56de1f2 --- /dev/null +++ b/src/components/Greetings.jsx @@ -0,0 +1,23 @@ +import React from 'react'; + +const Greetings = ({ lang, children }) => { + const greetings = { de: 'Hallo', en: 'Hello', es: 'Hola', fr: 'Bonjour' }; + + const greenStyle = { + backgroundColor: '#d4edda', + color: '#155724', + border: '1px solid #c3e6cb', + padding: '10px', + margin: '10px', + borderRadius: '4px', + fontSize: '20px' + }; + + return ( +
+ {greetings[lang] || 'Hello'} {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..3ced175 --- /dev/null +++ b/src/components/IdCard.jsx @@ -0,0 +1,24 @@ +function IdCard(props) { + return ( + // We use a div to wrap everything so it stays together +
+ + {/* 1. Show the image using the 'picture' prop */} + profile + + {/* 2. Show the text info next to the image */} +
+

First name: {props.firstName}

+

Last name: {props.lastName}

+

Gender: {props.gender}

+

Height: {props.height / 100}m

+ + {/* Dates need .toDateString() or they will look like a mess of numbers! */} +

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..0f67fe2 --- /dev/null +++ b/src/components/Random.jsx @@ -0,0 +1,23 @@ +import React from 'react'; + +const Random = ({ min, max }) => { + const randomValue = Math.floor(Math.random() * (max - min + 1) + min); + + const greenStyle = { + backgroundColor: '#d4edda', + color: '#155724', + border: '1px solid #c3e6cb', + padding: '10px', + margin: '10px', + borderRadius: '4px', + fontSize: '20px' + }; + + return ( +
+ Random value between {min} and {max} ={'>'} {randomValue} +
+ ); +}; + +export default Random; \ No newline at end of file