done-lab-react-training week-5

src/App.js

@@ -1,23 +1,138 @@
-import logo from './logo.svg';
+
 import './App.css';
+import BoxColor from './component/BoxColor';
+import Greetings from './component/Greetings';
+import IdCard from './component/IdCard';
+import Random from './component/Random';
+import CreditCard from './component/CreditCard';
+import Ratings from './component/Ratings';
+import DriverCard from './component/DriverCard';
+import LikeButton from './component/LikeButton';
+import ClickablePicture from './component/ClickablePicture';
+import fir from './assets/images/maxence.png'
+import Sfir from './assets/images/maxence-glasses.png'
+import Dice from './component/Dice';
+import Carousel from './component/Carousal';
+import NumbersTable from './component/NumbersTable';
+import RGBColorPicker from './component/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} />
+
+      <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"
+      />
+
+      <Ratings>0</Ratings>
+
+      <Ratings>1.49</Ratings>
+
+      <Ratings>1.5</Ratings>
+
+      <Ratings>3</Ratings>
+
+      <Ratings>4</Ratings>
+
+      <Ratings>5</Ratings>
+
+      <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 />
+      <br />
+      <ClickablePicture img={fir} imgClicked={Sfir} />
+      <br />
+      <br />
+      <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={21} />
+
+      <div className="rgb-color-picker-container">
+        <RGBColorPicker />
+      </div>
     </div>
   );
 }

src/component/BoxColor.css

@@ -0,0 +1,19 @@
+.box-color {
+    width: 80%;
+    height: 150px; 
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    color: white;
+    font-family: Arial, sans-serif;
+    border: 2px solid black;
+    margin-bottom: 20px;
+    margin-left: 10px;
+  }
+
+  .box-color p {
+    margin: 0;
+    font-size: 30px;
+    line-height: 1.5;
+  }

src/component/BoxColor.js

@@ -0,0 +1,36 @@
+import React from "react";
+import "./BoxColor.css";
+
+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 }) => {
+
+  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));
+
+
+  const rgbColor = `rgb(${clampedR}, ${clampedG}, ${clampedB})`;
+
+
+  const hexColor = rgbToHex(clampedR, clampedG, clampedB);
+
+
+  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/component/Carousal.css

@@ -0,0 +1,27 @@
+.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: rgb(5, 172, 172);
+    border-radius: 11px;
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+  }
+
+  .carousel-button:hover {
+    background-color: rgb(2, 95, 95);
+  }
+

src/component/Carousal.js

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import './Carousal.css'
+
+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/component/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/component/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;    
+}

src/component/CreditCard.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import './CreditCard.css';
+import mCard from '../assets/images/MasterCard.png'
+import visa from '../assets/images/visa.png';
+
+
+const CreditCard = ({
+  type,
+  number,
+  expirationMonth,
+  expirationYear,
+  bank,
+  owner,
+  bgColor,
+  color,
+}) => {
+
+    const lastFourDigits = number.slice(-4);
+
+    const formattedMonth = expirationMonth.toString().padStart(2, "0");
+
+      const cardLogo = type === "Visa" ? visa : mCard;
+
+  return (
+    <div className='main'>
+      <div
+        className="credit-card"
+        style={{ backgroundColor: bgColor, color: color }}
+      >
+        <div className="card-logo">
+          <img src={cardLogo} alt={`${type} logo`} />
+        </div>
+        <div className="card-number">
+          <p>•••• •••• •••• {lastFourDigits}</p>
+        </div>
+        <div className="card-info">
+          <span className="expiration">
+            Expires {formattedMonth}/{expirationYear}
+          </span>
+          <span className="bank">{bank}</span>
+          <span className="cardholder-name">
+            <br />
+            {owner}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreditCard