lab completed

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 (
-    <div className="App">
-      <h1> LAB | React Training</h1>
-    </div>
+    <>
+      <div className="App">
+        <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"
+        />
+      </div>
+
+      <div>
+        <Greetings lang="de">Ludwig</Greetings>
+        <Greetings lang="fr">François</Greetings>
+        <Greetings lang="es">Maria</Greetings>
+        <Greetings lang="en">John</Greetings>
+      </div>
+
+      <div>
+        <Random min={1} max={6} />
+        <Random min={1} max={100} />
+      </div>
+
+      <div>
+        <BoxColor r={255} g={0} b={0} />
+        <BoxColor r={128} g={255} b={0} />
+        <BoxColor r={0} g={0} b={255} />
+      </div>
+
+      <div style={{ display: "flex", gap: "20px" }}>
+        <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"
+        />
+      </div>
+
+      <div>
+        <Rating>0</Rating>
+        <Rating>1.49</Rating>
+        <Rating>1.5</Rating>
+        <Rating>3</Rating>
+        <Rating>4</Rating>
+        <Rating>5</Rating>
+      </div>
+    </>
   );
 }
 

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 (
+    <div style={divStyle}>
+      rgb({r},{g},{b}) <br />
+      {hexColor}
+    </div>
+  );
+}
+
+export default BoxColor;

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 (
+    <div style={cardStyle}>
+      <div style={{ display: "flex", justifyContent: "flex-end" }}>
+        <img src={cardLogo} alt={type} style={{ height: "30px" }} />
+      </div>
+
+      <h2 style={{ fontSize: "1.5em", letterSpacing: "2px", margin: "20px 0" }}>
+        {maskedNumber}
+      </h2>
+
+      <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.9em" }}>
+        <div>
+          Expires {formattedMonth}/{formattedYear}
+        </div>
+        <div>{bank}</div>
+      </div>
+
+      <div style={{ marginTop: "10px", fontSize: "0.9em" }}>{owner}</div>
+    </div>
+  );
+}
+
+export default CreditCard;

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 (
+    <div style={{ border: "1px solid #ccc", margin: "10px", padding: "10px" }}>
+      {greetings[lang] || "Hello"} {children}
+    </div>
+  );
+};
+
+export default Greetings;

src/components/IdCard.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+const IdCard = ({lastName, firstName, gender, height, birth, picture  }) => {
+    return (
+        <div style={{ display: "flex", border: "1px solid #121212ff", margin: "10px", padding: "10px" }}>
+            <img src={picture} alt={firstName} style={{ marginRight: "15px", width: "200px" }} />
+                <div>
+                    <p><strong>First Name:</strong> {firstName} </p>
+                    <p><strong>Last Name:</strong> {lastName} </p>
+                    <p><strong>Gender:</strong> {gender} </p>
+                    <p><strong>Height:</strong> {height}cm </p>
+                    <p><strong>Birth:</strong> {birth.toDateString()} </p>
+                </div>
+        </div>
+    )
+}
+export default IdCard;

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 (
+        <p>
+            Random value between {min} and {max} =&gt; {randomNumber}
+        </p>
+    );
+}
+
+export default Random;

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 <div style={{ fontSize: "2em" }}>{stars}</div>;
+}
+
+export default Rating;