ironhack-labs · rafacruiz · Dec 1, 2025 · Dec 1, 2025 · Dec 1, 2025 · Dec 2, 2025
diff --git a/index.html b/index.html
@@ -4,10 +4,24 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link 
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
+      rel="stylesheet" 
+      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 
+      crossorigin="anonymous">
+
     <title>Vite + React</title>
+
   </head>
   <body>
     <div id="root"></div>
+
+    <script 
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" 
+      integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" 
+      crossorigin="anonymous"></script>
+
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,8 @@
+
+.card-color {
+    background-color: #445eb4;
+}
+
+.text-car {
+    font-size: 15px;
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,9 +1,101 @@
 import "./App.css";
 
+import IdCard from "./components/id-card";
+import Greetings from "./components/greetings";
+import Random from "./components/random";
+import CreditCard from "./components/credit-card";
+import Rating from "./components/rating";
+import DriverCard from "./components/driver-card";
+
 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}/>
+
+      <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" 
+      />
+
+      <Rating>0</Rating>
+      <Rating>1.49</Rating>
+      <Rating>1.5</Rating>
+      <Rating>3</Rating>
+      <Rating>4</Rating>
+      <Rating>5</Rating>
+
+      <DriverCard
+        name="Travis Kalanick"
+        rating={4.2}
+        img="https://si.wsj.net/public/resources/images/BN-TY647_37gql_OR_20170621052140.jpg?width=620&height=428"
+        car={{
+          model: "Toyota Corolla Altis",
+          licensePlate: "CO42DE"
+        }}
+      />
+
+      <DriverCard
+        name="Dara Khosrowshahi"
+        rating={4.9}
+        img="https://ubernewsroomapi.10upcdn.com/wp-content/uploads/2017/09/Dara_ELT_Newsroom_1000px.jpg"
+        car={{
+          model: "Audi A3",
+          licensePlate: "BE33ER"
+        }}
+      />
+
     </div>
   );
 }

diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx
@@ -0,0 +1,30 @@
+
+function language (lang) {
+    let hi = '';
+    switch (lang) {
+        case 'de':
+            hi = 'Hallo';
+            break;
+        case 'en':
+            hi = 'Hello';          
+            break;
+        case 'es':
+            hi = 'Hola';
+            break;
+        case 'fr':
+            hi = 'Bonjour';
+            break;
+    }
+
+    return hi;
+}
+
+function Greetings ({ lang, children }) {
+    return (
+        <div className="d-flex p-2 border border-dark my-2 mx-2">
+            { language(lang) } { children }
+        </div>
+    );
+}
+
+export default Greetings;
diff --git a/src/components/Random.jsx b/src/components/Random.jsx
@@ -0,0 +1,14 @@
+
+function getRandomArbitrary(min, max) {
+    return Math.random() * (max - min) + min;
+}
+
+function Random ({ min, max }) {
+    return (
+        <div className="d-flex p-2 border border-dark my-2 mx-2">
+            {`Random value between ${ min } and ${ max } => ${getRandomArbitrary(min, max).toFixed(0)}`}
+        </div>
+    );
+}
+
+export default Random;
diff --git a/src/components/credit-card.jsx b/src/components/credit-card.jsx
@@ -0,0 +1,64 @@
+
+import Visa from '../assets/images/visa.png';
+import Master from '../assets/images/master-card.svg';
+
+function logo (type) {
+    let image = '';
+
+    switch (type) {
+        case 'Visa':
+            image = Visa;
+            break;
+        case 'Master Card':
+            image = Master;
+            break;
+    }
+
+    return image;
+}
+
+function numCard (number) {
+    return number.replace(/\d(?=\d{4})/g, '•')
+                .replace(/(.{4})/g, '$1 ')
+}
+
+
+function CreditCard ({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color }) {
+    return (
+        <div className="card ms-2 mb-2" 
+            style={{ 
+                    width:`18rem`, 
+                    height: `10rem`, 
+                    backgroundColor: bgColor,
+                    color }}>
+
+            <div className='d-flex justify-content-end m-3'>
+                <img src={logo(type)}
+                    style={{ 
+                        width:`43px`, 
+                        height: `20px`
+                    }}
+                />
+            </div>
+
+            <div className='d-flex justify-content-center'>
+                <span className={`text-${color} fs-2 fw-normal`}>{ numCard(number) }</span>
+            </div>
+
+            <div className='mt-3 ms-3 lh-1 fw-normal'
+                style={{ fontSize: `14px`}}> 
+
+                <div className='d-flex justify-content-start'>
+                    <span> Expire { expirationMonth }/{expirationYear} </span> 
+                    <span className='ms-3'> {bank} </span>                
+                </div>
+
+                <div className=''>
+                    <span> {owner} </span>
+                </div>
+            </div>    
+        </div>
+    );
+}
+
+export default CreditCard;
diff --git a/src/components/driver-card.jsx b/src/components/driver-card.jsx
@@ -0,0 +1,27 @@
+
+import Rating from "./rating";
+
+function DriverCard (props) {
+
+    return (
+        <div className="d-flex p-2 border card-color rounded col-8 my-2 mx-5">
+            <div className="d-flex justify-content-end col-6">
+                <img 
+                src={ props.img } 
+                className="rounded-circle" 
+                style={{ 
+                    width:`110px`, 
+                    height: `110px`
+                }}></img>
+            </div>
+
+            <div className="d-flex flex-column col-4 mx-3 text-white">
+                <p className="mt-2 mb-0 fs-4 fw-medium"> { props.name } </p>
+                <span className="fs-3"><Rating>{ props.rating }</Rating></span>
+                <span className="fw-light text-car"> { props.car.model } - { props.car.licensePlate } </span>
+            </div>
+        </div>
+    );
+}
+
+export default DriverCard;
diff --git a/src/components/id-card.jsx b/src/components/id-card.jsx
@@ -0,0 +1,20 @@
+
+function IdCard ({ lastName, firstName, gender, height, birth, picture}) {
+
+    return (
+        <div className="d-flex p-2 border border-dark my-2 mx-2">
+            <div className="d-flex flex-row">
+                <img src={ picture } className="float-start" alt="..."></img>
+                <div className="ms-2">
+                    <p className="mb-0"><strong>First name:</strong> { firstName }</p>
+                    <p className="mb-0"><strong>Last name:</strong> { lastName }</p>
+                    <p className="mb-0"><strong>Gender:</strong> { gender }</p>
+                    <p className="mb-0"><strong>Height:</strong> { (height / 100).toFixed(2) }m</p>
+                    <p className="mb-0"><strong>Birth:</strong> { birth.toLocaleDateString() }</p>    
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default IdCard;