Request Training. done

src/App.css

@@ -36,3 +36,18 @@
     transform: rotate(360deg);
   }
 }
+
+.credit-card-container {
+  display: flex;
+  justify-content: center; /* Center the cards horizontally */
+  gap: 20px; /* Optional: Add space between the cards */
+  margin-top: 20px; /* Optional: Add some space above the card container */
+}
+
+.driver-cards {
+  text-align: center;
+}
+
+.rgb-color-picker-container {
+  text-align: center;
+}

src/App.js

@@ -1,25 +1,139 @@
-import logo from './logo.svg';
-import './App.css';
+  import './App.css';
+  import IdCard from './components/IdCard';
+  import Greetings from './components/Greetings';
+  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';
+  import LikeButton from './components/LikeButton';
+  import ClickablePicture from './components/ClickablePicture';
+  import maxence from './assets/images/maxence.png';
+  import maxenceGlasses from './assets/images/maxence-glasses.png';
+  import Dice from './components/Dice';
+  import Carousel from './components/Carousel';
+  import NumbersTable from './components/NumbersTable';
+  import RGBColorPicker from './components/RGBColorPicker'; // Import the RGBColorPicker
 
-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>
-    </div>
-  );
-}
 
-export default App;
+  function App() {
+    return (
+      <div className="App">
+      <div className="id-card-container">
+      <IdCard
+        firstName='John'
+        lastName='Doe'
+        gender='male'
+        height={178}
+        birth={new Date("1992-07-15")}
+        picture="https://randomuser.me/api/portraits/men/44.jpg"
+      />
+      <IdCard
+        firstName='Obrien'
+        lastName='Delores'
+        gender='female'
+        height={172}
+        birth={new Date("1993-05-12")}
+        picture="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+      </div>  
+      <div className="greetings-container">
+      <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} /> 
+      </div>    
+      <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 className="rating-stars">
+        <Rating>0</Rating>
+        <Rating>1.49</Rating>
+        <Rating>1.5</Rating>
+        <Rating>3</Rating>
+        <Rating>4</Rating>
+        <Rating>5</Rating>
+      </div>
+      <div className="driver-cards">
+      <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>
+        <div className="likeButton">
+        <LikeButton />
+        <LikeButton />
+        </div>
+        <div className="clickable-pic-container">
+        <ClickablePicture img={maxence} imgClicked={maxenceGlasses} />
+        </div>
+        <div className="dice-container">
+          <Dice />
+        </div>
+        <div className="carousel-container">
+        <Carousel
+          images={[
+            'https://randomuser.me/api/portraits/women/1.jpg',
+            'https://randomuser.me/api/portraits/men/1.jpg',
+            'https://randomuser.me/api/portraits/women/2.jpg',
+            'https://randomuser.me/api/portraits/men/2.jpg'
+          ]}
+        />
+        <div className="numbers-table-container"> 
+        <NumbersTable limit={12} />
+        </div>
+        <div className="rgb-color-picker-container">
+        <RGBColorPicker />
+        </div>
+        </div>
+      </div>
+    );
+  }
+
+  export default App;

src/components/BoxColor.css

@@ -0,0 +1,20 @@
+.box-color {
+    width: 80%; /* Adjust width as needed */
+    height: 150px; /* Adjust height as needed */
+    display: flex;
+    align-items: center;
+    flex-direction: column; /* Stack text vertically */
+    justify-content: center;
+    color: white;
+    font-family: Arial, sans-serif;
+    border: 2px solid black; /* Optional: border to define the box */
+    margin-bottom: 20px;
+    margin-left: 10px;
+  }
+
+  .box-color p {
+    margin: 0;
+    font-size: 30px;
+    /* Optional: adjust spacing between lines */
+    line-height: 1.5;
+  }

src/components/BoxColor.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import './BoxColor.css';
+
+// Function to convert RGB to Hex
+const rgbToHex = (r, g, b) => {
+    const toHex = (num) => {
+      const hex = num.toString(16);
+      return hex.length === 1 ? '0' + hex : hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toLowerCase();
+  };
+
+const BoxColor = ({ r, g, b }) => {
+  // Ensure the values are within the valid range
+  const clampedR = Math.max(0, Math.min(255, r));
+  const clampedG = Math.max(0, Math.min(255, g));
+  const clampedB = Math.max(0, Math.min(255, b));
+
+  // Create the RGB color string
+  const rgbColor = `rgb(${clampedR}, ${clampedG}, ${clampedB})`;
+
+  // Create the Hex color string
+  const hexColor = rgbToHex(clampedR, clampedG, clampedB);
+
+  // Determine text color based on the RGB value
+  const textColor = (clampedR === 128 && clampedG === 255 && clampedB === 0) ? 'black' : 'white';
+
+  return (
+    <div className="box-color" style={{ backgroundColor: rgbColor }}>
+       <p style={{ color: textColor }}>{rgbColor}</p>
+       <p style={{ color: textColor }}>{hexColor}</p>
+    </div>
+  );
+};
+
+export default BoxColor;

src/components/Carousel.css

@@ -0,0 +1,26 @@
+.carousel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .carousel-image {
+    width: 300px;
+    height: 200px;
+    object-fit: cover;
+    margin: 0 10px;
+  }
+
+  .carousel-button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+  }
+
+  .carousel-button:hover {
+    background-color: #0056b3;
+  }
+

src/components/Carousel.js

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+
+const Carousel = ({ images }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const goToPrevious = () => {
+    setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
+  };
+
+  const goToNext = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+  };
+
+  return (
+    <div className="carousel">
+      <button onClick={goToPrevious} className="carousel-button">Left</button>
+      <img src={images[currentIndex]} alt="carousel" className="carousel-image" />
+      <button onClick={goToNext} className="carousel-button">Right</button>
+    </div>
+  );
+};
+
+export default Carousel;

src/components/ClickablePicture.js

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

src/components/CreditCard.css

@@ -0,0 +1,44 @@
+.credit-card {
+    width: 300px;
+    height: 130px;
+    border-radius: 10px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-family: Arial, sans-serif;
+    margin: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-logo {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.card-logo img {
+    margin-top: -15px;
+    width: 50px;
+    height: auto;
+}
+
+.card-number {
+    font-size: 30px;
+    letter-spacing: 2px;
+    margin-top: -28px;
+}
+
+.card-info {
+    font-size: 14px;
+    text-align: left;
+}
+
+.bank {
+    margin-left: 30px;
+}
+
+.owner {
+    display: flex;
+    margin-top: 20px;  /* Optional: Adjust the spacing above the owner text */
+    font-size: 14px;    
+}