done

src/App.js

@@ -1,5 +1,19 @@
 import logo from './logo.svg';
 import './App.css';
+import React from 'react';
+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';
 
 function App() {
   return (
@@ -18,6 +32,67 @@ function App() {
           Learn React
         </a>
       </header>
+
+      {/* Render your components here */}
+      <main>
+        <IdCard 
+          lastName="Doe" 
+          firstName="John" 
+          gender="male" 
+          height={180} 
+          birth={new Date('1990-01-01')} 
+          picture="https://randomuser.me/api/portraits/men/1.jpg" 
+        />
+
+        <Greetings lang="de">Ludwig</Greetings>
+        <Greetings lang="fr">François</Greetings>
+
+        <Random min={1} max={100} />
+
+        <BoxColor r={255} g={0} b={0} />
+
+        <CreditCard
+          type="Visa"
+          number="0123456789018845"
+          expirationMonth={3}
+          expirationYear={2021}
+          bank="BNP"
+          owner="Maxence Bouret"
+          bgColor="#11aa99"
+          color="white"
+        />
+
+        <Rating>4.2</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" }}
+        />
+
+        <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 />
+      </main>
     </div>
   );
 }

src/components/BoxColor.js

@@ -0,0 +1,20 @@
+// src/components/BoxColor.js
+import React from 'react';
+
+function BoxColor({ r, g, b }) {
+  const color = `rgb(${r}, ${g}, ${b})`;
+  const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+
+  return (
+    <div style={{
+      backgroundColor: color,
+      padding: '20px',
+      margin: '10px',
+      color: 'white'
+    }}>
+      {hex}
+    </div>
+  );
+}
+
+export default BoxColor;

src/components/Carousel.js

@@ -0,0 +1,24 @@
+// src/components/Carousel.js
+import React, { useState } from 'react';
+
+function Carousel({ images }) {
+  const [index, setIndex] = useState(0);
+
+  const nextImage = () => {
+    setIndex((index + 1) % images.length);
+  };
+
+  const prevImage = () => {
+    setIndex((index - 1 + images.length) % images.length);
+  };
+
+  return (
+    <div>
+      <button onClick={prevImage}>Left</button>
+      <img src={images[index]} alt="Carousel" style={{ width: '200px' }} />
+      <button onClick={nextImage}>Right</button>
+    </div>
+  );
+}
+
+export default Carousel;

src/components/ClickablePicture.js

@@ -0,0 +1,21 @@
+// src/components/ClickablePicture.js
+import React, { useState } from 'react';
+
+function 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', width: '200px' }} 
+    />
+  );
+}
+
+export default ClickablePicture;

src/components/CreditCard.js

@@ -0,0 +1,26 @@
+// src/components/CreditCard.js
+import React from 'react';
+
+function CreditCard({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color }) {
+  const displayNumber = `**** **** **** ${number.slice(-4)}`;
+
+  return (
+    <div style={{
+      backgroundColor: bgColor,
+      color: color,
+      padding: '20px',
+      borderRadius: '5px',
+      width: '300px',
+      display: 'flex',
+      flexDirection: 'column'
+    }}>
+      <div>{type}</div>
+      <div>{displayNumber}</div>
+      <div>Expires: {expirationMonth}/{expirationYear}</div>
+      <div>{bank}</div>
+      <div>{owner}</div>
+    </div>
+  );
+}
+
+export default CreditCard;

src/components/Dice.js

@@ -0,0 +1,25 @@
+// src/components/Dice.js
+import React, { useState } from 'react';
+
+function Dice() {
+  const [dice, setDice] = useState('./assets/images/dice-empty.png');
+
+  const rollDice = () => {
+    setDice('./assets/images/dice-empty.png');
+    setTimeout(() => {
+      const randomValue = Math.floor(Math.random() * 6) + 1;
+      setDice(`./assets/images/dice${randomValue}.png`);
+    }, 1000);
+  };
+
+  return (
+    <img 
+      src={dice} 
+      alt="Dice" 
+      onClick={rollDice} 
+      style={{ cursor: 'pointer', width: '100px' }} 
+    />
+  );
+}
+
+export default Dice;

src/components/DriverCard.js

@@ -0,0 +1,25 @@
+// src/components/DriverCard.js
+import React from 'react';
+import Rating from './Rating';
+
+function DriverCard({ name, rating, img, car }) {
+  return (
+    <div style={{
+      border: '1px solid #000',
+      borderRadius: '5px',
+      display: 'flex',
+      padding: '10px',
+      margin: '10px',
+    }}>
+      <img src={img} alt={name} style={{ width: '100px', borderRadius: '5px', marginRight: '10px' }} />
+      <div>
+        <h4>{name}</h4>
+        <Rating>{rating}</Rating>
+        <p>Car: {car.model}</p>
+        <p>License Plate: {car.licensePlate}</p>
+      </div>
+    </div>
+  );
+}
+
+export default DriverCard;

