[RMT-WDPT-NOV2023] Alejandro Martínez

.eslintrc.cjs

@@ -11,5 +11,6 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': 'warn',
+    'react/prop-types': 'off'
   },
 }

src/App.css

@@ -36,3 +36,8 @@
     transform: rotate(360deg);
   }
 }
+
+.credit-card-container {
+  display: flex;
+  flex-wrap: wrap;
+}

src/App.jsx

@@ -1,11 +1,110 @@
 import "./App.css";
+import BoxColor from "./components/box-color/BoxColor";
+import Carousel from "./components/carousel/Carousel";
+import ClickablePicture from "./components/clickable-picture/ClickablePicture";
+import CreditCard from "./components/credit-card/CreditCard";
+import Dice from "./components/dice/Dice";
+import DriverCard from "./components/driver-card/DriverCard";
+import Facebook from "./components/facebook/Facebook";
+import Greetings from "./components/greetings/Greetings";
+import IdCard from "./components/id-card/IdCard";
+import LikeButton from "./components/like-button/LikeButton";
+import NumbersTable from "./components/numbers-table/NumbersTable";
+import Random from "./components/random/Random";
+import Rating from "./components/rating/Rating";
+import RgbColorPicker from "./components/rgb-color-picker/RgbColorPicker";
+import SignupPage from "./components/signup-page/SignupPage";
 
 function App() {
   return (
     <div className="App">
+
       <h1> LAB | React Training</h1>
+
+      <h2>Iteration 1 | Component: IdCard</h2>
+      <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"
+      />
+
+      <h2>Iteration 2 | Component: Greetings</h2>
+      <Greetings lang= "de">Ludwig</Greetings>
+      <Greetings lang= "fr">François</Greetings>
+      <Greetings lang= "es">Alex</Greetings>
+      <Greetings lang= "en">Ironhacker</Greetings>
+
+      <h2>Iteration 3 | Component: Random</h2>
+      <Random min={1} max={6}/>
+      <Random min={1} max={100}/>
+
+      <h2>Iteration 4 | Component: BoxColor</h2>
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
+
+      <h2>Iteration 5 | Component: CreditCard</h2>
+      <div className="credit-card-container">
+        <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>
+
+      <h2>Iteration 6 | Component: Rating</h2>
+      <Rating>0</Rating>
+      <Rating>1.49</Rating>
+      <Rating>1.5</Rating>
+      <Rating>3</Rating>
+      <Rating>4</Rating>
+      <Rating>5</Rating>
+
+      <h2>Iteration 7 | Component: DriverCard</h2>
+      <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" }} />
+
+      <h2>Iteration 8 | State: LikeButton</h2>
+      <LikeButton colors={["purple", "blue", "green", "yellow", "orange", "red"]} />
+      <LikeButton colors={["purple", "blue", "green", "yellow", "orange", "red"]} />
+
+      <h2>Iteration 9: State: ClickablePicture</h2>
+      <ClickablePicture img="https://randomuser.me/api/portraits/women/44.jpg" imgClicked="../src/assets/images/glasses.png" />
+
+      <h2>Iteration 10 | State: Dice</h2>
+      <Dice />
+
+      <h2>Iteration 11 | State: Carousel</h2>
+      <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"
+        ]} 
+      />
+
+      <h2>Iteration 12 | List and Keys | NumbersTable</h2>
+      <NumbersTable limit={24} />
+
+      <h2>Iterations 13 & 14 | List and Keys - FaceBook</h2>
+      <Facebook />
+
+      <h2>Iteration 15 | Form - SignupPage</h2>
+      <SignupPage />
+
+      <h2>Iteration 16 | Lifting State Up - RGBColorPicker</h2>
+      <RgbColorPicker />
+
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/Greetings/Greetings.css

@@ -0,0 +1,8 @@
+.div-greetings {
+    border: 2px solid red;
+    background-color: rgba(30, 29, 29, 0.986);
+    color: white;
+    margin: 0.5rem;
+    padding: 0.5rem;
+    text-align:left;
+}

src/components/Greetings/Greetings.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import './Greetings.css';
+
+function Greetings({ lang, children }) {
+
+    let greeting;
+    switch (lang) {
+        case "es":
+            greeting = "Hola";
+            break;
+        case "en":
+            greeting = "Hello";
+            break;
+        case "fr":
+            greeting = "Bonjour";
+            break;
+        case "de":
+            greeting = "Hallo";
+            break;
+    }
+
+    return (
+        <div className='div-greetings'>{greeting} {children}</div>
+    )
+}
+
+export default Greetings;

src/components/Random/Random.css

@@ -0,0 +1,8 @@
+.div-random {
+    border: 2px solid red;
+    background-color: rgba(30, 29, 29, 0.986);
+    color: white;
+    margin: 0.5rem;
+    padding: 0.5rem;
+    text-align: left;
+}

src/components/Random/Random.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Random.css';
+
+function Random({ min, max }) {
+
+    const random = Math.floor((Math.random() * max) + min);
+    return (
+      <div className="div-random">Random value between {min} and {max} => {random}</div>
+    )
+}
+
+export default Random;

