done

package.json

@@ -17,10 +17,13 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.38.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
     "vite": "^4.3.2"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.jsx

@@ -1,9 +1,161 @@
-import "./App.css";
+import { useState } 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 Facebook from "./components/Facebook";
+import SignUpPage from "./components/SignUpPage";
+import RGBColorPicker from "./components/RGBColorPicker";
 
 function App() {
+  const [likes, setLikes] = useState(0);
+  const [color, setColor] = useState("#800080");
+
+  const changeColor = () => {
+    if (color === "#800080") {
+      setColor("#0000FF");
+    } else if (color === "#0000FF") {
+      setColor("#008000");
+    } else if (color === "#008000") {
+      setColor("#FFFF00");
+    } else if (color === "#FFFF00") {
+      setColor("#FFA500");
+    } else if (color === "#FFA500") {
+      setColor("#FF0000");
+    } else if (color === "#FF0000") {
+      setColor("#800080");
+    }
+  };
+
+  function handleClick() {
+    setLikes(likes + 1);
+    changeColor();
+  }
   return (
     <div className="App">
-      <h1> LAB | React Training</h1>
+      <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="flex w-full">
+        <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
+        likes={likes}
+        setLikes={setLikes}
+        color={color}
+        setColor={setColor}
+        handleClick={handleClick}
+      />
+
+      <ClickablePicture
+        img="src\assets\images\guy.png"
+        imgClicked="src\assets\images\sunglassesguy.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} />
+
+      <Facebook />
+
+      <SignUpPage />
+
+      <RGBColorPicker />
     </div>
   );
 }

src/components/BoxColor.jsx

@@ -0,0 +1,15 @@
+import PropTypes from "prop-types";
+
+export default function BoxColor({r, g, b}) {
+  return (
+    <div className="w-1/4 h-20 text-white mb-4 border border-black border-solid flex items-center justify-center ml-3" style={{backgroundColor: `rgb(${r},${g},${b})`}}>
+      rgb({r},{g},{b})
+    </div>
+  )
+}
+BoxColor.propTypes = {
+  r: PropTypes.number,
+  g: PropTypes.number,
+  b: PropTypes.number
+}
+

src/components/Carousel.jsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+
+export default function Carousel({images}) {
+    const photos = images
+    const [profile, setProfile] = useState(photos[0]);
+
+    const prev = () => {
+        const arrayNum = photos.indexOf(profile);
+        setProfile(photos[arrayNum - 1]);
+        if (arrayNum === 0) {
+            setProfile(photos[photos.length - 1]);
+        }
+    }
+    const next = () => {
+        const arrayNum = photos.indexOf(profile);
+        setProfile(photos[arrayNum + 1]);
+        if (arrayNum === photos.length - 1) {
+            setProfile(photos[0]);
+        }
+    }
+  return (
+    <div className="flex flex-row">
+        <button onClick={() => prev()}>left</button>
+        <img src={profile} alt="guy" />
+        <button onClick={() => next()}>right</button>
+    </div>
+  )
+}

src/components/ClickablePicture.jsx

@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+export default function ClickablePicture({img, imgClicked}) {
+    const [image, setImage] = useState(img);
+
+    const handleClick = () => {
+        image === img ? setImage(imgClicked) : setImage(img);
+    }
+  return (
+    <>
+    <img src={image} alt="guy" onClick={handleClick} />
+    </>
+  )
+}

src/components/CreditCard.jsx

@@ -0,0 +1,57 @@
+import PropTypes from "prop-types";
+
+const maskCreditCard = (number) => {
+  if (!number || number.length < 4) return number;
+  const lastFourDigits = number.slice(-4);
+  const maskedSection = number.slice(0, -4).replace(/\d/g, '*');
+  return `${maskedSection}${lastFourDigits}`;
+};
+
+export default function CreditCard({
+  type,
+  number,
+  expirationMonth,
+  expirationYear,
+  bank,
+  owner,
+  bgColor,
+  color,
+}) {
+  return (
+    <div className="w-1/4 h-44 m-2 rounded" style={{ backgroundColor: bgColor, color: color }}>
+      <div>
+        <div className="flex justify-end" id="card-type">
+          {type === "Visa" ? (
+            <img className="w-12 h-5 mt-4 mr-4" src="/src/assets/images/visa.png" alt="Visa" />
+          ) : (
+            <img className="w-12 h-7 mt-4 mr-4" src="/src/assets/images/master-card.svg" alt="MasterCard" />
+          )}
+        </div>
+
+      <div id="number" className="mb-7 flex justify-center">
+        <h1 className="text-2xl">{maskCreditCard(number)}</h1>
+      </div>
+      <div className="ml-4" id="data">
+        <div className="flex flex-row">
+          <p className="pr-4">
+            Expires: {expirationMonth}/{expirationYear}
+          </p>
+          <p>{bank}</p>
+        </div>
+        <p>{owner}</p>
+      </div>
+    </div>
+    </div>
+  );
+}
+
+CreditCard.propTypes = {
+  type: PropTypes.oneOf(["Visa", "Master Card"]).isRequired,
+  number: PropTypes.string,
+  expirationMonth: PropTypes.number,
+  expirationYear: PropTypes.number,
+  bank: PropTypes.string,
+  owner: PropTypes.string,
+  bgColor: PropTypes.string,
+  color: PropTypes.string,
+};

src/components/Dice.jsx

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { useEffect } from "react";
+
+export default function Dice() {
+    const dices = [
+    "src/assets/images/dice1.png",
+    "src/assets/images/dice2.png",
+    "src/assets/images/dice3.png",
+    "src/assets/images/dice4.png",
+    "src/assets/images/dice5.png",
+    "src/assets/images/dice6.png"
+  ];
+    const [dice, setDice] = useState(dices[Math.floor(Math.random() * dices.length)]);
+    const roll = () => {
+        setDice("src/assets/images/dice-empty.png");
+         setTimeout(() => {
+             setDice(dices[Math.floor(Math.random() * dices.length)]);
+         }, 1000);
+     }
+  return (
+    <img className="w-28 h-28" src={dice} alt="dice" onClick={roll} />
+  )
+}

src/components/DriverCard.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import Rating from './Rating';
+
+export default function DriverCard({name, rating, img, car}) {
+    return (
+    <div className='flex bg-teal-600 mb-3 text-white w-1/2 rounded-xl justify-center'>
+        <img className='w-16 h-16 rounded-full' src={img} alt="person photo" />
+        <div className='flex flex-col'>
+        <h1>{name}</h1>
+        <Rating>{rating}</Rating>
+        <h3>{car.model}-{car.licensePlate}</h3>
+        </div>
+    </div>
+    )
+}
+
+DriverCard.propTypes = {
+    name: PropTypes.string.isRequired,
+    rating: PropTypes.number.isRequired,
+    // ((rating) => {
+    //     if(rating < 0 && rating > 5){
+    //         return new Error();
+    //     }
+    // }),
+    img: PropTypes.string.isRequired,
+    car: PropTypes.object.isRequired
+}