diff --git a/src/App.jsx b/src/App.jsx index 98d0f49..b687c47 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,97 @@ import "./App.css"; +import IdCard from "./components/IdCard"; +import Greetings from "./components/Greetings"; +import Random from "./components/Random"; +import BoxColor from './components/BoxColor'; +import CreditCard from "./components/CreditCard"; +import Rating from "./components/Rating"; + function App() { return ( -
-

LAB | React Training

-
+ <> +
+ + + +
+ +
+ Ludwig + François + Maria + John +
+ +
+ + +
+ +
+ + + +
+ +
+ + + + + +
+ +
+ 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..7f7f8d9 --- /dev/null +++ b/src/components/BoxColor.jsx @@ -0,0 +1,26 @@ +import React from "react"; + +function BoxColor({ r, g, b }) { + + const divStyle = { + backgroundColor: `rgb(${r}, ${g}, ${b})`, + border: "1px solid #ccc", + margin: "10px 0", + padding: "20px", + textAlign: "center", + color: r + g + b > 400 ? "black" : "white", // choose text color for contrast + }; + + + const toHex = (value) => value.toString(16).padStart(2, "0"); + const hexColor = `#${toHex(r)}${toHex(g)}${toHex(b)}`; + + return ( +
+ rgb({r},{g},{b})
+ {hexColor} +
+ ); +} + +export default BoxColor; diff --git a/src/components/CreditCard.jsx b/src/components/CreditCard.jsx new file mode 100644 index 0000000..0f0391f --- /dev/null +++ b/src/components/CreditCard.jsx @@ -0,0 +1,61 @@ +import React from "react"; + +function CreditCard({ + type, + number, + expirationMonth, + expirationYear, + bank, + owner, + bgColor, + color, +}) { + const cardStyle = { + backgroundColor: bgColor, + color: color, + width: "300px", + borderRadius: "10px", + padding: "20px", + margin: "10px", + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + fontFamily: "Arial, sans-serif", + }; + + + const maskedNumber = "•••• •••• •••• " + number.slice(-4); + + + const formattedMonth = expirationMonth.toString().padStart(2, "0"); + const formattedYear = expirationYear.toString().slice(-2); + + + const cardLogo = + type === "Visa" + ? "https://upload.wikimedia.org/wikipedia/commons/4/41/Visa_Logo.png" + : "https://upload.wikimedia.org/wikipedia/commons/0/04/Mastercard-logo.png"; + + return ( +
+
+ {type} +
+ +

+ {maskedNumber} +

+ +
+
+ Expires {formattedMonth}/{formattedYear} +
+
{bank}
+
+ +
{owner}
+
+ ); +} + +export default CreditCard; diff --git a/src/components/DriverCard.jsx b/src/components/DriverCard.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx new file mode 100644 index 0000000..e8da6a7 --- /dev/null +++ b/src/components/Greetings.jsx @@ -0,0 +1,18 @@ +import React from "react"; + +const Greetings = ({ lang, children }) => { + const greetings = { + de: "Hallo", + en: "Hello", + es: "Hola", + fr: "Bonjour", + }; + + 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..11f7e87 --- /dev/null +++ b/src/components/IdCard.jsx @@ -0,0 +1,17 @@ +import React from "react"; + +const IdCard = ({lastName, firstName, gender, height, birth, picture }) => { + return ( +
+ {firstName} +
+

First Name: {firstName}

+

Last Name: {lastName}

+

Gender: {gender}

+

Height: {height}cm

+

Birth: {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..da5921d --- /dev/null +++ b/src/components/Random.jsx @@ -0,0 +1,14 @@ +import React from "react"; + +function Random ({ min, max}) { + + const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min; + + return ( +

+ Random value between {min} and {max} => {randomNumber} +

+ ); +} + +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..56c0d1f --- /dev/null +++ b/src/components/Rating.jsx @@ -0,0 +1,13 @@ +import React from "react"; + +function Rating({ children }) { + + const rounded = Math.round(children); + + + const stars = "★★★★★".slice(0, rounded) + "☆☆☆☆☆".slice(0, 5 - rounded); + + return
{stars}
; +} + +export default Rating; \ No newline at end of file