src/components/box-color/BoxColor.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+function BoxColor({ r, g, b}) {
+  return (
+    <div style={{backgroundColor: `rgb(${r}, ${g}, ${b}`, margin: '0.5rem', padding: '2rem'}}>rgb({r},{g},{b})</div>
+  )
+}
+
+export default BoxColor;

src/components/carousel/Carousel.css

@@ -0,0 +1,33 @@
+.carousel {
+    background-color: whitesmoke;
+    display: flex;  
+    flex-direction: column;
+    align-items: center;
+    margin: 0.5rem;
+    padding: 0.5rem;   
+}
+
+.carousel img {
+    width: 175px;
+}
+
+.carousel .btns {
+    margin-top: 0.5rem;
+    width: 175px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.carousel button {
+    background-color: blueviolet;
+    color: white;
+    font-weight: bold;
+    padding: 0.5rem 1rem;
+    border-radius: 10px;
+    border: none;
+    min-width: 70px;
+}
+
+.carousel button:hover {
+    cursor: pointer;
+}

src/components/carousel/Carousel.jsx

@@ -0,0 +1,27 @@
+import "./Carousel.css";
+import { useState } from "react";
+
+function Carousel({ images }) {
+
+    const [ index, setIndex ] = useState(0);
+
+    const handleLeft = () => {
+        index ? setIndex(index - 1) : setIndex(images.length - 1);
+    }
+
+    const handleRight = () => {
+        (index === images.length - 1) ? setIndex(0) : setIndex(index + 1);
+    }
+
+    return (
+        <div className="carousel">
+            <img src={images[index]} />
+            <div className="btns">
+                <button onClick={handleLeft} >Left</button>
+                <button onClick={handleRight} >Right</button>
+            </div>
+        </div>
+    );
+}
+
+export default Carousel;

src/components/clickable-picture/ClickablePicture.css

@@ -0,0 +1,31 @@
+.div-clickable-container {
+    display: flex;
+    justify-content: center;
+}
+
+.div-clickable-picture {
+    position: relative;
+    width: 200px;
+    height: auto;
+}
+
+.picture {
+    width: 100%;
+    height: auto;
+}
+
+.glasses {
+ width: 120px;
+ position: absolute;
+ top: 40px;
+ left: 30px;
+ transform: rotate(5deg);
+}
+
+.picture:hover {
+    cursor: pointer;
+}
+
+.glasses:hover {
+    cursor: pointer;
+}

src/components/clickable-picture/ClickablePicture.jsx

@@ -0,0 +1,22 @@
+import "./ClickablePicture.css";
+import { useState } from "react";
+
+function ClickablePicture({ img, imgClicked }) {
+
+    const [ toggle, setToggle ] = useState(false);
+
+    const handleToggle = () => {
+        setToggle(!toggle);
+    }
+
+    return(
+        <div className="div-clickable-container" >
+            <div className="div-clickable-picture">
+                <img className="picture" src={img} onClick={handleToggle} />
+                { toggle && (<img className="glasses" src={imgClicked} onClick={handleToggle} />) }
+            </div>
+        </div>
+    );
+}
+
+export default ClickablePicture;

src/components/credit-card/CreditCard.css

@@ -0,0 +1,38 @@
+.credit-card {
+    width: 350px;
+    height: 200px;
+    border-radius: 10px;
+    margin: 0.5rem;
+}
+
+.card-logo {
+    display: flex;
+    flex-direction: row-reverse;
+    max-height: 60px;
+}
+
+.credit-card img {
+    width: 60px;
+    margin: 1rem  1.5rem;
+}
+
+.card-number {
+    font-size: 1.75rem;
+    margin-top: 1rem;
+}
+
+.card-info {
+    text-align: left;
+    padding-left: 1rem;
+    margin-top: 1.3rem;
+}
+
+.card-info span {
+    margin-left: 2rem;
+}
+
+.card-owner {
+    text-align: left;
+    padding-left: 1rem;
+    margin-top: 0.2rem;
+}

src/components/credit-card/CreditCard.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import './CreditCard.css';
+import visa from '../../assets/images/visa.png';
+import masterCard from '../../assets/images/master-card.svg';
+
+function CreditCard({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color} ) {
+
+    const cardType = (type === 'Visa') ? visa : masterCard;
+
+    return (
+        <div className='credit-card' style={{ backgroundColor: `${bgColor}`, color: `${color}` }}>
+            <div className='card-logo'><img src={cardType} alt='card-logo' /></div>
+            <div className='card-number'>•••• •••• •••• {number.slice(-4)}</div>
+            <div className='card-info'>Expires {expirationMonth.toString().padStart(2, '0')}/{expirationYear.toString().slice(-2)}<span>{bank}</span></div>
+            <div className='card-owner'>{owner}</div>    
+        </div>
+    )
+}
+
+export default CreditCard;

src/components/dice/Dice.css

@@ -0,0 +1,7 @@
+.dice {
+    width: 200px;
+}
+
+.dice:hover {
+    cursor: pointer;
+}