done

src/App.jsx

@@ -1,11 +1,108 @@
 import "./App.css";
+import { IdCard } from "./components/IdCard/IdCard";
+import { Greetings } from "./components/Greetings/Greetings";
+import { RandomNumber } from "./components/Random/RandomNumber";
+import { BoxColor } from "./components/BoxColor/BoxColor";
+import { CreditCard } from "./components/CreditCard/CreditCard";
+import { Rating } from "./components/Rating/Rating";
+import { DriverCard } from "./components/DriverCard/DriverCard";
 
 function App() {
-  return (
-    <div className="App">
-      <h1> LAB | React Training</h1>
-    </div>
-  );
+	return (
+		<div className="App">
+			<h1> LAB | React Training</h1>
+			<IdCard
+				lastName="Doe"
+				firstName="John"
+				gender="male"
+				height={178}
+				birth={new Date("1992-07-14")}
+				picture="https://randomuser.me/api/portraits/men/44.jpg"
+			/>
+			<IdCard
+				lastName="Delores "
+				firstName="Obrien"
+				gender="female"
+				height={172}
+				birth={new Date("1988-05-11")}
+				picture="https://randomuser.me/api/portraits/women/44.jpg"
+			/>
+			<hr />
+
+			<Greetings lang="de">Ludwig</Greetings>
+			<Greetings lang="fr">François</Greetings>
+			<Greetings lang="es">Maria</Greetings>
+			<Greetings lang="en">John</Greetings>
+
+			<hr />
+
+			<RandomNumber min={1} max={6} />
+			<RandomNumber min={1} max={100} />
+
+			<BoxColor r={255} g={0} b={0} />
+			<BoxColor r={128} g={255} b={0} />
+
+			<CreditCard
+				type="Visa"
+				number="0123456789018845"
+				expirationMonth={3}
+				expirationYear={2021}
+				bank="BNP"
+				owner="Maxence Bouret"
+				bgColor="#11aa99"
+				color="white"
+			/>
+
+			<CreditCard
+				type="Master Card"
+				number="0123456789010995"
+				expirationMonth={3}
+				expirationYear={2021}
+				bank="N26"
+				owner="Maxence Bouret"
+				bgColor="#eeeeee"
+				color="#222222"
+			/>
+
+			<CreditCard
+				type="Visa"
+				number="0123456789016984"
+				expirationMonth={12}
+				expirationYear={2019}
+				bank="Name of the Bank"
+				owner="Firstname Lastname"
+				bgColor="#ddbb55"
+				color="white"
+			/>
+
+			<Rating>0</Rating>
+			<Rating>1.49</Rating>
+			<Rating>1.5</Rating>
+			<Rating>3</Rating>
+			<Rating>4</Rating>
+			<Rating>5</Rating>
+
+			<DriverCard
+				name="Travis Kalanick"
+				rating={4.2}
+				img="https://si.wsj.net/public/resources/images/BN-TY647_37gql_OR_20170621052140.jpg?width=620&height=428"
+				car={{
+					model: "Toyota Corolla Altis",
+					licensePlate: "CO42DE",
+				}}
+			/>
+
+			<DriverCard
+				name="Dara Khosrowshahi"
+				rating={4.9}
+				img="https://ubernewsroomapi.10upcdn.com/wp-content/uploads/2017/09/Dara_ELT_Newsroom_1000px.jpg"
+				car={{
+					model: "Audi A3",
+					licensePlate: "BE33ER",
+				}}
+			/>
+		</div>
+	);
 }
 
 export default App;

src/components/BoxColor/BoxColor.jsx

@@ -0,0 +1,19 @@
+export function BoxColor({ r, g, b }) {
+	const backgroundColor = `rgb(${r}, ${g}, ${b})`;
+
+	const boxStyle = {
+		backgroundColor: backgroundColor,
+		width: "300px",
+		height: "100px",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		margin: "10px 0",
+		color: r + g + b > 382 ? "black" : "white", // text color contrast
+		fontWeight: "bold",
+		border: "1px solid #000",
+		borderRadius: "8px",
+	};
+
+	return <div style={boxStyle}>{backgroundColor}</div>;
+}

