done

src/App.js

@@ -1,23 +1,176 @@
-import logo from './logo.svg';
+
 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 Dice from './components/Dice';
+import Carousel from './components/Carousel';
+import NumbersTable from './components/NumbersTable';
+import RGBColorPicker from './components/RGBColorPicker';
+import SingleColorPicker from './components/SingleColorPicker';
 
 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>
+
+<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"
+	}}
+/>
+
+
+<LikeButton />
+
+
+<ClickablePicture
+
+img='./assets/images/maxence.png'
+
+imgClicked='./assets/images/maxence-glasses.png'
+
+/>
+
+<Dice/>
+
+
+<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'
+]}
+
+/>
+
+
+<NumbersTable  limit={12}  />
+
+
+<RGBColorPicker />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
     </div>
   );
 }

src/components/BoxColor.js

@@ -0,0 +1,27 @@
+import React from 'react'
+
+const BoxColor =({r, g, b}) =>{
+        const divStyle={
+            backgroundColor: `rgb(${r}, ${g}, ${b})`,
+            width: '200px',
+            height: '100px',
+            margin: '10px',
+            display: 'inline-block',
+            border: '1px solid #333',
+            textAlign: 'center',
+            lineHeight: '100px',
+            color: 'white',
+
+
+        };
+
+
+  return (
+    <div style={divStyle}>
+        rgba({r},{g},{b})
+    </div>
+  )
+}
+
+
+export default BoxColor;

src/components/Carousel.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+
+const Carousel = ({ images }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const goToNextSlide = () => {
+    const newIndex = (currentIndex + 1) % images.length;
+    setCurrentIndex(newIndex);
+  };
+
+  const goToPreviousSlide = () => {
+    const newIndex = (currentIndex - 1 + images.length) % images.length;
+    setCurrentIndex(newIndex);
+  };
+
+  return (
+    <div>
+      <button onClick={goToPreviousSlide}>Left</button>
+      <img src={images[currentIndex]} alt="Slide" />
+      <button onClick={goToNextSlide}>Right</button>
+    </div>
+  );
+};
+
+export default Carousel;

src/components/ClickablePicture.js

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

src/components/CreditCard.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+const CreditCard = ({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color, logo }) => {
+  const lastFourDigits = number.slice(-4);
+
+  const cardStyle = {
+    backgroundColor: bgColor,
+    color: color,
+    width: '300px',
+    padding: '20px',
+    borderRadius: '10px',
+    margin: '10px',
+    position: 'relative', // Add position relative to the card container
+    fontFamily: 'Arial, sans-serif',
+  };
+
+  const logoStyle = {
+    position: 'absolute',
+    top: '10px',
+    right: '10px',
+    width: '50px', // Adjust the width as needed
+    height: 'auto', // Maintain aspect ratio
+  };
+
+  const cardTypeStyle = {
+    fontSize: '24px',
+    marginBottom: '10px',
+  };
+
+  const cardNumberStyle = {
+    fontSize: '20px',
+    marginBottom: '10px',
+  };
+
+  const cardInfoStyle = {
+    fontSize: '16px',
+    marginBottom: '5px',
+  };
+
+  return (
+    <div style={cardStyle}>
+      {logo && <img src={logo} alt="Logo" style={logoStyle} />} {/* Render logo if provided */}
+      <div style={cardTypeStyle}>{type}</div>
+      <div style={cardNumberStyle}>**** **** **** {lastFourDigits}</div>
+      <div style={cardInfoStyle}>Expires: {expirationMonth}/{expirationYear}</div>
+      <div style={cardInfoStyle}>Bank: {bank}</div>
+      <div style={cardInfoStyle}>Owner: {owner}</div>
+    </div>
+  );
+};
+
+export default CreditCard;

src/components/Dice.js

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+
+const Dice = () => {
+  const [diceImage, setDiceImage] = useState('./assets/images/dice-empty.png');
+
+  const rollDice = () => {
+    setDiceImage('./assets/images/dice-empty.png'); // Display empty image
+    setTimeout(() => {
+      const randomNumber = Math.floor(Math.random() * 6) + 1; // Generate random number between 1 and 6
+      setDiceImage(`./assets/images/dice${randomNumber}.png`); // Display random dice image
+    }, 1000);
+  };
+
+  return (
+    <div onClick={rollDice}>
+      <img src={diceImage} alt="Dice" />
+    </div>
+  );
+};
+
+export default Dice;

src/components/DriverCard.css

@@ -0,0 +1,28 @@
+.driver-card {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  .driver-img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    margin-right: 20px;
+  }
+
+  .driver-info {
+    font-family: Arial, sans-serif;
+  }
+
+  .driver-info h2 {
+    margin-bottom: 5px;
+  }
+
+  .driver-info p {
+    margin: 0;
+  }
+

src/components/DriverCard.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import "./DriverCard.css"
+
+
+const DriverCard = ({ name, rating, img, car }) => {
+  return (
+    <div className="driver-card">
+      <img src={img} alt="Driver" className="driver-img" />
+      <div className="driver-info">
+        <h2>{name}</h2>
+        <p>{rating} </p>
+        <p>{car.model} - {car.licensePlate}</p>
+      </div>
+    </div>
+  );
+};
+
+export default DriverCard;