siyaM-Internship

src/App.js

@@ -1,23 +1,174 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+
+// Iteration 1–13 Components
+import IdCard from "./components/IdCard/IdCard";
+import Greetings from "./components/Greetings/Greetings";
+import Random from "./components/Random/Random";
+import BoxColor from "./components/BoxColor/BoxColor";
+import CreditCard from "./components/CreditCard/CreditCard";
+import Rating from "./components/Rating/Rating";
+import DriverCard from "./components/DriverCard/DriverCard";
+import LikeButton from "./components/LikeButton/LikeButton";
+import ClickablePicture from "./components/ClickablePicture/ClickablePicture";
+import Dice from "./components/Dice/Dice";
+import Carousel from "./components/Carousel/Carousel";
+import NumbersTable from "./components/NumbersTable/NumbersTable";
+import RGBColorPicker from "./components/RGBColorPicker/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>
+
+      {/* -------------------------------------------------- */}
+      {/*              ITERATION 1: ID CARD                  */}
+      {/* -------------------------------------------------- */}
+      <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"
+      />
+
+      {/* -------------------------------------------------- */}
+      {/*            ITERATION 2: GREETINGS                 */}
+      {/* -------------------------------------------------- */}
+      <Greetings lang="de">Ludwig</Greetings>
+      <Greetings lang="fr">François</Greetings>
+
+      {/* -------------------------------------------------- */}
+      {/*             ITERATION 3: RANDOM                   */}
+      {/* -------------------------------------------------- */}
+      <Random min={1} max={6} />
+      <Random min={1} max={100} />
+
+      {/* -------------------------------------------------- */}
+      {/*            ITERATION 4: BOX COLOR                 */}
+      {/* -------------------------------------------------- */}
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
+
+      {/* -------------------------------------------------- */}
+      {/*           ITERATION 5: CREDIT CARD                */}
+      {/* -------------------------------------------------- */}
+      <div className="credit-card-container">
+        <CreditCard
+          type="Visa"
+          number="0123456789018845"
+          expirationMonth={3}
+          expirationYear={2021}
+          bank="BNP"
+          owner="Maxence Bouret"
+          bgColor="#11aa99"
+          color="#ffffff"
+        />
+
+        <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>
+
+      {/* -------------------------------------------------- */}
+      {/*               ITERATION 6: RATING                 */}
+      {/* -------------------------------------------------- */}
+      <Rating>0</Rating>
+      <Rating>1.49</Rating>
+      <Rating>1.5</Rating>
+      <Rating>3</Rating>
+      <Rating>4</Rating>
+      <Rating>5</Rating>
+
+      {/* -------------------------------------------------- */}
+      {/*             ITERATION 7: DRIVER CARD              */}
+      {/* -------------------------------------------------- */}
+      <DriverCard
+        name="Travis Kalanick"
+        rating={4.2}
+        img="https://i.imgur.com/OZaT7jl.png"
+        car={{
+          model: "Toyota Corolla Altis",
+          licensePlate: "CO42DE",
+        }}
+      />
+
+      <DriverCard
+        name="Dara Khosrowshahi"
+        rating={4.9}
+        img="https://i.imgur.com/ID9gH5m.png"
+        car={{
+          model: "Audi A3",
+          licensePlate: "BE33ER",
+        }}
+      />
+
+      {/* -------------------------------------------------- */}
+      {/*             ITERATION 8: LIKE BUTTON              */}
+      {/* -------------------------------------------------- */}
+      <LikeButton />
+      <LikeButton />
+
+      {/* -------------------------------------------------- */}
+      {/*         ITERATION 9: CLICKABLE PICTURE            */}
+      {/* -------------------------------------------------- */}
+      <ClickablePicture
+        img="/assets/images/maxence.png"
+        imgClicked="/assets/images/maxence-glasses.png"
+      />
+
+      {/* -------------------------------------------------- */}
+      {/*                  ITERATION 10: DICE               */}
+      {/* -------------------------------------------------- */}
+      <Dice />
+
+      {/* -------------------------------------------------- */}
+      {/*                ITERATION 11: CAROUSEL             */}
+      {/* -------------------------------------------------- */}
+      <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",
+        ]}
+      />
+
+      {/* -------------------------------------------------- */}
+      {/*             ITERATION 12: NUMBERS TABLE           */}
+      {/* -------------------------------------------------- */}
+      <NumbersTable limit={12} />
+
+      {/* -------------------------------------------------- */}
+      {/*          ITERATION 13: RGB COLOR PICKER           */}
+      {/* -------------------------------------------------- */}
+      <RGBColorPicker />
     </div>
   );
 }

