FT-BCN ines

src/App.js

@@ -1,14 +1,67 @@
 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 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 lastName='Doe' firstName='John' gender='male' height={178} birth="1992-07-14" picture="https://randomuser.me/api/portraits/men/44.jpg"/>
+
+        <IdCard 
+          lastName='Delores '
+          firstName='Obrien'
+          gender='female'
+          height={172}
+          birth="1988-05-11"
+          picture="https://randomuser.me/api/portraits/women/44.jpg"
+        />
 
         <h1>Greetings</h1>
-        {/* TODO: Use the Greetings component */}
+        <Greetings lang="en">John</Greetings>
+        <Greetings lang="de">Ludwing</Greetings>
+        <Greetings lang="fr">Sonia</Greetings>
+        <Greetings lang="es">Alex</Greetings>
+
+        <h1>Random Number</h1>
+          <Random min={1} max={6}></Random>
+          <Random min={1} max={39}></Random>
+
+          <h1>Box Color</h1>
+          <BoxColor r={255} g={0} b={0} />
+          <BoxColor r={128} g={255} b={0} />
+
+          <h1>Rating</h1>
+          <Rating>0</Rating>
+          <Rating>1.49</Rating>
+          <Rating>1.5</Rating>
+          <Rating>3</Rating>
+          <Rating>4</Rating>
+          <Rating>5</Rating>
+
+          <h1>Driver Card</h1>
+          <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"
+            }} />
+
       </div>
     );
   }

src/components/BoxColor.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const BoxColor = ({r, g, b}) => {
+    return (
+        <div style={{height:50, width: 300, backgroundColor: `rgb(${r},${g},${b})`}}>
+            <p>rgb({r},{g},{b})</p>
+        </div>
+    )
+}
+
+export default BoxColor

src/components/DriverCard.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import Rating from './Rating'
+
+const DriverCard = (props) => {
+    return (
+        <div style={{backgroundColor:'blue', borderRadius:6, display:'flex', justifyContent:'center'}} >
+        <figure style={{borderRadius: '50%', height:50, width:50}} >
+            <img src={props.img} alt="" style={{width:'100%'}} />
+        </figure>
+        <div style={{color: 'white'}} >
+            <h2>{props.name}</h2>
+            <Rating>{props.rating}</Rating>
+            <p>{props.car.model} - {props.car.licensePlate}</p>
+        </div>
+
+        </div>
+    )
+}
+
+export default DriverCard

src/components/Greetings.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const Greetings = ({lang, children}) => {
+    let greet = ""
+    switch (lang) {
+        case "en":
+                greet = "Hello"
+            break;
+        case "fr":
+                greet = "Bonjour"
+            break;
+        case "es":
+                greet = "Hola"
+            break;
+         case "de":
+                greet = "Hallo"
+            break;
+        default:
+            break;
+    }
+    return (
+        <p>
+        {""+greet+' '+children}
+        </p>
+    )
+}
+
+export default Greetings
+

src/components/IdCard.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+ const IdCard = (props) => {
+    return (
+        <div>
+            <figure className='imgContainer'>
+                <img src={props.picture} alt=""/>
+            </figure>
+            <div className='infoContainer'>
+                <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>Height:</strong>{props.heigth}</p>
+                <p><strong>Birth:</strong>{props.birth}</p>
+            </div>
+        </div>
+    )
+}
+export default IdCard

src/components/Random.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Random = ({min, max}) => {
+    const randomNum = (num)=> Math.floor(Math.random() * (max - min) + min)
+    return (
+        <div>
+            <p>Random value between {min} and {max} => {randomNum(max)}</p>
+        </div>
+    )
+}
+
+export default Random

src/components/Rating.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const Rating = ({children}, props) => {
+    console.log(props)
+    const roundNum = Math.round(children);
+
+    const fullStars = (roundNum) =>{
+        let aux = ''
+        for(let i=0; i < roundNum+1; i++){
+            aux = aux + '★'
+        }
+        return aux
+    }
+    const emptyStars = (roundNum) =>{
+        let aux=''
+        for(let i=0; i < 5-roundNum; i++){
+            aux = aux+'☆'
+        }
+        return aux
+    }
+
+    return (
+        <div>
+            <p>{fullStars(roundNum)}{emptyStars(roundNum)}</p>
+        </div>
+    )
+}
+
+export default Rating