Raul Carrasco

src/App.jsx

@@ -1,9 +1,40 @@
 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="Smith"
+      firsttName="Alice"
+      gender="female"
+      height={160}
+      birth={new Date("1990-12-28")}
+      picture="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+
+      <IdCard 
+      lastName="Doe"
+      firsttName="John"
+      gender="male"
+      height={178}
+      birth={new Date("1990-12-28")}
+      picture="https://randomuser.me/api/portraits/men/44.jpg"
+      />
+
+      <Greetings lang="es">Raul</Greetings>
+
+      <Random min={1} max={6} />
+
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
+
     </div>
   );
 }

src/components/BoxColor.jsx

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

src/components/CreditCard.jsx

@@ -0,0 +1,5 @@
+
+
+function CreditCard(props) {
+
+}

src/components/Greetings.jsx

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

src/components/Idcard.jsx

@@ -0,0 +1,18 @@
+
+function IdCard(props) {
+
+    return (
+        <div>
+            <img src={props.picture} alt={props.firstName}/>
+            <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,14 @@
+
+
+function Random(props) {
+    const randomNumber = Math.floor(Math.random()* (props.max - props.min + 1)) + props.min;
+
+
+    return (
+        <div>
+            Random value between {props.min} and {props.max} {"=>"} {randomNumber}
+        </div>
+    );
+}
+
+export default Random;

src/main.jsx

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