ejercicio hecho

src/App.jsx

@@ -1,9 +1,42 @@
-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>
+      <h1>Id Cards</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"
+      />
+
+      <h1>Greetings</h1>
+      <Greetings lang="de">Ludwig</Greetings>
+      <Greetings lang="fr">François</Greetings>
+
+      <h1>Random Numbers</h1>
+      <Random min={1} max={6} />
+      <Random min={1} max={100} />
+
+      <h1>Box Colors</h1>
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
     </div>
   );
 }

src/components/BoxColor.jsx

@@ -0,0 +1,23 @@
+function BoxColor({ r, g, b }) {
+  const backgroundColor = `rgb(${r}, ${g}, ${b})`;
+  const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+
+  return (
+    <div style={{
+      backgroundColor,
+      width: '200px',
+      height: '100px',
+      border: '1px solid black',
+      margin: '10px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: 'white',
+      fontWeight: 'bold'
+    }}>
+      <p>rgb({r}, {g}, {b})<br />{hex}</p>
+    </div>
+  );
+}
+
+export default BoxColor;

src/components/Greetings.jsx

@@ -0,0 +1,27 @@
+function Greetings({ lang, children }) {
+  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={{ border: '1px solid black', margin: '10px', padding: '10px' }}>
+      <p>{greeting} {children}</p>
+    </div>
+  );
+}
+
+export default Greetings;

src/components/IdCard.jsx

@@ -0,0 +1,20 @@
+function IdCard({ lastName, firstName, gender, height, birth, picture }) {
+  return (
+    <div style={{ border: "1px solid black",
+         margin: "10px",
+         padding: "10px",
+         display: "flex",
+         gap: "10px" }}>
+      <img src={picture} alt={firstName} />
+      <div>
+        <p><b>First name:</b> {firstName}</p>
+        <p><b>Last name:</b> {lastName}</p>
+        <p><b>Gender:</b> {gender}</p>
+        <p><b>Height:</b> {height}cm</p>
+        <p><b>Birth:</b> {birth.toDateString()}</p>
+      </div>
+    </div>
+  );
+}
+
+export default IdCard;

src/components/Random.jsx

@@ -0,0 +1,11 @@
+function Random({ min, max }) {
+  const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+
+  return (
+    <div style={{ border: '1px solid black', margin: '10px', padding: '10px' }}>
+      <p>Random value between {min} and {max} =&gt; {randomNumber}</p>
+    </div>
+  );
+}
+
+export default Random;

src/main.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(