ironhack-labs · vladys00 · Jan 11, 2025 · Jan 12, 2025 · Jan 19, 2025 · Jan 20, 2025
diff --git a/index.html b/index.html
@@ -4,10 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <title>Vite + React</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,11 @@
 .App {
   text-align: center;
+  padding: 20px;
+  .cardDiv{
+    margin: 15px 10px;
+    display: flex;
+    justify-content: space-around;
+  }
 }
 
 .App-logo {

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,9 +1,109 @@
 import "./App.css";
+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 FaceBookSimple from "./components/FaceBookSimpleandAdvanced/FaceBookSimple";
+import SignUpPage from "./components/SignUpPage/SignUpPage";
+import RGBColorPicker from "./components/RGBColorPicker/RGBColorPicker";
 
 function App() {
   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="es" />
+
+      <Random min={1} max={6} />
+
+      <BoxColor r={255} g={0} b={0} />
+      <div className="cardDiv">
+        <CreditCard
+          type="Visa"
+          number="0123456789018845"
+          expirationMonth={3}
+          expirationYear={2021}
+          bank="BNP"
+          owner="Maxence Bouret"
+          bgColor="#11aa99"
+          color="white"
+        />
+        <CreditCard
+          type="Visa"
+          number="0123456789016984"
+          expirationMonth={12}
+          expirationYear={2019}
+          bank="Name of the Bank"
+          owner="Firstname Lastname"
+          bgColor="#ddbb55"
+          color="white"
+        />
+      </div>
+
+      <Rating number={3} />
+      <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",
+        }}
+      />
+      <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",
+        }}
+      />
+      <div>
+        <LikeButton />
+      </div>
+      <ClickablePicture
+        img="https://xsgames.co/randomusers/assets/avatars/male/63.jpg"
+        imgClicked="./../assets/glasses.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} />
+      <FaceBookSimple/>
+      <SignUpPage/>
+      <RGBColorPicker/>
     </div>
   );
 }

