From e62ad0e77e77793811b2125c769f80b8075699d7 Mon Sep 17 00:00:00 2001 From: Pablo Queiroz Date: Sat, 20 Dec 2025 17:10:50 +0000 Subject: [PATCH] done --- package-lock.json | 14 +++- src/App.css | 131 ++++++++++++++++++++++++++++++++++ src/App.jsx | 108 +++++++++++++++++++++++++++- src/components/BoxColor.jsx | 32 +++++++++ src/components/CreditCard.jsx | 19 +++++ src/components/DriverCard.jsx | 24 +++++++ src/components/Greatings.jsx | 14 ++++ src/components/IdCard.jsx | 40 +++++++++++ src/components/Random.jsx | 8 +++ src/components/Rating.jsx | 16 +++++ 10 files changed, 404 insertions(+), 2 deletions(-) create mode 100644 src/components/BoxColor.jsx create mode 100644 src/components/CreditCard.jsx create mode 100644 src/components/DriverCard.jsx create mode 100644 src/components/Greatings.jsx create mode 100644 src/components/IdCard.jsx create mode 100644 src/components/Random.jsx create mode 100644 src/components/Rating.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.css b/src/App.css index e69de29..a35708f 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,131 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + color: #333; +} + +.card { + background: #fff; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + margin: 20px; + padding: 20px; + display: flex; + border: 1px solid black; + height: 150px; + align-items: center; +} + +.image { + max-width: 150px; + margin-right: 20px; + object-fit: cover; +} +.card-info { + font-size: 16px; + line-height: 1.2; + text-align: start; + margin-bottom: 40px; +} + +.card-info h2 { + font-size: 24px; + margin-bottom: 10px; +} +.card-info span { + font-weight: bold; + color: black; +} + +.card-info p { + font-size: 14px; + color: black; + font-weight: normal; +} + +.greating { + background: #fff; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + margin: 20px; + padding: 10px; + display: flex; + border: 1px solid black; + align-items: center; +} + +.credit-card-container { + display: flex; + gap: 20px; + justify-content: center; +} +.credit-card { + background-color: #333; + border-radius: 10px; + color: white; + max-width: 250px; + min-width: 250px; + height: 150px; + padding: 20px; + margin: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.card-type { + align-self: flex-end; + font-size: 18px; +} +.card-number { + font-size: 18px; + letter-spacing: 1.4px; + margin: 10px 0; +} + +.card-footer { + display: flex; + justify-content: space-between; + font-size: 14px; +} + +.fa-star { + color: white; + cursor: pointer; + font-size: 24px; +} + +.fa-star.checked, +.fa-star.active { + color: black; +} + +.driver-card { + background-color: #468fd3; + color: white; + border: 1px solid #ccc; + border-radius: 10px; + width: 600px; + padding: 20px; + margin: 20px auto; + display: flex; + justify-content: center; + align-items: center; + gap: 20px; +} + +.card-image { + width: 100px; + height: 100px; + border-radius: 50%; + object-fit: cover; +} + +.driver-name { + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; +} diff --git a/src/App.jsx b/src/App.jsx index 98d0f49..d0e0483 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,115 @@ import "./App.css"; +import IdCard from "./components/IdCard"; +import Greatings from "./components/Greatings"; +import Random from "./components/Random"; +import BoxColor from "./components/BoxColor"; +import CreditCard from "./components/CreditCard"; +import Rating from "./components/Rating"; +import DriverCard from "./components/DriverCard"; function App() { return (
-

LAB | React Training

