done

src/App.css

@@ -1,38 +1,25 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.App > *{
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
+  flex-direction: row;
+  justify-content: flex-start;
+  /* align-items: center; */
+  text-align: left;
+  padding: 10px;
+  margin: 20px;
+  border: 1px solid black;
+  line-height: 7px;
+  padding: 10px;
+  gap: 20px;
 
-.App-link {
-  color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.rating-stars{
+  display: flex;
+  flex-direction: column;
+  font-size: 1.5rem;
+  padding: 20px;
+  line-height: 10px;
+  border: none;
 }

src/App.js

@@ -1,23 +1,148 @@
-import logo from './logo.svg';
-import './App.css';
+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";
+import LikeButton from "./components/LikeButton";
+import ClickablePicture from "./components/ClickablePicture";
+import image1 from "./assets/images/maxence.png"
+import image2 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";
 
 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>
+
+      <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="credit-cards">
+        <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="Sparkasse"
+          owner="Marina Robledo"
+          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>
+
+      <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>
+        <LikeButton />
+        <LikeButton />
+      </div>
+
+      <ClickablePicture
+        img={image1}
+        imgClicked={image2}
+      />
+
+      <div className="dice"><Dice /></div>
+
+<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.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function BoxColor({ r, g, b }) {
+  const divStyle = {
+    backgroundColor: `rgb(${r}, ${g}, ${b})`,
+  }; //inline style to pass it down as style and cleaner code
+
+  return (
+    <div style={divStyle}>
+      <p>rgb({r}, {g}, {b})</p>
+    </div>
+  );
+}

src/components/Carousel.css

@@ -0,0 +1,23 @@
+.carousel{
+    display:flex;
+    flex-direction:column;
+    padding: 3rem;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.carousel>img{
+    width: 15rem;
+    height: auto;
+}
+
+.buttons-carousel>button{
+  padding: 10px 15px;
+  border-radius: 10px;
+  border: 1px solid rgba(128, 128, 128, 0.075);
+  margin: 5px;
+  color: rgba(0, 0, 0, 0.564);
+  cursor: pointer;
+
+}

src/components/Carousel.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import "./Carousel.css";
+
+export default function Carousel({ images }) {
+  //onclick, the arr goes to the next index
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  function handleClickRight() {
+    //if currentIndex is greater than the length of the array
+    if (currentIndex === images.length - 1) {
+      setCurrentIndex(0);
+    } else {
+      setCurrentIndex(currentIndex + 1); //increase the count
+    }
+  }
+
+  function handleClickLeft() {
+    // if the current index is less than 0
+    if (currentIndex === 0) {
+      setCurrentIndex(images.length - 1);
+    } else {
+      setCurrentIndex(currentIndex + -1); //decrease the count
+    }
+  }
+  let imgSource = images[currentIndex];
+  return (
+    <div className="carousel">
+      <img src={imgSource} alt="imageCarousel"></img>
+      <div className="buttons-carousel">
+        <button onClick={handleClickRight}>Next</button>
+        <button onClick={handleClickLeft}>Prev</button>
+      </div>{" "}
+    </div>
+  );
+}

src/components/ClickablePicture.jsx

@@ -0,0 +1,18 @@
+import React, {useState} from 'react'
+
+export default function ClickablePicture({img, imgClicked}) {
+
+    const [image, setImage] = useState(img);
+
+
+    function changeImage(){
+       // Toggle between img and imgClicked
+       setImage(prevImage => prevImage === img ? imgClicked : img);
+    }
+
+  return (
+      <div>
+          <img src={image} onClick={changeImage} alt='img'></img>
+    </div>
+  )
+}

src/components/CreditCard.css

@@ -0,0 +1,39 @@
+.credit-card {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  width: 18rem;
+  height: 10rem;
+  justify-content: flex-end;
+  border-radius: 10px;
+}
+
+.credit-card > div > img {
+  width: 3rem;
+  padding: 0px 20px 0px 0;
+}
+.img-div-cc {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.card-details {
+  display: flex;
+  flex-direction: column;
+}
+.card-details > p:nth-child(1) {
+  font-size: 1.4rem;
+  justify-content: center;
+  display: flex;
+  letter-spacing: 3px;
+  padding: 10px 0;
+}
+
+.more-details {
+
+  justify-content: flex-start;
+  padding:  0 0 10px 10px;
+  display: flex;
+  align-items: center;
+  margin: 4px;
+}