done

src/App.css

@@ -7,6 +7,15 @@
   pointer-events: none;
 }
 
+.card-container {
+  display: flex;
+  flex-wrap: wrap; 
+  gap: 20px; 
+  justify-content: center; 
+  padding: 20px; 
+}
+
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;

src/App.js

@@ -1,23 +1,104 @@
-import logo from './logo.svg';
-import './App.css';
+import IdCard from "./components/IdCard";
+import Greetings from "./components/Greetings";
+import Random from "./components/Randoms";
+import BoxColor from "./components/BoxColor";
+import CreditCard from "./components/CreditCard";
+import Rating from "./components/Rating";
+import DriverCard from "./components/DriverCard";
+import LikeButton from "./components/LikeButton";
+import ClickablePicture from "./components/ClickablePicture";
+import picture from '../src/assets/images/maxence.png'
+import picture2 from '../src/assets/images/maxence-glasses.png'
+import "./App.css";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <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>
+      <Greetings lang="en">John</Greetings>
+      <Greetings lang="es">Carlos</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} />
+      <div className="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>
+      <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",
+        }}
+      />
+      <LikeButton />
+      <ClickablePicture
+        img={picture}
+        imgClicked={picture2}
+      />
     </div>
   );
 }

src/components/BoxColor.js

@@ -0,0 +1,22 @@
+export default function BoxColor(props) {
+    const { r, g, b } = props;
+    const isValidColor = (value) => value >= 0 && value <= 255;
+    const validatedR = isValidColor(r) ? r : 0;
+    const validatedG = isValidColor(g) ? g : 0;
+    const validatedB = isValidColor(b) ? b : 0;
+
+    const style = {
+        backgroundColor: `rgb(${validatedR}, ${validatedG}, ${validatedB})`,
+        color: (validatedR + validatedG + validatedB) > 382 ? 'black' : 'white', 
+        padding: '20px',
+        borderRadius: '8px',
+        textAlign: 'center',
+        marginBottom: '10px',
+    };
+
+    return (
+        <div style={style}>
+            rgb({validatedR}, {validatedG}, {validatedB})
+        </div>
+    );
+}

src/components/ClickablePicture.js

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+export default function ClickablePicture({ img, imgClicked }) {
+    const [isClicked, setIsClicked] = useState(false);
+
+    const handleClick = () => {
+        setIsClicked(!isClicked);
+    };
+
+    return (
+        <img
+            src={isClicked ? imgClicked : img}
+            alt="Clickable"
+            style={{ cursor: 'pointer', width: '200px', height: 'auto' }}
+            onClick={handleClick}
+        />
+    );
+}

src/components/CreditCard.js

@@ -0,0 +1,66 @@
+export default function CreditCard(props) {
+    const {
+        type,
+        number,
+        expirationMonth,
+        expirationYear,
+        bank,
+        owner,
+        bgColor,
+        color
+    } = props;
+
+    const lastFourDigits = number.slice(-4);
+
+    const formattedMonth = expirationMonth.toString().padStart(2, '0');
+    const formattedYear = expirationYear.toString().slice(-2);
+
+    const cardStyle = {
+        backgroundColor: bgColor,
+        color: color,
+        width: '300px',
+        height: '180px',
+        borderRadius: '10px',
+        padding: '20px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        fontFamily: 'Arial, sans-serif',
+        color: color,
+        position: 'relative'
+    };
+
+    const logoStyle = {
+        position: 'absolute',
+        top: '10px',
+        right: '10px',
+        fontSize: '24px'
+    };
+
+    const cardNumberStyle = {
+        fontSize: '24px',
+        letterSpacing: '2px'
+    };
+
+    const infoStyle = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        fontSize: '14px'
+    };
+
+    return (
+        <div style={cardStyle}>
+            <div style={logoStyle}>
+                {type === 'Visa' ? 'V' : 'M'}
+            </div>
+            <div style={cardNumberStyle}>
+                **** **** **** {lastFourDigits}
+            </div>
+            <div style={infoStyle}>
+                <div>{bank}</div>
+                <div>{formattedMonth}/{formattedYear}</div>
+            </div>
+            <div>{owner}</div>
+        </div>
+    );
+}

src/components/DriverCard.js

@@ -0,0 +1,59 @@
+export default function DriverCard({ name, rating, img, car }) {
+  // Ensure rating is between 0 and 5
+  const validatedRating = Math.max(0, Math.min(5, parseFloat(rating)));
+
+  // Format the rating to one decimal place
+  const formattedRating = validatedRating.toFixed(1);
+
+  // Card styles
+  const cardStyle = {
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: "#f8f9fa",
+    borderRadius: "10px",
+    padding: "20px",
+    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+    width: "400px",
+    margin: "20px 0",
+  };
+
+  const imgStyle = {
+    borderRadius: "50%",
+    width: "80px",
+    height: "80px",
+    marginRight: "20px",
+  };
+
+  const textStyle = {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+  };
+
+  const nameStyle = {
+    fontSize: "18px",
+    fontWeight: "bold",
+  };
+
+  const ratingStyle = {
+    color: "#f39c12",
+  };
+
+  const carStyle = {
+    fontSize: "14px",
+    color: "#333",
+  };
+
+  return (
+    <div style={cardStyle}>
+      <img src={img} alt={`${name}`} style={imgStyle} />
+      <div style={textStyle}>
+        <div style={nameStyle}>{name}</div>
+        <div style={ratingStyle}>{formattedRating} ★</div>
+        <div style={carStyle}>
+          {car.model} - {car.licensePlate}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Greetings.js

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

src/components/IdCard.css

@@ -0,0 +1,20 @@
+.id-card {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 16px;
+    background-color: #f9f9f9;
+}
+
+.id-card-picture {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    margin-right: 16px;
+}
+
+.id-card-info p {
+    margin: 4px 0;
+}

src/components/IdCard.js

@@ -0,0 +1,30 @@
+import './IdCard.css';
+export default function IdCard(props) {
+  const { lastName, firstName, gender, height, birth, picture } = props;
+  return (
+    <div className="id-card">
+      <img
+        src={picture}
+        alt={`${firstName} ${lastName}`}
+        className="id-card-picture"
+      />
+      <div className="id-card-info">
+        <p>
+          <strong>First Name:</strong> {firstName}
+        </p>
+        <p>
+          <strong>Last Name:</strong> {lastName}
+        </p>
+        <p>
+          <strong>Gender:</strong> {gender}
+        </p>
+        <p>
+          <strong>Height:</strong> {height} cm
+        </p>
+        <p>
+          <strong>Birth:</strong> {birth.toDateString()}
+        </p>
+      </div>
+    </div>
+  );
+}