lab almost done

package.json

@@ -8,8 +8,8 @@
     "react-scripts": "4.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
+    "build": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/App.css

@@ -1,5 +1,8 @@
 .App {
-  text-align: center;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .App-logo {
@@ -14,20 +17,35 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  /* background-color: white;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: white; */
 }
 
 .App-link {
   color: #61dafb;
 }
 
+body{
+  background-color: #282c34;
+}
+
+h1 {
+  display: flex;
+  justify-content: center;
+  color: white;
+}
+
+.hr {
+  width: 100%;
+  margin-top: 50px;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.js

@@ -1,25 +1,86 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import IdCard from './IdCard';
+import Greetings from './Greetings';
+import Random from './Random';
+import BoxColor from './BoxColor'
+import CreditCard from './CreditCard'
+import './App.css'
+
+
 
 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>
+      <h1> ID Card </h1>
+      <IdCard
+        lastName='Doe'
+        firstName='John'
+        gender='Male'
+        heigth={178}
+        birth={new Date("1992-07-14")}
+        picture="https://randomuser.me/api/portraits/men/44.jpg"
+      />
+
+      <IdCard
+        lastName='Delores '
+        firstName='Obrien'
+        gender='Female'
+        heigth={172}
+        birth={new Date("1988-05-11")}
+        picture="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+      <hr class="hr"/>
+
+      <h1>Greetings</h1>
+      <Greetings lang="de">Ludwig</Greetings>
+      <Greetings lang="fr">François</Greetings>
+      <Greetings lang="en">English</Greetings>
+      <Greetings lang="es">Español</Greetings>
+      <hr class="hr"/>
+
+      <h1>Random</h1>
+      <Random min={1} max={6}/>
+      <Random min={1} max={100}/>
+      <hr class="hr"/>
+
+      <h1>Box Color</h1>
+      <BoxColor r={255} g={0} b={0} />
+      <BoxColor r={128} g={255} b={0} />
+      <hr class="hr"/>
+
+      <h1>Credit Card</h1>
+      <CreditCard
+        type="Visa"
+        number="0123456789018845"
+        expirationMonth={3}
+        expirationYear={21}
+        bank="BNP"
+        owner="Maxence Bouret"
+        bgColor="#11aa99"x
+        color="white" />
+      <CreditCard
+        type="Master Card"
+        number="0123456789010995"
+        expirationMonth={3}
+        expirationYear={21}
+        bank="N26"
+        owner="Maxence Bouret"
+        bgColor="#eeeeee"
+        color="#222222" />
+    <CreditCard
+        type="Visa"
+        number="0123456789016984"
+        expirationMonth={12}
+        expirationYear={19}
+        bank="Name of the Bank"
+        owner="Firstname Lastname"
+        bgColor="#ddbb55"
+        color="white" />
+
+
+
     </div>
+
   );
 }
 

src/BoxColor.css

@@ -0,0 +1,9 @@
+
+
+.box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+    width: 900px;
+}

src/BoxColor.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import './BoxColor.css'
+
+const divStyle = (r, g, b) => {
+   return {
+     backgroundColor: `rgb(${r}, ${g}, ${b})`,
+   }
+}
+
+const BoxColor = (props) => {
+
+  return (
+    <article className="boxColor">
+        <div class="box" style={divStyle(props.r, props.g, props.b)}>Box Color</div>
+    </article>
+  )
+}
+
+
+export default BoxColor;

src/CreditCard.css

@@ -0,0 +1,22 @@
+
+
+.CreditCard {
+    margin-bottom: 10px;
+    border-radius: 10px;
+    width: 400px;
+    height: 200px;
+}
+
+.CreditCard img {
+    width: 80px;
+}
+
+.accountNumber {
+    font-size: 24px;
+    display: flex;
+    justify-content: center;
+}
+
+.expiration {
+    display: flex;
+}

src/CreditCard.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import './CreditCard.css';
+
+import img1 from './img/visa.png'
+import img2 from './img/master-card.svg'
+
+const hiddenString = (number) => {
+    return number.substr(-4)
+}
+const CreditCard = (props) => {
+
+    const styles = {
+      background: props.bgColor,
+      color: props.color,
+    };
+
+    return (
+      <div className="CreditCard" style={styles}>
+        <img src={props.type === 'Visa' ? img1 : img2} alt=""/>
+        <p class="accountNumber"> ************ {hiddenString(props.number)}</p>
+        <div className="row">
+          <div className="expiration">
+            <p>
+              Expires {props.expirationMonth}/{props.expirationYear}
+            </p>
+            <p>{props.bank}</p>
+          </div>
+        </div>
+        <p className="owner">{props.owner}</p>
+      </div>
+    );
+  }
+  export default CreditCard;
+
+

src/Greetings.css

@@ -0,0 +1,11 @@
+
+
+.greetings {
+    display: flex;
+    justify-content: center;
+    margin-top: 15px;
+    border: 1px solid white;
+    border-radius: 10px;
+    width: 200px;
+    color: white;
+}

src/Greetings.js

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

src/IdCard.css

@@ -0,0 +1,29 @@
+
+.card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 600px;
+    border: 1px solid white;
+    border-radius: 10px;
+    margin-top: 20px;
+    height: 180px;
+}
+
+.card img {
+    width: 150x;
+    height: 150px;
+    margin-left: 20px;
+}
+
+.cardText {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+
+}
+
+.card p {
+    margin: 2px 0;
+    color: white;
+}

src/IdCard.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import './IdCard.css'
+
+const IdCard = (props) => {
+
+  return (
+    <article className="card">
+          <img src={props.picture} />
+        <div className="cardText">
+          <p><strong>First Name</strong>: {props.firstName}</p>
+          <p><strong>Last Name</strong>: {props.lastName}</p>
+          <p><strong>Gender</strong>: {props.gender}</p>
+          <p><strong>Heigth</strong>: {props.heigth}</p>
+          <p><strong>Birthday</strong>: {props.birth.toDateString()}</p>
+        </div>
+    </article>
+  )
+}
+
+export default IdCard;

src/Random.css

@@ -0,0 +1,10 @@
+
+.random {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
+    width: 300px;
+    color: white;
+    border: 1px solid white;
+    border-radius: 10px;
+}

src/Random.js

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