BCN -FT - JUNDI Y GLORIA

src/App.js

@@ -1,14 +1,60 @@
 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';
+import Rating from './components/Rating';
+import DriverCard from './components/DriverCard';
+
 
 class App extends Component {
   render() {
     return (
       <div className="App">
         <h1>IdCard</h1>
-        {/* TODO: Use the IdCard component */}
-
+        <IdCard name="John" surname="Doe" gender="male" height={178} birth={new Date("1992-07-14")} imageurl="https://randomuser.me/api/portraits/men/44.jpg"/>
+        <IdCard name="Obrien" surname="Delores" gender="female" height={172} birth={new Date("1993-05-11")} imageurl="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>
+        <p>Random value between 1 and 6 => <Random min={1} max={6}/></p>
+        <p>Random value between 1 and 100 => <Random min={1} max={100}/></p>
+        <h1>Box Color</h1>
+        <BoxColor r={255} g={0} b={0}/>
+        <BoxColor r={128} g={255} b={0}/>
+        <h1>Credit Card</h1>
+        <CreditCard type="Visa" number="0123456789018845" expirationMonth={3} expirationYear={2021} bank="BNP" owner="Maxence Bouret"/>
+        <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" />
+        <h1>Rating</h1>
+        <Rating>0</Rating>
+        <Rating>1.49</Rating>
+        <Rating>1.5</Rating>
+        <Rating>3</Rating>
+        <Rating>4</Rating>
+        <Rating>5</Rating>
+        <h1>DriverCard</h1>
+        <DriverCard />
+
       </div>
     );
   }

src/components/BoxColor.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+function BoxColor(props) {
+    let color = {
+        r: props.r,
+        g: props.g,
+        b: props.b,
+    }
+
+    let colorBox= { 
+        backgroundColor: `rgb(${color.r},${color.g},${color.b})`
+    }
+    return (
+        <div className="box" style={colorBox}> </div>
+    )
+}
+
+export default BoxColor;

src/components/CreditCard.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+ function CreditCard(props) {
+    // let image = ""
+    //  if(type==='Visa'){
+         return (
+             <div className= "creditcard">
+                 <ul>
+                     <li>{props.type}</li> 
+                     <li>{props.number}</li>
+                     <li>Expires {props.expirationMonth}/{props.expirationYear}</li>
+                     <li>{props.bank}</li>
+                     <li>{props.owner}</li>
+                 </ul>
+             </div>
+         )
+     }
+
+export default CreditCard;

src/components/DriverCard.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import Rating from './Rating';
+
+function DriverCard(props) {
+    return (
+        <div>
+            <img src='{props.img}'></img>
+            <p> {props.car}</p>
+            <Rating></Rating>
+            <p></p>
+        </div>
+    )
+}
+export default DriverCard;

src/components/Greetings.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+function Greetings(props) {
+    let makeWords = (lang) => {
+        let result = ''
+       if(lang === "de" ) {
+           result = "Hallo"
+       } else if(lang==="en"){
+           result = "Hello"
+       } else if (lang==="es"){
+           result = "Hola"
+       } else if(lang==="fr"){
+           result = "Bonjour"
+       }
+       return result;
+    }
+    return (
+
+        <div>
+            <p>{makeWords(props.lang)} {props.children}</p>
+
+        </div>
+    )
+}
+export default Greetings;

src/components/IdCard.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+function IdCard(props) {
+    return (
+        <ul>
+            <li>First Name: {props.name}</li>
+            <li>Last Name: {props.surname}</li>
+            <li>Gender: {props.gender}</li>
+            <li>Height: {props.height}</li>
+            <li>Birth: {props.birth.toString()}</li>
+            <li><img src={props.imageurl} alt= "profile from idCard"/></li>
+        </ul>
+    )
+}
+export default IdCard;

src/components/Random.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+function Random(props) {
+    return (
+        <>
+            {Math.round(Math.random()*(props.max-props.min)+props.min)}
+        </>
+    )
+}
+export default Random;

src/components/Rating.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+function Rating(props) {
+    let stars = '';
+    for (let i=0; i < 5; i++) {
+       (Math.round(props.children) <= i) ? stars += '☆' : stars += '★'
+    }
+    return (
+        <div>
+            <p>{stars}</p>
+        </div>
+    )
+}
+export default Rating;

src/index.css

@@ -12,3 +12,14 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.box {
+  width: 100%;
+  height: 200px;
+}
+.creditcard{
+  background-color: #11aa99;
+  color: white;
+  width: 30%;
+  height: 20%;
+}