From 31b0199613487ef589acf19808728178a0651516 Mon Sep 17 00:00:00 2001
From: RaquelMelow <raquelmelo949@gmail.com>
Date: Sun, 31 Mar 2024 00:24:22 +0000
Subject: [PATCH 1/2] Done 1-5

---
 src/App.jsx                                   | 69 +++++++++++++++++++
 src/assets/components/BoxColor/BoxColor.jsx   | 17 +++++
 src/assets/components/Card/Card.css           | 17 +++++
 src/assets/components/Card/Card.jsx           | 22 ++++++
 .../components/CreditCard/CreditCard.css      | 44 ++++++++++++
 .../components/CreditCard/CreditCard.jsx      | 46 +++++++++++++
 src/assets/components/Greetings/Greetings.css |  7 ++
 src/assets/components/Greetings/Greetings.jsx | 32 +++++++++
 src/assets/components/Random/Random.jsx       | 12 ++++
 9 files changed, 266 insertions(+)
 create mode 100644 src/assets/components/BoxColor/BoxColor.jsx
 create mode 100644 src/assets/components/Card/Card.css
 create mode 100644 src/assets/components/Card/Card.jsx
 create mode 100644 src/assets/components/CreditCard/CreditCard.css
 create mode 100644 src/assets/components/CreditCard/CreditCard.jsx
 create mode 100644 src/assets/components/Greetings/Greetings.css
 create mode 100644 src/assets/components/Greetings/Greetings.jsx
 create mode 100644 src/assets/components/Random/Random.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 98d0f49aa..dc0bde839 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,78 @@
 import "./App.css";
+import IdCard from "../src/assets/components/Card/Card";
+import Greetings from "./assets/components/Greetings/Greetings";
+import Random from "./assets/components/Random/Random";
+import BoxColor from "./assets/components/BoxColor/BoxColor";
+import CreditCard from "./assets/components/CreditCard/CreditCard"; // Import CreditCard component
 
 function App() {
   return (
     <div className="App">
       <h1> LAB | React Training</h1>
+      <h1>IdCards</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="swe">Ludwig</Greetings>
+      <Greetings lang="fr">François</Greetings>
+      <h1>Random Number</h1>
+      <Random min={1} max={6} />
+      <Random min={1} max={100} />
+
+      <h1>BoxColor</h1>
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
+
+      <h1>Credit Card</h1>
+      <div className="credit-card-container">
+      <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" 
+      />
+      </div>
+
     </div>
   );
 }