src/components/Greetings.js

@@ -0,0 +1,19 @@
+// src/components/Greetings.js
+import React from 'react';
+
+function Greetings({ lang, children }) {
+  const greetings = {
+    de: 'Hallo',
+    en: 'Hello',
+    es: 'Hola',
+    fr: 'Bonjour',
+  };
+
+  return (
+    <div>
+      {greetings[lang]} {children}
+    </div>
+  );
+}
+
+export default Greetings;

src/components/IdCard.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+function IdCard(props) {
+  return (
+    <div style={{
+      border: '1px solid black',
+      borderRadius: '5px',
+      display: 'flex',
+      alignItems: 'center',
+      margin: '10px',
+      padding: '10px',
+      width: '300px'
+    }}>
+      <img 
+        src={props.picture} 
+        alt={`${props.firstName} ${props.lastName}`} 
+        style={{ width: '100px', borderRadius: '5px', marginRight: '10px' }} 
+      />
+      <div>
+        <p><strong>First name:</strong> {props.firstName}</p>
+        <p><strong>Last name:</strong> {props.lastName}</p>
+        <p><strong>Gender:</strong> {props.gender}</p>
+        <p><strong>Height:</strong> {props.height / 100} m</p>
+        <p><strong>Birth:</strong> {props.birth.toDateString()}</p>
+      </div>
+    </div>
+  );
+}
+
+export default IdCard;

src/components/LikeButton.js

@@ -0,0 +1,21 @@
+// src/components/LikeButton.js
+import React, { useState } from 'react';
+
+function LikeButton() {
+  const [likes, setLikes] = useState(0);
+  const [colorIndex, setColorIndex] = useState(0);
+  const colors = ['purple', 'blue', 'green', 'yellow', 'orange', 'red'];
+
+  const handleClick = () => {
+    setLikes(likes + 1);
+    setColorIndex((colorIndex + 1) % colors.length);
+  };
+
+  return (
+    <button onClick={handleClick} style={{ backgroundColor: colors[colorIndex] }}>
+      {likes} Likes
+    </button>
+  );
+}
+
+export default LikeButton;

src/components/NumbersTable.js

@@ -0,0 +1,18 @@
+// src/components/NumbersTable.js
+import React from 'react';
+
+function NumbersTable({ limit }) {
+  const numbers = Array.from({ length: limit }, (_, i) => i + 1);
+
+  return (
+    <div>
+      {numbers.map(number => (
+        <div key={number} style={{ color: number % 2 === 0 ? 'red' : 'black' }}>
+          {number}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default NumbersTable;

src/components/RGBColorPicker.js

@@ -0,0 +1,20 @@
+// src/components/RGBColorPicker.js
+import React, { useState } from 'react';
+import SingleColorPicker from './SingleColorPicker';
+
+function RGBColorPicker() {
+  const [rValue, setRValue] = useState(0);
+  const [gValue, setGValue] = useState(0);
+  const [bValue, setBValue] = useState(0);
+
+  return (
+    <div>
+      <div style={{ width: '100px', height: '100px', backgroundColor: `rgb(${rValue}, ${gValue}, ${bValue})` }}></div>
+      <SingleColorPicker color="r" value={rValue} onChange={setRValue} />
+      <SingleColorPicker color="g" value={gValue} onChange={setGValue} />
+      <SingleColorPicker color="b" value={bValue} onChange={setBValue} />
+    </div>
+  );
+}
+
+export default RGBColorPicker;

src/components/Random.js

@@ -0,0 +1,15 @@
+// src/components/Random.js
+import React from 'react';
+
+function Random({ min, max }) {
+  // Calculate a random number between min and max
+  const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+
+  return (
+    <div>
+      Random value between {min} and {max} ={randomNumber}
+    </div>
+  );
+}
+
+export default Random;

src/components/SingleColorPicker.js

@@ -0,0 +1,21 @@
+// src/components/SingleColorPicker.js
+import React from 'react';
+
+function SingleColorPicker({ color, value, onChange }) {
+  return (
+    <div>
+      <label>
+        {color.toUpperCase()}:
+        <input
+          type="number"
+          value={value}
+          onChange={e => onChange(Number(e.target.value))}
+          min={0}
+          max={255}
+        />
+      </label>
+    </div>
+  );
+}
+
+export default SingleColorPicker;