lab done

src/App.css

@@ -0,0 +1,83 @@
+.idcard {
+  display: flex;
+  width: 500px;
+  height: 200px;
+  border: 1px solid #000;
+  padding: 10px;
+  margin: 20px 10px;
+  text-align: left;
+  gap: 10px;
+}
+
+.greetings,
+.random,
+.rating {
+  display: flex;
+  width: 500px;
+  height: 50px;
+  border: 1px solid #000;
+  padding: 10px;
+  margin: 20px 10px;
+}
+
+.credit-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 400px;
+  height: 200px;
+  border: none;
+  border-radius: 10px;
+  padding: 10px;
+  margin: 20px 10px;
+  text-align: left;
+  gap: 10px;
+}
+
+.card-type {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px;
+}
+
+.card-number {
+  font-size: 2em;
+  letter-spacing: 2px;
+  padding-left: 20px;
+}
+
+.card-details {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 20px;
+  font-size: 0.9em;
+  align-items: flex-end;
+}
+
+.card-owner {
+  flex-basis: 100%;
+  font-size: 1.2em;
+  font-weight: bold;
+  padding-bottom: 15px;
+}
+
+.driver-card {
+  background-color: blue;
+  color: white;
+  display: flex;
+  align-items: center;
+  width: 400px;
+  height: 150px;
+  border-radius: 10px;
+  padding: 10px 20px;
+  margin: 20px 10px;
+  text-align: left;
+  gap: 20px;
+}
+
+.driver-img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+}

src/App.jsx

@@ -1,9 +1,102 @@
 import "./App.css";
+import Greetings from "./components/Greetings";
+import IdCard from "./components/IdCard";
+import Random from "./components/Random";
+import BoxColor from "./components/BoxColor";
+import CreditCard from "./components/CreditCard";
+import Rating from "./components/Rating";
+import DriverCard from "./components/DriverCard";
 
 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} />
+
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
+
+      <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>
   );
 }

src/components/BoxColor.jsx

@@ -0,0 +1,17 @@
+const BoxColor = (props) => {
+  const { r, g, b } = props;
+  const backgroundColor = `rgb(${r}, ${g}, ${b})`;
+  const hex =
+    "#" +
+    [r, g, b]
+      .map((x) => x.toString(16).padStart(2, "0"))
+      .join("")
+      .toUpperCase();
+
+  return (
+    <div style={{ backgroundColor, width: "500px", height: "100px" }}>
+      {backgroundColor} {hex}
+    </div>
+  );
+};
+export default BoxColor;

src/components/CreditCard.jsx

@@ -0,0 +1,41 @@
+import visa from "../assets/images/visa.png";
+import mastercard from "../assets/images/master-card.svg";
+
+const CreditCard = (props) => {
+  const {
+    type,
+    number,
+    expirationMonth,
+    expirationYear,
+    bank,
+    owner,
+    bgColor,
+    color,
+  } = props;
+
+  const maskedNumber = "•••• •••• •••• " + number.slice(-4);
+
+  return (
+    <div
+      className="credit-card"
+      style={{ backgroundColor: bgColor, color: color }}
+    >
+      <div className="card-type">
+        <img
+          src={type === "Visa" ? visa : mastercard}
+          alt={type}
+          style={{ width: "50px" }}
+        />
+      </div>
+      <div className="card-number">{maskedNumber}</div>
+      <div className="card-details">
+        <span>
+          Expires {expirationMonth}/{expirationYear}
+        </span>
+        <span>{bank}</span>
+        <span className="card-owner">{owner}</span>
+      </div>
+    </div>
+  );
+};
+export default CreditCard;

src/components/DriverCard.jsx

@@ -0,0 +1,22 @@
+const DriverCard = (props) => {
+  const { name, rating, img, car } = props;
+
+  return (
+    <div>
+      <div className="driver-card">
+        <img src={img} alt={name} className="driver-img" />
+        <div className="driver-info">
+          <h2>{name}</h2>
+          <p>
+            {"★".repeat(Math.round(rating)) +
+              "☆".repeat(5 - Math.round(rating))}
+          </p>
+          <p>
+            {car.model} - {car.licensePlate}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default DriverCard;

src/components/Greetings.jsx

@@ -0,0 +1,15 @@
+const Greetings = (props) => {
+  const { lang, children } = props;
+  const greetings = {
+    en: "Hello",
+    fr: "Bonjour",
+    es: "Hola",
+    de: "Hallo",
+  };
+  return (
+    <div className="greetings">
+      {greetings[lang]} {children}
+    </div>
+  );
+};
+export default Greetings;

src/components/IdCard.jsx

@@ -0,0 +1,27 @@
+const IdCard = (props) => {
+  const { lastName, firstName, gender, height, birth, picture } = props;
+
+  return (
+    <div className="idcard">
+      <img src={picture} alt={`${firstName} ${lastName}`} />
+      <div>
+        <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;

src/components/Random.jsx

@@ -0,0 +1,10 @@
+const Random = (props) => {
+  const { min, max } = props;
+  return (
+    <div className="random">
+      Random number between {min} and {max}:{" "}
+      {Math.floor(Math.random() * (max - min + 1)) + min}
+    </div>
+  );
+};
+export default Random;

src/components/Rating.jsx

@@ -0,0 +1,7 @@
+const Rating = ({ children }) => {
+  const roundedRating = Math.round(children);
+  const stars = "★".repeat(roundedRating) + "☆".repeat(5 - roundedRating);
+
+  return <div className="rating">{stars}</div>;
+};
+export default Rating;