FT_RMT_2601_BENEDICTI ANNABELLE

src/App.jsx

@@ -1,9 +1,36 @@
-import "./App.css";
+import './App.css';
+import IdCard from './components/IdCard';
+import Greetings from './components/Greetings';
+import Random from './components/Random';
+import ColorBox 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>
+      <Random min={1} max={6} />
+      <Random min={1} max={100} />
+      <ColorBox r={255} g={0} b={0} />
+      <ColorBox r={128} g={255} b={0} />
+      <ColorBox r={0} g={0} b={255} />
     </div>
   );
 }

src/components/BoxColor.jsx

@@ -0,0 +1,11 @@
+function BoxColor(props) {
+  let newColor = {
+    backgroundColor: `rgb(${props.r}, ${props.g}, ${props.b})`,
+    width: '300px',
+    height: '150px',
+    margin: '20px',
+  };
+
+  return <div style={newColor}></div>;
+}
+export default BoxColor;

src/components/Greetings.jsx

@@ -0,0 +1,15 @@
+function Greetings(props) {
+  const greeting = {
+    de: 'Hallo',
+    en: 'Hello',
+    es: 'Hola',
+    fr: 'Bonjour',
+  };
+
+  return (
+    <p>
+      {greeting[props.lang]} {props.children}
+    </p>
+  );
+}
+export default Greetings;

src/components/IdCard.jsx

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

src/components/Random.jsx

@@ -0,0 +1,7 @@
+function Random(props) {
+  let number =
+    Math.floor(Math.random() * (props.max - props.min + 1)) + props.min;
+
+  return <div>{number}</div>;
+}
+export default Random;

src/main.jsx

@@ -8,5 +8,5 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );