done Bryan

src/App.jsx

@@ -1,9 +1,110 @@
-import "./App.css";
+import BoxColor from "./components/BoxColor";
+import CreditCard from "./components/CreditCard";
+import DriverCard from "./components/DriverCard";
+import Greetings from "./components/Greetings";
+import IdCard from "./components/IdCard";
+import Random from "./components/Random";
+import Rating from "./components/Rating";
 
 function App() {
   return (
     <div className="App">
+
       <h1> LAB | React Training</h1>
+
+      <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} />
+
+
+      <div className="cards-container">
+        <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>
+
+
+      <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"
+        }}
+      />
+
     </div>
   );
 }

src/components/BoxColor.jsx

@@ -0,0 +1,21 @@
+function BoxColor({ r, g, b }) {
+
+  const hex = "#" +
+              r.toString(16).padStart(2, "0") +
+              g.toString(16).padStart(2, "0") +
+              b.toString(16).padStart(2, "0")
+
+  const style = {backgroundColor: `rgb(${r},${g},${b})`,
+                padding: "10px",
+                border: "1px solid black",
+                textAlign: "center"}
+
+  return (
+    <div style={style}>
+      <p>rgb({r},{g},{b})</p>
+      <p>{hex}</p>
+    </div>
+  )
+}
+
+export default BoxColor

src/components/CreditCard.jsx

@@ -0,0 +1,35 @@
+import imageVisa from "../assets/images/visa.png"
+import imageMasterCard from "../assets/images/master-card.svg"
+
+
+function CreditCard({type, number, expirationMonth, expirationYear, bank, owner, bgColor, color}) {
+
+    const style = { border: "1px solid black",
+                    width: "420px",
+                    height: "250px",
+                    backgroundColor: bgColor,
+                    borderRadius: "20px",
+                    color: color,
+                    margin: " 20px 20px 20px 0 ",
+                    padding: "20px"
+
+    } 
+
+    return (
+        <div style={style}>
+            <div style={{display:"flex", justifyContent:"flex-end"}}>
+            {type === "Visa"? 
+             <img src={imageVisa} style={{width:"110px", height:"40px"}}/>:
+             <img src={imageMasterCard} style={{width:"80px", height:"40px"}}/>}
+             </div>
+             <div>
+            <p style={{fontSize: "2.5rem"}}>{number.match(/.{1,4}/g).join(" ")}</p>
+            <span>Expires: {String(expirationMonth).padStart(2, "0")}/{expirationYear.toString().slice(-2)}</span> 
+            <span style={{paddingLeft:"20px"}}>{bank}</span>
+            <p>{owner}</p>
+            </div>
+        </div>  
+    )
+}
+
+export default CreditCard

src/components/DriverCard.jsx

@@ -0,0 +1,26 @@
+import Rating from "./Rating"
+
+function DriverCard({name, rating, img, car}) {
+
+    const style = {borderRadius:"50%", 
+                   width:"200px", 
+                   height:"200px",
+                   objectFit: "cover",
+                   }
+
+    return(
+        <div className="driver-card-container">
+            <div style={{display:"flex", alignItems:"center"}}>
+                <img src={img} alt="" style={style}/>
+                <div style={{color:"white", marginLeft:"20px"}}>
+                    <h1>{name}</h1>
+                    <Rating>{rating}</Rating>
+                    <p style={{fontSize:"1.4rem"}}>{car.model} - {car.licensePlate}</p>
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default DriverCard

src/components/Greetings.jsx

@@ -0,0 +1,28 @@
+
+function Greetings({lang, children}) {
+
+    let greeting = ""
+
+    if(lang === "de"){
+        greeting = "Hallo"
+    } else if(lang === "en"){
+        greeting = "Hello"
+    } else if(lang === "es"){
+        greeting = "Hola"
+    } else if(lang ==="fr"){
+        greeting = "Bonjour"
+    }
+
+    const style = {border: "1px solid black", 
+                   padding:"10px", 
+                   marginBottom:"10px"}
+
+    return (
+        <div style={style}>
+            <p>{greeting} {children}</p>
+        </div>
+
+    )
+}
+
+export default Greetings

src/components/IdCard.jsx

@@ -0,0 +1,23 @@
+function IdCard({lastName, firstName, gender, height, birth, picture}){
+
+    const style = {border: "1px solid black", 
+                   display: "flex", 
+                   margin: "10px 0", 
+                   padding: "10px"}
+
+    return (
+        <div className="card-container" style={style}>    
+            <img src={picture} alt="user" style={{width:"200px"}}></img>
+            <div className="user-data" style={{margin: "0 20px"}}>
+                <p>First name: {firstName}</p>
+                <p>Last name: {lastName}</p>
+                <p>Gender: {gender}</p>
+                <p>Heigth: {(height / 100).toFixed(2).replace(".", ",")}</p>
+                <p>Birth: {birth.toDateString()}</p>
+            </div>
+        </div>
+    )
+
+}
+
+export default IdCard

src/components/Random.jsx

@@ -0,0 +1,18 @@
+function Random({ min, max }) {
+
+    const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min
+
+    const style = {
+        border: "1px solid black",
+        padding: "10px",
+        marginBottom: "10px"
+    }
+
+    return (
+        <div style={{style}}>
+            <p>Random value between {min} and {max} ={">"} {randomNumber} </p>
+        </div>
+    )
+}
+
+export default Random

src/components/Rating.jsx

@@ -0,0 +1,14 @@
+function Rating({ children }) {
+
+    const rating = Math.round(children)
+
+    return (
+        <p style={{fontSize: "3rem"}}>
+            {"★".repeat(rating)}
+            {"☆".repeat(5 - rating)}
+        </p>
+    )
+
+}
+
+export default Rating

src/index.css

@@ -1,5 +1,5 @@
 body {
-  margin: 0;
+  margin: 10px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
@@ -11,3 +11,25 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.cards-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.driver-card-container {
+  background-color: #455EB5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 16px;
+  margin-bottom: 20px;
+  height: 250px;
+}
+
+.driver-card-container p, h1{
+
+  margin-top: 0;
+  margin-bottom: 0;
+
+}