diff --git a/src/assets/components/BoxColor/BoxColor.jsx b/src/assets/components/BoxColor/BoxColor.jsx
new file mode 100644
index 000000000..08ea4f8f1
--- /dev/null
+++ b/src/assets/components/BoxColor/BoxColor.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import '../Greetings/Greetings.css'
+
+function BoxColor ({ r, g, b}) {
+   
+    const clamp = (value) => Math.min(255, Math.max(0, value));
+
+    const backgroundColor = `rgb(${clamp(r)}, ${clamp(g)}, ${clamp(b)})`;
+
+    return  (
+        <div className="text-box" style={{ backgroundColor }}>
+            <p>RGB: {r}, {g}, {b}</p>
+        </div>
+      );
+}
+
+export default BoxColor;
diff --git a/src/assets/components/Card/Card.css b/src/assets/components/Card/Card.css
new file mode 100644
index 000000000..06b7ecba8
--- /dev/null
+++ b/src/assets/components/Card/Card.css
@@ -0,0 +1,17 @@
+.id-card {
+    display: flex;
+    border: 3px solid black;
+    padding: 5px;
+    margin: 10px;
+  }
+  
+ .info-card {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin-left: 5px;
+ }
+
+ .info-card p {
+    margin: 5px 0; 
+  }
\ No newline at end of file
diff --git a/src/assets/components/Card/Card.jsx b/src/assets/components/Card/Card.jsx
new file mode 100644
index 000000000..dda8bbac4
--- /dev/null
+++ b/src/assets/components/Card/Card.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import './Card.css';
+
+function IdCard (props) {
+ const { lastName, firstName, gender, height, birth, picture } = props;
+    return (
+        <div className="id-card">
+            <div className="avatar">
+                <img src={picture} alt={`${firstName} ${lastName}`} />   
+            </div>         
+            <div className="info-card">
+                <p><strong>Last Name:</strong> {lastName}</p>
+                <p><strong>First Name:</strong> {firstName}</p>
+                <p><strong>Gender:</strong> {gender}</p>
+                <p><strong>Height:</strong> {height} cm</p>
+                <p><strong>Birth:</strong> {birth.toDateString()}</p>
+            </div>
+        </div>
+    );
+};
+
+export default IdCard;
\ No newline at end of file
diff --git a/src/assets/components/CreditCard/CreditCard.css b/src/assets/components/CreditCard/CreditCard.css
new file mode 100644
index 000000000..2208dc22d
--- /dev/null
+++ b/src/assets/components/CreditCard/CreditCard.css
@@ -0,0 +1,44 @@
+.credit-card {
+    width: 300px;
+    height: 180px;
+    border-radius: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  
+  .card-logo {
+    width: 60px;
+    margin-bottom: 10px;
+    margin-left: 220px; 
+  }
+  
+  .card-number {
+    font-size: 30px;
+  }
+  
+  .card-info {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .card-info-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+  
+  .info-label {
+    font-weight: bold;
+  }
+  
+  .info-value {
+    font-style: italic;
+  }
+  
+  .credit-card-container {
+    display: flex;
+    margin: 20px;
+}
diff --git a/src/assets/components/CreditCard/CreditCard.jsx b/src/assets/components/CreditCard/CreditCard.jsx
new file mode 100644
index 000000000..89cc58053
--- /dev/null
+++ b/src/assets/components/CreditCard/CreditCard.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import './CreditCard.css';
+import visaLogo from '../../images/visa.png';
+import masterCardLogo from '../../images/master-card.svg';
+
+function CreditCard({
+    type,
+    number,
+    expirationMonth,
+    expirationYear,
+    bank,
+    owner,
+    bgColor,
+    color,
+}) {
+    const cardLogo = type === 'Visa' ? visaLogo : masterCardLogo;
+    const lastFourDigits = number.slice(-4);
+
+    return (
+        <div className="credit-card-container">
+            <div className="credit-card" style={{ backgroundColor: bgColor, color: color }}>
+                <img src={cardLogo} alt="Card Logo" className="card-logo" />
+                <div className="card-number">•••• •••• •••• {lastFourDigits}</div>
+                <div className="card-info">
+                    <div className="card-info-row">
+                        <span className="info-label">Expires</span>
+                        <span className="info-value">
+                            {expirationMonth.toString().padStart(2, '0')}/{expirationYear.toString().slice(-2)}
+                        </span>
+                    </div>
+                    <div className="card-info-row">
+                        <span className="info-label">Bank</span>
+                        <span className="info-value">{bank}</span>
+                    </div>
+                    <div className="card-info-row">
+                        <span className="info-label">Owner</span>
+                        <span className="info-value">{owner}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default CreditCard;
+
diff --git a/src/assets/components/Greetings/Greetings.css b/src/assets/components/Greetings/Greetings.css
new file mode 100644
index 000000000..78e6f5367
--- /dev/null
+++ b/src/assets/components/Greetings/Greetings.css
@@ -0,0 +1,7 @@
+.text-box {
+    display: flex;
+    border: 3px solid black;
+    padding: 5px;
+    margin: 10px;
+  }
+  
\ No newline at end of file
diff --git a/src/assets/components/Greetings/Greetings.jsx b/src/assets/components/Greetings/Greetings.jsx
new file mode 100644
index 000000000..915a24eb8
--- /dev/null
+++ b/src/assets/components/Greetings/Greetings.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import './Greetings.css';
+
+function Greetings (props) {
+    let greeting = "";
+    const { lang, children } = props;
+    switch (lang) {
+        case "de":
+            greeting = "Hallo";
+            break;
+        case "en": 
+            greeting = "Hello";
+            break;
+        case "es":
+            greeting = "Hola";
+            break;
+        case "fr":
+            greeting = "Bonjour";
+            break;
+        default:
+            greeting = "Sorry, I dont know your language";
+    }
+
+    return (
+
+        <div className="text-box">
+            <p>{greeting} {children}</p>
+        </div>
+    )
+}
+
+export default Greetings;
\ No newline at end of file
diff --git a/src/assets/components/Random/Random.jsx b/src/assets/components/Random/Random.jsx
new file mode 100644
index 000000000..6b6ba2c44
--- /dev/null
+++ b/src/assets/components/Random/Random.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import '../Greetings/Greetings.css'
+function Random ({ min, max }) {
+    const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
+    return  (
+        <div className="text-box">
+          <p>Random Number between {min} and {max} is {randomNum}</p>
+        </div>
+      );
+}
+
+export default Random;

From a3b98a48bb24fffad1f3d97be5d435035ea5f64c Mon Sep 17 00:00:00 2001
From: RaquelMelow <raquelmelo949@gmail.com>
Date: Mon, 1 Apr 2024 00:07:55 +0100
Subject: [PATCH 2/2] Done 1-7

---
 src/App.jsx                                   | 138 +++++++++++-------
 .../components/DiverCard/DriverCard.css       |  29 ++++
 .../components/DiverCard/DriverCard.jsx       |  34 +++++
 src/assets/components/Greetings/Greetings.jsx |   2 +-
 src/assets/components/Rating/Rating.jsx       |  24 +++
 5 files changed, 172 insertions(+), 55 deletions(-)
 create mode 100644 src/assets/components/DiverCard/DriverCard.css
 create mode 100644 src/assets/components/DiverCard/DriverCard.jsx
 create mode 100644 src/assets/components/Rating/Rating.jsx

diff --git a/src/App.jsx b/src/App.jsx
index dc0bde839..676205c50 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,77 +3,107 @@ import IdCard from "../src/assets/components/Card/Card";
 import Greetings from "./assets/components/Greetings/Greetings";
 import Random from "./assets/components/Random/Random";
 import BoxColor from "./assets/components/BoxColor/BoxColor";
-import CreditCard from "./assets/components/CreditCard/CreditCard"; // Import CreditCard component
-
+import CreditCard from "./assets/components/CreditCard/CreditCard"; 
+import Rating from "./assets/components/Rating/Rating";
+import DriverCard from "./assets/components/DiverCard/DriverCard";
 function App() {
   return (
     <div className="App">
       <h1> LAB | React Training</h1>
       <h1>IdCards</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='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"
-      />
+        <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="swe">Ludwig</Greetings>
-      <Greetings lang="fr">François</Greetings>
+        <Greetings lang="swe">Ludwig</Greetings>
+        <Greetings lang="fr">François</Greetings>
+
       <h1>Random Number</h1>
-      <Random min={1} max={6} />
-      <Random min={1} max={100} />
+        <Random min={1} max={6} />
+        <Random min={1} max={100} />
 
       <h1>BoxColor</h1>
-      <BoxColor r={255} g={0} b={0} />
-      <BoxColor r={128} g={255} b={0} />
+        <BoxColor r={255} g={0} b={0} />
+        <BoxColor r={128} g={255} b={0} />
 
       <h1>Credit Card</h1>
       <div className="credit-card-container">
-      <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" 
-      />
+        <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" 
+        />
       </div>
+      <h1>Rating</h1>
+        <Rating>0</Rating>
+        <Rating>1.49</Rating>
+        <Rating>1.5</Rating>
+        <Rating>3</Rating>
+        <Rating>4</Rating>
+        <Rating>5</Rating>
+
+    <h1>Drive Card</h1>
+    <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/assets/components/DiverCard/DriverCard.css b/src/assets/components/DiverCard/DriverCard.css
new file mode 100644
index 000000000..992c9473e
--- /dev/null
+++ b/src/assets/components/DiverCard/DriverCard.css
@@ -0,0 +1,29 @@
+.driver-card {
+    display: flex;
+    padding: 5px;
+    margin: 10px;
+    background-color: rgb(111, 111, 236);
+    color: white;
+    border-radius: 10px;
+    width: 500px;
+    align-items: center;
+}
+  
+.info-driver {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin-left: 5px;
+}
+
+.info-driver p {
+    margin: 5px 0; 
+}
+
+.driver-card img {
+    margin-left: 100px;
+    padding: 10px;
+    width: 100px;
+    height: 100px;
+    border-radius: 100%;
+}
\ No newline at end of file
diff --git a/src/assets/components/DiverCard/DriverCard.jsx b/src/assets/components/DiverCard/DriverCard.jsx
new file mode 100644
index 000000000..d0f78950f
--- /dev/null
+++ b/src/assets/components/DiverCard/DriverCard.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import './DriverCard.css';
+
+const DriverCard = (props) => {
+    const { name, rating, img, car } = props;
+    const value = Math.round(rating);
+    const stars = [];
+
+    for (let i = 0; i < 5; i++) {
+        if (i < value) {
+            stars.push('★');
+        } else {
+            stars.push('☆');
+        }
+    }
+
+    return (
+        <div className='driver-card'>
+            <img src={img} alt={name} />
+            <div className='info-driver'>
+                <p><strong>{name}</strong></p>
+                <div>
+                    {stars.map((star, index) => (
+                        <span key={index}>{star}</span>
+                    ))}
+                </div>
+                <p>{car.model} - {car.licensePlate}</p>
+            </div>
+        </div>
+    );
+};
+
+export default DriverCard;
+
diff --git a/src/assets/components/Greetings/Greetings.jsx b/src/assets/components/Greetings/Greetings.jsx
index 915a24eb8..a51516d6f 100644
--- a/src/assets/components/Greetings/Greetings.jsx
+++ b/src/assets/components/Greetings/Greetings.jsx
@@ -18,7 +18,7 @@ function Greetings (props) {
             greeting = "Bonjour";
             break;
         default:
-            greeting = "Sorry, I dont know your language";
+            greeting = "Sorry, I don't know your language";
     }
 
     return (
diff --git a/src/assets/components/Rating/Rating.jsx b/src/assets/components/Rating/Rating.jsx
new file mode 100644
index 000000000..b3eaea717
--- /dev/null
+++ b/src/assets/components/Rating/Rating.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+function Rating({ children }) {
+    const value = Math.round(children);
+    const stars = [];
+
+    for (let i = 0; i < 5; i++) {
+        if (i < value) {
+            stars.push('★');
+        } else {
+            stars.push('☆');
+        }
+    }
+
+    return (
+        <div className='rating'>
+            {stars.map((star, index) => (
+                <span key={index}>{star}</span>
+            ))}
+        </div>
+    );
+}
+
+export default Rating;