diff --git a/src/components/BoxColor/BoxColor.css b/src/components/BoxColor/BoxColor.css
@@ -0,0 +1,10 @@
+.boxColor {
+
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid black;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
diff --git a/src/components/BoxColor/BoxColor.jsx b/src/components/BoxColor/BoxColor.jsx
@@ -0,0 +1,12 @@
+import './BoxColor.css'
+
+function BoxColor (props){
+    const { r, g, b } = props;
+    return (
+        <div className="boxColor" style={{ backgroundColor: `rgb(${r},${g},${b})` }}>
+             <p>rgb({r},{g},{b})</p>
+        </div>
+    )
+}
+
+export default BoxColor;
diff --git a/src/components/Carousel/Carousel.css b/src/components/Carousel/Carousel.css
@@ -0,0 +1,21 @@
+.Carousel {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    margin: 20px;
+    height: 300px;
+    padding: 20px;
+    border: 1px solid black;
+    border-radius: 5px;
+    img {
+        height: 100%;
+    }
+
+
+        button{
+            padding: 10px 15px 10px 15px;
+            font-size: larger;
+            margin: 10px;
+        }
+
+}
diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx
@@ -0,0 +1,34 @@
+import { useState } from "react";
+import "./Carousel.css";
+
+function Carousel({ images }) {
+  const [position, usePosition] = useState(0);
+
+  const rightClick = () => {
+    usePosition((prevPosition) => (prevPosition === 3 ? 0 : prevPosition + 1));
+  };
+
+  const leftClick = () => {
+    usePosition((prevPosition) => 
+      prevPosition === 0 ? 3 : prevPosition - 1
+    );
+  };
+
+  return (
+    <div className="Carousel">
+      <div>
+        <button className="buttons-divs" onClick={leftClick}>
+          Left
+        </button>
+      </div>
+      <img src={images[position]} alt="" />
+      <div>
+        <button className="buttons-divs" onClick={rightClick}>
+          Right
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Carousel;
diff --git a/src/components/ClickablePicture/ClickablePicture.css b/src/components/ClickablePicture/ClickablePicture.css
@@ -0,0 +1,29 @@
+
+.image-container {
+    margin: 20px;
+    position: relative;
+    width: fit-content; 
+    height: 300px; 
+
+
+  }
+
+  .background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    width: 300px;
+    height: auto;
+  }
+  .no-display{
+    display: none;
+  }
+  .display {
+    width: 200px;
+    position: absolute;
+    transform: translate(27%, 58%);
+
+  }
+
diff --git a/src/components/ClickablePicture/ClickablePicture.jsx b/src/components/ClickablePicture/ClickablePicture.jsx
@@ -0,0 +1,28 @@
+import "./ClickablePicture.css";
+import glasses from "./../../assets/images/glasses.png";
+import { useState } from "react";
+
+function ClickablePicture(props) {
+  const [curr, setCurr] = useState("display");
+  const putGlasses = (e) => {
+    if (curr === "display") {
+      setCurr("no-display");
+    } else if (curr === "no-display") {
+      setCurr("display");
+    }
+  };
+
+  return (
+    <div className="container">
+
+      <div className="image-container" onClick={putGlasses}>
+
+        <img className="background-image" src={props.img} alt="" />
+        <img className={curr} src={glasses} alt="" />
+
+      </div>
+    </div>
+  );
+}
+
+export default ClickablePicture;
diff --git a/src/components/CreditCard/CreditCard.css b/src/components/CreditCard/CreditCard.css
@@ -0,0 +1,37 @@
+.creditCard {
+    box-sizing: border-box; 
+    border-radius: 8px;
+    width: 380px; /* scalable size */
+    height:200px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+        .bank{
+            display: flex;
+            justify-content: end;
+            img{
+                width: 60px;
+
+            }
+
+        }
+        .card-num{
+            font-size: 38px;
+        }
+        .info {
+            font-size: 16px;
+            div{
+                display: flex;
+                p{
+                    margin:0 25px 0 0;
+                }
+            }
+            p{
+
+                text-align: left;
+                margin:0;
+
+            }
+        }
+    }
diff --git a/src/components/CreditCard/CreditCard.jsx b/src/components/CreditCard/CreditCard.jsx
@@ -0,0 +1,59 @@
+import "./CreditCard.css";
+import visa from "../../assets/images/visa.png";
+import masterCard from "../../assets/images/master-card.svg";
+
+function CreditCard(props) {
+  function getVisaType(type) {
+    if (type === "Master Card") {
+      return masterCard;
+    }
+    if (type === "Visa") {
+      return visa;
+    }
+  }
+
+  const bgColor = props.bgColor;
+  const textColor = props.color;
+  const cardNumBlr = (cardNumber) => {
+    const cardStr = String(cardNumber);
+    const masked = "•".repeat(cardStr.length - 4) + cardStr.slice(-4);
+    return masked.replace(/(.{4})(?=.)/g, "$1 "); // Adds space after every 4 characters
+  };
+  const getMonth = (num) => {
+    if (num <= 9) {
+      let numToArr = num.toString().split("");
+      return ["0", ...numToArr].join("");
+    } else {
+      return num;
+    }
+  };
+  const getYear = (year) => {
+    return year.toString().split("").slice(-2).join("");
+  };
+
+  return (
+    <div
+      className="creditCard"
+      style={{ backgroundColor: `${bgColor}`, color: `${textColor}` }}
+    >
+        <div className="bank">
+            <img src={getVisaType(props.type)} alt="" />
+        </div>
+
+        <div className="card-num">{cardNumBlr(props.number)}</div>
+
+        <div className="info">
+            <div>
+            <p>
+                Expires:{getMonth(props.expirationMonth)}/
+                {getYear(props.expirationYear)}
+            </p>
+            <p>{props.bank}</p>
+            </div>
+            <p>{props.owner}</p>
+        </div>
+    </div>
+  );
+}
+
+export default CreditCard;