done

src/App.jsx

@@ -1,9 +1,48 @@
 import "./App.css";
+import IdCard from "./components/IdCard";
+import Greetings from "./components/Greetings";
+import Random from "./components/Random";
+import BoxColor from "./components/BoxColor";
 
 function App() {
   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"
+      />
+
+
+      <Greetings lang="de">Ludwig</Greetings>
+      <Greetings lang="fr">François</Greetings>
+      <Greetings lang="en">Maxence</Greetings>
+      <Greetings lang="es">Maria</Greetings>
+
+
+
+
+      <Random min={1} max={6} />
+      <Random min={1} max={100} />
+
+
+
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
+
     </div>
   );
 }

src/components/BoxColor.jsx

@@ -0,0 +1,17 @@
+function BoxColor(props) {
+    const boxStyle = {
+        backgroundColor: `rgb(${props.r}, ${props.g}, ${props.b})`,
+        border: '1px solid black',
+        padding: '20px',
+        margin: '10px',
+        textAlign: 'center'
+    };
+    return (
+        <div style={boxStyle}>
+         <p>rgb({props.r}, {props.g}, {props.b})</p>   
+        </div>
+    );
+}
+
+
+export default BoxColor;

src/components/Greetings.jsx

@@ -0,0 +1,16 @@
+function Greetings(props) {
+    let greeting = "";
+
+    if (props.lang === "de") greeting = "Hallo";
+    if (props.lang === "en") greeting = "Hello";
+    if (props.lang === "es") greeting = "Hola";
+    if (props.lang === "fr") greeting = "Bonjour";
+
+    return (
+        <p>
+            {greeting} {props.children} 
+        </p>
+    );
+}
+
+export default Greetings;

src/components/IdCard.jsx

@@ -0,0 +1,29 @@
+function IdCard(props) {
+    return (
+        <div className="id-card">
+            <img src={props.picture} alt={`${props.firstName} ${props.lastName}`} />
+
+            <div>
+                <p>
+                    <strong>First name:</strong> {props.firstName}
+                </p>
+                <p>
+                    <strong>Last name:</strong> {props.lastName}
+                </p>
+                <p>
+                    <strong>Gender:</strong> {props.gender}
+                </p>
+                <p>
+                    <strong>Height:</strong> {props.height}cm
+                </p>
+                <p>
+                    <strong>Birth:</strong> {props.birth.toDateString()}   
+
+
+                </p>
+
+            </div>
+        </div>
+    )
+}
+export default IdCard;

src/components/Random.jsx

@@ -0,0 +1,11 @@
+function Random (props) {
+    const number = Math.floor(Math.random() * (props.max - props.min + 1)) + props.min;
+    return (
+        <div className="random">
+            <p>
+                Random value between {props.min} and {props.max} &gt; {number} 
+            </p>
+        </div>
+    );
+}
+export default Random;