src/components/BoxColor/BoxColor.css

@@ -0,0 +1,6 @@
+.BoxColor {
+  padding: 20px;
+  border: 1px solid black;
+  margin: 15px 0;
+  text-align: center;
+}

src/components/BoxColor/BoxColor.js

@@ -0,0 +1,17 @@
+import './BoxColor.css';
+
+function BoxColor({ r, g, b }) {
+  const rgb = `rgb(${r}, ${g}, ${b})`;
+  const hex = "#" + [r, g, b]
+    .map((v) => v.toString(16).padStart(2, "0"))
+    .join("");
+
+  return (
+    <div className="BoxColor" style={{ backgroundColor: rgb }}>
+      <p>{rgb}</p>
+      <p>{hex}</p>
+    </div>
+  );
+}
+
+export default BoxColor;

src/components/Carousel/Carousel.css

@@ -0,0 +1,15 @@
+.carousel {
+  display: flex;
+  align-items: center;
+  margin: 10px 0;
+}
+
+.carousel img {
+  width: 150px;
+  margin: 0 10px;
+}
+
+.carousel button {
+  padding: 5px 10px;
+  cursor: pointer;
+}

src/components/Carousel/Carousel.js

@@ -0,0 +1,19 @@
+import { useState } from "react";
+import "./Carousel.css";
+
+function Carousel({ images }) {
+  const [index, setIndex] = useState(0);
+
+  const prev = () => setIndex((index - 1 + images.length) % images.length);
+  const next = () => setIndex((index + 1) % images.length);
+
+  return (
+    <div className="carousel">
+      <button onClick={prev}>Left</button>
+      <img src={images[index]} alt="carousel" />
+      <button onClick={next}>Right</button>
+    </div>
+  );
+}
+
+export default Carousel;

src/components/ClickablePicture/ClickablePicture.css

@@ -0,0 +1,5 @@
+.clickable-picture {
+  cursor: pointer;
+  width: 200px;
+  margin: 10px 0;
+}

src/components/ClickablePicture/ClickablePicture.js

@@ -0,0 +1,17 @@
+import "./ClickablePicture.css";
+import { useState } from "react";
+
+function ClickablePicture({ img, imgClicked }) {
+  const [clicked, setClicked] = useState(false);
+
+  return (
+    <img
+      className="clickable-picture"
+      src={clicked ? imgClicked : img}
+      alt="clickable"
+      onClick={() => setClicked(!clicked)}
+    />
+  );
+}
+
+export default ClickablePicture;

src/components/CreditCard/CreditCard.css

@@ -0,0 +1,27 @@
+.credit-card {
+  width: 300px;
+  border-radius: 10px;
+  padding: 20px;
+  margin: 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-logo {
+  width: 60px;
+  align-self: flex-end;
+}
+
+.card-number {
+  font-size: 1.5rem;
+  margin: 20px 0;
+}
+
+.exp-bank {
+  display: flex;
+  justify-content: space-between;
+}
+
+.owner {
+  margin-top: 10px;
+}

src/components/CreditCard/CreditCard.js

@@ -0,0 +1,39 @@
+import "./CreditCard.css";
+
+function CreditCard({
+  type,
+  number,
+  expirationMonth,
+  expirationYear,
+  bank,
+  owner,
+  bgColor,
+  color,
+}) {
+  const cardTypeImg =
+    type === "Visa"
+      ? "/assets/images/visa.png"
+      : "/assets/images/master-card.svg";
+
+  const maskedNumber = "•••• •••• •••• " + number.slice(-4);
+
+  return (
+    <div className="credit-card" style={{ backgroundColor: bgColor, color }}>
+      <img className="card-logo" src={cardTypeImg} alt={type} />
+
+      <div className="card-number">{maskedNumber}</div>
+
+      <div className="exp-bank">
+        <span>
+          Expires {String(expirationMonth).padStart(2, "0")}/
+          {String(expirationYear).slice(-2)}
+        </span>
+        <span className="bank">{bank}</span>
+      </div>
+
+      <div className="owner">{owner}</div>
+    </div>
+  );
+}
+
+export default CreditCard;

src/components/Dice/Dice.css

@@ -0,0 +1,5 @@
+.dice {
+  width: 100px;
+  cursor: pointer;
+  margin: 10px 0;
+}

src/components/Dice/Dice.js

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