+
+ + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + + + + +
+ +
+ 0 + 1.49 + 1.5 + 3 + 4 + 5 +
+ +
+ + + +
); } diff --git a/src/components/BoxColor.jsx b/src/components/BoxColor.jsx new file mode 100644 index 0000000..2db5317 --- /dev/null +++ b/src/components/BoxColor.jsx @@ -0,0 +1,32 @@ +function BoxColor({ r, g, b }) { + const divStyle = { + backgroundColor: `rgb(${r}, ${g}, ${b})`, + height: "150px", + border: "1px solid black", + textAlign: "center", + margin: "10px", + fontSize: "20px", + display: "flex", + flexDirection: "column", + justifyContent: "center", + color: r * 0.299 + g * 0.587 + b * 0.114 > 186 ? "black" : "white", + }; + + r = Math.max(0, Math.min(255, r)); + g = Math.max(0, Math.min(255, g)); + b = Math.max(0, Math.min(255, b)); + + const hexR = r.toString(16).padStart(2, "0"); + const hexG = g.toString(16).padStart(2, "0"); + const hexB = b.toString(16).padStart(2, "0"); + + return ( +
+ {" "} + rgb({r},{g},{b})
#{hexR} + {hexG} + {hexB}{" "} +
+ ); +} +export default BoxColor; diff --git a/src/components/CreditCard.jsx b/src/components/CreditCard.jsx new file mode 100644 index 0000000..b52672a --- /dev/null +++ b/src/components/CreditCard.jsx @@ -0,0 +1,19 @@ +function CreditCard(props) { + const creditCard = props; + + const maskedNumber = "**** **** **** " + creditCard.number.slice(-4); + + return ( + <> +
+ +
{maskedNumber}
+
+ {creditCard.expirationMonth}/{creditCard.expirationYear}{" "} + {creditCard.bank} {creditCard.owner} +
+
+ + ); +} +export default CreditCard; diff --git a/src/components/DriverCard.jsx b/src/components/DriverCard.jsx new file mode 100644 index 0000000..39d808f --- /dev/null +++ b/src/components/DriverCard.jsx @@ -0,0 +1,24 @@ +function DriverCard(props) { + return ( + <> +
+ {props.name} +
+

{props.name}

+
+ {Math.round(props.rating) === 0 && "☆☆☆☆☆"} + {Math.round(props.rating) === 1 && "★☆☆☆☆"} + {Math.round(props.rating) === 2 && "★★☆☆☆"} + {Math.round(props.rating) === 3 && "★★★☆☆"} + {Math.round(props.rating) === 4 && "★★★★☆"} + {Math.round(props.rating) === 5 && "★★★★★"} +
+

+ {props.car.model} - {props.car.licensePlate} +

+
+
+ + ); +} +export default DriverCard; diff --git a/src/components/Greatings.jsx b/src/components/Greatings.jsx new file mode 100644 index 0000000..e60420b --- /dev/null +++ b/src/components/Greatings.jsx @@ -0,0 +1,14 @@ +function Greetings({ lang, children }) { + const greetings = { + de: "Hallo", + en: "Hello", + es: "Hola", + fr: "Bonjour", + }; + return ( +
+ {greetings[lang]} {children} +
+ ); +} +export default Greetings; diff --git a/src/components/IdCard.jsx b/src/components/IdCard.jsx new file mode 100644 index 0000000..5ec058c --- /dev/null +++ b/src/components/IdCard.jsx @@ -0,0 +1,40 @@ +function IdCard(props) { + const person = props; + + console.log(props); + + return ( + <> +
+ +
+ Profile +
+ +
+

+ First Name: + {person.firstName} +

+

+ Last Name: + {person.lastName} +

+

+ Gender: + {person.male} +

+

+ Height: + {person.height} +

+

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

+
+
+ + ); +} +export default IdCard; diff --git a/src/components/Random.jsx b/src/components/Random.jsx new file mode 100644 index 0000000..8196a85 --- /dev/null +++ b/src/components/Random.jsx @@ -0,0 +1,8 @@ +function Random( {min, max}) { + return ( +
+ Random value between {min} and {max} {'=>'} {Math.floor(Math.random() * (max - min + 1)) + min} +
+ ) +} +export default Random \ No newline at end of file diff --git a/src/components/Rating.jsx b/src/components/Rating.jsx new file mode 100644 index 0000000..005d9dc --- /dev/null +++ b/src/components/Rating.jsx @@ -0,0 +1,16 @@ +function Rating(props) { + const rating = Math.round(Number(props.children)) + + return ( +
+ {rating === 0 && "☆☆☆☆☆"} + {rating === 1 && "★☆☆☆☆"} + {rating === 2 && "★★☆☆☆"} + {rating === 3 && "★★★☆☆"} + {rating === 4 && "★★★★☆"} + {rating === 5 && "★★★★★"} +
+ + ) +} +export default Rating \ No newline at end of file