Balram-internship

src/App.css

@@ -1,38 +1,6 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+#ccards {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  gap: 20px;
 }

src/App.js

@@ -1,23 +1,125 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+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 RGBColorPicker from "./components/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} />
+      <div id="ccards">
+        <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 />
+      <LikeButton />
+      <br />
+      <ClickablePicture
+        img="./assets/images/maxence.png"
+        imgClicked="./assets/images/maxence-glasses.png"
+      />
+      <br />
+      <Dice />
+      <br />
+      <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} />
+      <RGBColorPicker />
     </div>
   );
 }

src/components/BoxColor.css

@@ -0,0 +1,12 @@
+#cbox {
+  border: 3px solid black;
+  padding: 40px;
+  font-size: 25px;
+  margin: 10px auto;
+  width: 50%;
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

src/components/BoxColor.js

@@ -0,0 +1,15 @@
+import "./BoxColor.css";
+
+function BoxColor({ r, g, b }) {
+  let rgbValue = `rgb(${r}, ${g}, ${b})`;
+  let hexValue =
+    "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
+  return (
+    <div id="cbox" style={{ background: rgbValue }}>
+      <div>{rgbValue}</div>
+      <div>{hexValue}</div>
+    </div>
+  );
+}
+
+export default BoxColor;

src/components/Carousel.css

@@ -0,0 +1,6 @@
+#carousel {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 10px;
+}

src/components/Carousel.js

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import "./Carousel.css";
+
+function Carousel({ images }) {
+  let imgArray = [...images];
+  const [pic, setPic] = useState(0);
+  function handleLeftClick() {
+    if (pic === 0) {
+      setPic(imgArray.length - 1);
+    } else {
+      setPic(pic - 1);
+    }
+  }
+  function handleRightClick() {
+    if (pic === imgArray.length - 1) {
+      setPic(0);
+    } else {
+      setPic(pic + 1);
+    }
+  }
+  return (
+    <div id="carousel">
+      <button onClick={handleLeftClick}>Left</button>
+      <img src={imgArray[pic]} alt="carousel" />
+      <button onClick={handleRightClick}>Right</button>
+    </div>
+  );
+}
+
+export default Carousel;

src/components/ClickablePicture.js

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+function ClickablePicture(props) {
+  const [glass, setGlass] = useState(false);
+  let pic = props.img.slice(props.img.lastIndexOf("/") + 1);
+  let picClicked = props.imgClicked.slice(
+    props.imgClicked.lastIndexOf("/") + 1
+  );
+  let source = glass ? picClicked : pic;
+  return (
+    <img
+      src={require(`../assets/images/${source}`)}
+      alt="glasses"
+      onClick={() => setGlass(!glass)}
+      style={{ cursor: "pointer" }}
+    />
+  );
+}
+
+export default ClickablePicture;

src/components/CreditCard.css

@@ -0,0 +1,26 @@
+#ccbox {
+  width: 250px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 15px;
+  border-radius: 10px;
+  gap: 8px;
+}
+
+#cnumber {
+  font-size: 30px;
+  align-self: center;
+}
+
+#ccbox img {
+  align-self: flex-end;
+}
+
+#cdetails {
+  font-size: 15px;
+}
+
+#cdetails span {
+  margin-left: 15px;
+}

src/components/CreditCard.js

@@ -0,0 +1,43 @@
+import "./CreditCard.css";
+import logo from "../assets/images/visa.png";
+import icon from "../assets/images/master-card-copy.svg";
+
+function CreditCard({
+  type,
+  number,
+  expirationMonth,
+  expirationYear,
+  bank,
+  owner,
+  bgColor,
+  color,
+}) {
+  let cardStyle = { background: bgColor, color: color };
+  let month = expirationMonth.toString().padStart(2, "0");
+  let year = expirationYear.toString().slice(-2);
+  let maskNumber = number.slice(-4).padStart(number.length, "•");
+  let cardNumber =
+    maskNumber.slice(0, 4) +
+    " " +
+    maskNumber.slice(4, 8) +
+    " " +
+    maskNumber.slice(8, 12) +
+    " " +
+    maskNumber.slice(12, 16);
+  return (
+    <div id="ccbox" style={cardStyle}>
+      <img src={type === "Visa" ? logo : icon} alt={type} width={50} />
+      <div id="cnumber">{cardNumber}</div>
+      <div id="cdetails">
+        <div>
+          {" "}
+          Expires {month}/{year}
+          <span>{bank}</span>
+        </div>
+        <div>{owner}</div>
+      </div>
+    </div>
+  );
+}
+
+export default CreditCard;

src/components/Dice.js

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+function Dice() {
+  let randomDice = Math.floor(Math.random() * 6) + 1;
+  const [dice, setDice] = useState(randomDice);
+  function handleClick() {
+    setDice("-empty");
+    setTimeout(() => setDice(randomDice), 1000);
+  }
+  return (
+    <img
+      src={require(`../assets/images/dice${dice}.png`)}
+      alt="dice"
+      width="300"
+      onClick={handleClick}
+    />
+  );
+}
+
+export default Dice;