src/components/CreditCard/CreditCard.jsx

@@ -0,0 +1,72 @@
+export function CreditCard({
+	type,
+	number,
+	expirationMonth,
+	expirationYear,
+	bank,
+	owner,
+	bgColor,
+	color,
+}) {
+	// Mask all digits except the last 4
+	const maskedNumber = `•••• •••• •••• ${number.slice(-4)}`;
+
+	// Format month to always have two digits
+	const formattedMonth = expirationMonth.toString().padStart(2, "0");
+
+	// Determine card logo
+	const logo =
+		type === "Visa"
+			? "https://upload.wikimedia.org/wikipedia/commons/4/41/Visa_Logo.png"
+			: "https://upload.wikimedia.org/wikipedia/commons/0/04/Mastercard-logo.png";
+
+	const cardStyle = {
+		backgroundColor: bgColor,
+		color: color,
+		width: "350px",
+		borderRadius: "15px",
+		padding: "20px",
+		fontFamily: "Arial, sans-serif",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "space-between",
+		margin: "10px 0",
+		minHeight: "180px",
+		boxShadow: "0 4px 8px rgba(0,0,0,0.2)",
+	};
+
+	const topRowStyle = {
+		display: "flex",
+		justifyContent: "flex-end",
+	};
+
+	const bottomRowStyle = {
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center",
+		marginTop: "20px",
+		fontSize: "0.9em",
+	};
+
+	const numberStyle = {
+		fontSize: "1.5em",
+		letterSpacing: "2px",
+		margin: "20px 0",
+	};
+
+	return (
+		<div style={cardStyle}>
+			<div style={topRowStyle}>
+				<img src={logo} alt={type} style={{ height: "30px" }} />
+			</div>
+			<div style={numberStyle}>{maskedNumber}</div>
+			<div style={bottomRowStyle}>
+				<div>
+					Expires {formattedMonth}/{expirationYear.toString().slice(-2)}
+				</div>
+				<div>{bank}</div>
+			</div>
+			<div style={{ marginTop: "10px" }}>{owner}</div>
+		</div>
+	);
+}

src/components/DriverCard/DriverCard.jsx

@@ -0,0 +1,44 @@
+export function DriverCard({ name, rating, img, car }) {
+	const cardStyle = {
+		display: "flex",
+		alignItems: "center",
+		backgroundColor: "#455eb5",
+		color: "white",
+		borderRadius: "10px",
+		padding: "20px",
+		margin: "10px 0",
+		maxWidth: "500px",
+	};
+
+	const imgStyle = {
+		width: "100px",
+		height: "100px",
+		borderRadius: "50%",
+		objectFit: "cover",
+		marginRight: "20px",
+	};
+
+	const infoStyle = {
+		display: "flex",
+		flexDirection: "column",
+	};
+
+	// Convert rating to nearest integer and display stars
+	const roundedRating = Math.round(rating);
+	const stars = Array.from({ length: 5 }, (_, i) =>
+		i < roundedRating ? "★" : "☆",
+	).join(" ");
+
+	return (
+		<div style={cardStyle}>
+			<img src={img} alt={name} style={imgStyle} />
+			<div style={infoStyle}>
+				<h2>{name}</h2>
+				<p style={{ fontSize: "1.5em", margin: "5px 0" }}>{stars}</p>
+				<p>
+					{car.model} - {car.licensePlate}
+				</p>
+			</div>
+		</div>
+	);
+}

src/components/Greetings/Greetings.jsx

@@ -0,0 +1,33 @@
+export function Greetings({ lang, children }) {
+	const divStyle = {
+		border: "3px solid black",
+		margin: "15px",
+		padding: "20px",
+		fontSize: "30px",
+	};
+
+	let greeting;
+
+	switch (lang) {
+		case "de":
+			greeting = "Hallo";
+			break;
+		case "en":
+			greeting = "Hello";
+			break;
+		case "es":
+			greeting = "Hola";
+			break;
+		case "fr":
+			greeting = "Bonjour";
+			break;
+		default:
+			greeting = "Hello";
+	}
+
+	return (
+		<div style={divStyle}>
+			{greeting} {children}
+		</div>
+	);
+}