lab ass done

src/App.js

@@ -1,6 +1,13 @@
 import logo from './logo.svg';
 import './App.css';
-
+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 LikeButton from "./components/LikeButton";
+import ClickablePicture from "./components/ClickablePicture";
+import Dice from "./components/Dice"; 
 function App() {
   return (
     <div className="App">
@@ -18,6 +25,74 @@ function App() {
           Learn React
         </a>
       </header>
+            <IDcard
+        picture="https://randomuser.me/api/portraits/men/44.jpg"
+        firstName="John"
+        lastName="Doe"
+        gender="male"
+        height={178}
+        birth={new Date("1992-07-14")}
+      />
+      <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={2} 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"
+      />
+
+      <LikeButton />
+      <LikeButton />
+
+      <ClickablePicture
+        img= {require('./assets/images/maxence.png')}
+        imgClicked={require("./assets/images/maxence-glasses.png")}
+      />
+      <Dice/>
     </div>
   );
 }

src/Components/Boxcolour.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const BoxColor = ({r,g,b}) => {
+    const divStyle ={
+        backgroundColor:`rgb(${r},${g},${b})`,
+        height:'40px',
+        border:'1px solid black'
+    }
+  return (
+    <div className='color' >
+        <p style={divStyle}>rgb({r},{g},{b})</p>
+
+    </div>
+  )
+}
+
+export default BoxColor

src/Components/CC.js

@@ -0,0 +1,30 @@
+import React from 'react'
+
+const CreditCard = (props) => {
+    const num = 'XXXX XXXX XXXX '
+    const divstyle ={
+        backgroundColor:`${props.bgColor}`,
+        color:`${props.color}`,
+        display:'flex',
+        flexDirection: 'column',
+        borderRadius: '10px',
+        justifyContent: 'space-around',
+        width:'300px',
+        height:'130px',
+        alignItems:'center'
+
+
+    }
+  return (
+    <div className='card' style={divstyle} >
+        <b style={{marginLeft:'250px',color:'blue'}}>{props.type}</b>
+       <div>{num}{props.number.substr(-4)}</div> 
+       <div>Expires {props.expirationMonth}/{props.expirationYear}</div>
+        <div>{props.bank}</div> 
+        <div>{props.owner}</div>
+
+    </div>
+  )
+}
+
+export default CreditCard

src/Components/Clickpic.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+
+
+const ClickablePicture = (props) => {
+    const [image, setImage] = useState(true);
+
+    function handleClick(){
+        setImage(!image);
+    }
+
+  return (
+    <div>
+        {image ? <img onClick={handleClick}
+        src={props.img}
+        alt='image'
+      />:<img onClick={handleClick}
+        src={props.imgClicked} 
+        alt='image clicked'
+      /> }
+
+    </div>
+
+  )
+}
+
+export default ClickablePicture

src/Components/Greetings.js

@@ -0,0 +1,25 @@
+mport React from "react";
+
+const Greetings = (props) => {
+
+
+  return (
+    <div className="greet" style={{border:'1px solid black'}}>
+      <p>
+        {" "}
+        {props.lang === "de"
+          ? "Hallo"
+          : props.lang === "en"
+          ? "Hello"
+          : props.lang === "fr"
+          ? "Bonjour"
+          : props.lang === "es"
+          ? "Hii"
+          : ""}{" "}
+        {props.children}
+      </p>
+    </div>
+  );
+};
+
+export default Greetings;

src/Components/IDCard.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import '../components/IDcard.css'
+
+const IDcard = ({firstName,lastName,gender,picture,height,birth}) => {
+
+  return (
+    <div className='card'>
+       <div className='img'>
+
+           <img src={picture} alt="" />
+       </div>
+       <div className='details'>
+        <div className='fname'><b>First Name: </b> {firstName}</div>
+        <div className='lname'><b>Last Name: </b>{lastName}</div>
+        <div className='gender'><b>Gender: </b> {gender}</div>
+        <div className='gender'><b>Height: </b> {height}</div>
+        <div className='gender'><b>Birth: </b> {birth.toLocaleDateString()}</div>
+
+
+       </div>
+
+    </div>
+  )
+}
+
+export default IDcard

src/Components/IDCrad.css

@@ -0,0 +1,10 @@
+.card{
+ display: flex;
+ align-items: flex-start;
+ margin: 5px;
+ border: 1px solid black;
+}
+.details{
+ margin-left: 5px;
+ margin-top: 0;
+}

src/Components/Likebutton.js

@@ -0,0 +1,30 @@
+
+import React, { useState } from 'react'
+
+const LikeButton = () => {
+
+    const colors = ['purple','blue','green','yellow','orange','red']
+    const[likes, setLikes] = useState(0);
+    const[bgcolor, setBgColor] = useState(colors[0])
+
+    let randomColor = Math.floor(Math.random()*(1+5)+1) ;
+
+
+    const handleLikes=()=>{
+        setLikes((s)=> s+1);
+        setBgColor((c)=>{ 
+            c = colors[randomColor];
+            return c;
+        })  
+
+    }
+
+
+  return (
+    <div>
+       <button style={{width:"100px", height:"40px",margin:"10px",backgroundColor:`${bgcolor}`,color:'white'}} onClick={handleLikes} >{likes} Likes</button>
+    </div>
+  )
+}
+
+export default LikeButton

src/Components/Rand.js

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

src/Components/dice.js

@@ -0,0 +1,22 @@
+import React, { useState } from 'react'
+import dice3 from '../assets/images/dice3.png'
+import dice_em from '../assets/images/dice-empty.png'
+import dice6 from '../assets/images/dice6.png'
+
+const Dice = () => {
+    const [dice, setDice] = useState(dice3);
+
+    function handleClick(){
+        setDice(dice_em)
+        setTimeout(()=>{
+             setDice(dice6)
+        },1000)
+    }
+  return (
+    <div>
+      <img style={{width:"200px"}} onClick={handleClick} src={dice} alt="" />
+    </div>
+  )
+}
+
+export default Dice