BCN-Tash-PT

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-scripts": "2.1.5"
   },
   "scripts": {

src/App.js

@@ -1,14 +1,71 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
+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";
 
 class App extends Component {
   render() {
     return (
       <div className="App">
         <h1>IdCard</h1>
-        {/* TODO: Use the IdCard component */}
-
+        <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"
+        />
         <h1>Greetings</h1>
-        {/* TODO: Use the Greetings component */}
+        <Greetings lang="de">Ludwig</Greetings>
+        <Greetings lang="fr">François</Greetings>
+        <h1>Random</h1>
+        <Random min={1} max={6} />
+        <Random min={1} max={100} />
+        <h1>BoxColor</h1>
+        <BoxColor r={255} g={0} b={0} />
+        <BoxColor r={128} g={255} b={0} />
+        <h1>CreditCard</h1>
+        <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>
     );
   }

src/components/BoxColor.css

@@ -0,0 +1,7 @@
+.BoxColor {
+  display: flex;
+  border-style: solid;
+  align-items: center;
+  margin: 5px;
+  justify-content: center;
+}

src/components/BoxColor.js

@@ -0,0 +1,16 @@
+import React from "react";
+import "./BoxColor.css";
+
+// option 1
+const BoxColor = props => {
+  // const { r, g, b } = props;
+  const rgb = `rgb(${props.r},${props.g},${props.b})`;
+
+  return (
+    <div className="BoxColor" style={{ backgroundColor: rgb }}>
+      rgb({props.r},{props.g},{props.b})
+    </div>
+  );
+};
+
+export default BoxColor;

src/components/CreditCard.css

@@ -0,0 +1,12 @@
+.CreditCard {
+  display: flex;
+  border-style: solid;
+  align-items: center;
+  margin: 5px;
+  justify-content: space-between;
+}
+
+.CreditCard-pic {
+  border-radius: 8px;
+  max-width: 10%;
+}

src/components/CreditCard.js

@@ -0,0 +1,41 @@
+import React from "react";
+import "./CreditCard.css";
+
+// option 1
+const CreditCard = props => {
+  const {
+    type,
+    number,
+    expirationMonth,
+    expirationYear,
+    bank,
+    owner,
+    bgColor,
+    color
+  } = props;
+  return (
+    <div
+      className="CreditCard"
+      style={{ backgroundColor: bgColor, color: color }}
+    >
+      <section>
+        <p>•••• •••• •••• {number.slice(12, 16)}</p>
+      </section>
+      <section>
+        {expirationMonth < 10 ? `0${expirationMonth}` : `${expirationMonth}`}
+        {expirationYear.toString().slice(2, 4)}
+      </section>
+      <section>{bank}</section>
+      <section>{owner}</section>
+      <section>
+        <img
+          className="CreditCard-pic"
+          src={type === "Visa" ? "/img/visa.png" : "/img/master-card.svg"}
+          alt=""
+        />
+      </section>
+    </div>
+  );
+};
+
+export default CreditCard;

src/components/Greetings.css

@@ -0,0 +1,6 @@
+.Greetings {
+  display: flex;
+  border-style: solid;
+  align-items: center;
+  margin: 5px;
+}

src/components/Greetings.js

@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+import "./Greetings.css";
+
+// option 1
+const Greetings = props => {
+  return (
+    <div className="Greetings">
+      {props.lang === "de" ? (
+        <p>Hallo {props.children}</p>
+      ) : (
+        <p>Bonjour {props.children}</p>
+      )}
+    </div>
+  );
+};
+
+export default Greetings;

src/components/IdCard.css

@@ -0,0 +1,11 @@
+.IdCard {
+  display: flex;
+  border-style: solid;
+  align-items: center;
+  margin: 5px;
+}
+
+.IdCard-pic {
+  margin-left: 10px;
+  margin-right: 10px;
+}

src/components/IdCard.js

@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import "./IdCard.css";
+
+// option 1
+const IdCard = props => {
+  return (
+    <div className="IdCard">
+      <div className="IdCard-pic">
+        <img src={props.picture} alt=""></img>
+      </div>
+      <div>
+        <p>{props.lastName}</p>
+        <p>{props.firstName}</p>
+        <p>{props.gender}</p>
+        <p>{props.height}</p>
+        <p>{props.birth.toString()}</p>
+      </div>
+    </div>
+  );
+};
+
+// option 2
+// function IdCard(props) {
+//   return <h1>Hello, {props.lastName}</h1>;
+// }
+
+// option 3
+// class IdCard extends React.Component {
+//   render() {
+//     return <h1>Hello, {this.props.lastName}</h1>;
+//   }
+// }
+
+export default IdCard;

src/components/Random.css

@@ -0,0 +1,6 @@
+.Random {
+  display: flex;
+  border-style: solid;
+  align-items: center;
+  margin: 5px;
+}

src/components/Random.js

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