[MAD DE] Fredi Menárguez

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/BoxColor.css

@@ -0,0 +1,8 @@
+.background-color-box {
+    font-weight: bold;
+    display: flex;
+    border: 1px solid black;
+    padding: 1rem;
+    border-radius: 10px;
+    margin: 1rem;
+}

src/BoxColor.js

@@ -0,0 +1,18 @@
+import "./BoxColor.css"
+
+const BoxColor = (props) => {
+
+    function rgbToHex(r, g, b) {
+        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+      }
+
+    return(
+        <div style={{backgroundColor: `rgb(${props.r},${props.g},${props.b})`}} className="background-color-box">
+            <p>rgb({props.r}, {props.g}, {props.b})</p>
+            <p>{rgbToHex(props.r, props.g, props.b)} </p>
+        </div>
+    )
+
+}
+
+export default BoxColor

src/CreditCard.css

@@ -0,0 +1,9 @@
+.credit-card {
+    width: 300px;
+    height: 150px;
+    margin: 40px;
+    padding: 20px;
+    border: 1px solid black;
+    border-radius: 10px;
+    display: inline-block;
+}

src/CreditCard.js

@@ -0,0 +1,24 @@
+import './CreditCard.css'
+
+function CreditCard(props) {
+    const number = `${props.number}`.slice(12);
+    const num = `···· ···· ···· ${number}`
+    return (
+
+      <div className="credit-card" style={{backgroundColor:props.bgColor, color:props.color}}>
+
+    <div>
+      {<strong className="">{props.type}</strong> }
+      <p className="">{num} </p>
+      <p className=""> Expire {props.expirationMonth} / {props.expirationYear} {props.bank} </p>
+      <p className="">{props.owner} </p>
+    </div>
+
+      </div>
+
+    );
+  }
+
+export default CreditCard
+
+

src/DriverCard.css

@@ -0,0 +1,27 @@
+.driver-card{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: #455EB5;
+	margin-top: 10px;
+	border-radius: 10px;
+	color: white;
+	gap: 30px;
+	width: 800px;
+    font-weight: bold;
+    padding: 1rem;
+    margin: 1rem;
+}
+
+.driver-img{
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	background-size: cover;
+	background-repeat: no-repeat;
+}
+
+.letras{
+    display: flex;
+}
+

src/DriverCard.js

@@ -0,0 +1,18 @@
+import './DriverCard.css'
+import Rating from './Rating'
+
+
+function DriverCard(props) {
+  return (
+    <div className="driver-card">
+    <img src={props.img} className="driver-img" alt="---" />
+    <p className="letras">{props.name}</p>
+    <Rating className="letras">{props.rating}</Rating>
+    <p className="letras">{props.car.model} </p>
+    <p className="letras">{props.car.licensePlate} </p>
+
+    </div>
+  );
+}
+
+export default DriverCard;

src/Greetings.css

@@ -0,0 +1,10 @@
+
+
+.greeting {
+    font-weight: bold;
+    display: flex;
+    border: 1px solid black;
+    padding: 1rem;
+    border-radius: 10px;
+    margin: 1rem;
+}

src/Greetings.js

@@ -0,0 +1,23 @@
+import './Greetings.css'
+const Greetings = (props) => {
+
+    const expression = (lang) => {
+        switch(lang){
+            case "de":
+                return "Hallo";  
+            case "en":
+                return "Hello";  
+            case "fr":
+                return "Bonjour";
+            case "es":
+                return "Hola";
+            default:
+                return "Hello";
+        }
+    }
+    return (
+        <h2 className="greeting"> {expression(props.lang)} {props.children}</h2>
+    )
+    }
+
+    export default Greetings

src/IdCard.css

@@ -0,0 +1,15 @@
+.card {
+    display: flex;
+    border: 1px solid black;
+    padding: 1rem;
+    border-radius: 10px;
+    margin: 1rem;
+}
+
+.letter {
+    font-weight: bold;
+}
+
+.img-card {
+    margin-right: 1rem;
+}

src/IdCard.js

@@ -0,0 +1,24 @@
+import './IdCard.css'
+const IdCard = (props) => {
+
+    const date = `${props.birth}`.slice(0,15);
+
+    return (
+        <article className="card">
+          <div>
+            <img class = "img-card" src={props.picture} alt={props.picture} />
+          </div>
+          <div>
+            <p className ="letter">Last Name: {props.lastName}</p>
+            <p className ="letter">First Name: {props.firstName}</p>
+            <p className ="letter">Gender: {props.gender}</p>
+            <p className ="letter">Height: {props.height}</p>
+            <p className ="letter">Birth: {date}</p>
+          </div>
+        </article>
+      )
+    }
+
+    export default IdCard
+
+

src/Random.css

@@ -0,0 +1,8 @@
+.random {
+    font-weight: bold;
+    display: flex;
+    border: 1px solid black;
+    padding: 1rem;
+    border-radius: 10px;
+    margin: 1rem;
+}

src/Random.js

@@ -0,0 +1,13 @@
+import "./Random.css"
+
+const Random = (props) => {
+
+    const randomNumber = (minValue, maxValue) => Math.floor((Math.random() * (minValue - maxValue)) + maxValue)
+
+    return (
+        <h2 className="random">Random value between {props.min} and {props.max} = {randomNumber(props.min, props.max)}</h2>
+    )
+
+}
+
+export default Random

src/Rating.css

@@ -0,0 +1,8 @@
+.starts {
+    font-weight: bold;
+    display: flex;
+    height: 20px;
+    width: 20px;
+
+    margin: 1rem;
+}

src/Rating.js

@@ -0,0 +1,28 @@
+import './Rating.css'
+
+const Rating = (props) => {
+  let starts = "";
+  let children = Math.round(props.children)
+
+if (children === 0) {
+  starts = '☆☆☆☆☆'
+}
+if (children === 1) {
+  starts = '★☆☆☆☆'
+}
+if (children === 2) {
+  starts = '★★☆☆☆'
+}
+if (children === 3) {
+  starts = '★★★☆☆'
+}
+if (children === 4) {
+  starts = '★★★★☆'
+}
+if (children === 5) {
+  starts = '★★★★★'
+}
+return <div className="starts">{starts}</div>;
+}
+
+export default Rating

src/index.js

@@ -1,11 +1,96 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import IdCard from './IdCard';
+import Greetings from './Greetings';
+import Random from './Random';
+import BoxColor from './BoxColor';
+import CreditCard from './CreditCard';
+import Rating from './Rating';
+import DriverCard from './DriverCard';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+
+<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} />
+
+<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" />
+
+<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"
+  }} />
+
+ </React.StrictMode>,
   document.getElementById('root')
-);
+);