rivadar-internship

src/App.css

@@ -1,38 +1,5 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+*{
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+}

src/App.js

@@ -1,25 +1,127 @@
-import logo from './logo.svg';
 import './App.css';
-
+import IdCard from './components/IdCard';
+import Greeting from './components/Greeting'; 
+import Random from './components/Random';
+import BoxColor from './components/BoxColor';
+import Rating from './components/Rating';
+import CreditCard from './components/CreditCard';
+import DriverCard from './components/DriverCard';
+import LikeButton from './components/LikeButton';
+import Clickable from './components/Clickable';
+import Dice from './components/Dice';
+import Caraousel from './components/Caraousel';
+import Table from './components/Table'
+import RGBColorPicker from './components/RGBColorPicker';
+//importing images
+import img from "./assets/images/maxence.png";
+import imgClicked from "./assets/images/maxence-glasses.png";
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+
+<IdCard
+	lastName='Doe'
+	firstName='John'
+	gender='male'
+	height={178}
+	// birth={new Date("1992-07-14")}
+	 //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")}
+	 //birth={new Date("1988-05-11")}
+	picture="https://randomuser.me/api/portraits/women/44.jpg"
+
+/>
+
+<Greeting  lang="de">Ludwig</Greeting>
+<Greeting  lang="fr">François</Greeting>
+<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"
+	}}
+/>
+<LikeButton  />
+<Clickable
+    img={img}
+    imgClicked={imgClicked}
+/>
+<Dice />
+<Caraousel
+images={[
+'https://randomuser.me/api/portraits/women/1.jpg',
+'https://randomuser.me/api/portraits/men/1.jpg',
+'https://randomuser.me/api/portraits/women/2.jpg',
+'https://randomuser.me/api/portraits/men/2.jpg'
+]}
+
+/>
+
+<Table  limit={50}  />
+
+<RGBColorPicker />
+</div>
   );
 }
-
-export default App;
+export default App

src/components/BoxColor.css

@@ -0,0 +1,6 @@
+.cbox{
+    margin:10px;
+    padding:30px;
+    text-align: center;
+    border:2px solid black;
+}

src/components/BoxColor.js

@@ -0,0 +1,16 @@
+import './BoxColor.css'
+
+function BoxColor(props)
+{
+    const toHex = (number) => {
+        let hex = number.toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+    };
+    let color='#'+(toHex(props.r))+(toHex(props.g))+(toHex(props.b))
+    return <div className='cbox' style={{backgroundColor:color}}>
+          <p>rgb({props.r},{props.g},{props.b})</p>
+          <p>{color}</p>
+    </div>
+}
+
+export default BoxColor

src/components/Caraousel.css

@@ -0,0 +1,12 @@
+caraousel{
+    display:flex;
+    width:100%;
+    justify-content:center;
+    align-items:center;
+}
+.caraousel button{
+    padding:10px 15px;
+}
+.caraousel img{
+    margin:10px;
+}

src/components/Caraousel.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import './Caraousel.css'
+
+function Caraousel(props)
+{
+    let arr=props.images
+    let len=arr.length
+    const[img_num , setImg]=React.useState(2)
+    function left()
+    {
+        if(img_num===0)
+        setImg(len-1)
+        else
+        setImg((img_num-1)%len)
+    }
+    function right()
+    {
+        setImg((img_num+1)%len)
+    }
+    return <div className='caraousel'>
+        <button onClick={left}>Left</button>
+        <img src={arr[img_num]} alt='pic' style={{width:'300px'}}/>
+        <button onClick={right}>Right</button>
+    </div>
+}
+
+export default Caraousel

src/components/Clickable.js

@@ -0,0 +1,14 @@
+import React from 'react';
+function Clickable(props)
+{
+    const [img,putGlasses]=React.useState(props.img)
+    function glasses()
+    {
+        img === props.img ? putGlasses(props.imgClicked) : putGlasses(props.img);
+    }
+    return  <div> 
+    <img src={img} alt='pic' onClick={glasses} style={{width:'150px'}}/>
+    </div>
+}
+
+export default Clickable

src/components/CreditCard.css

@@ -0,0 +1,14 @@
+.credit{
+    width:300px;
+    height: 150px;
+    border-radius: 10px;
+    padding:18px;
+    margin:5px;
+    display: inline-block;
+}
+.credit > div{
+    text-align: right;
+}
+.credit img{
+    width:60px;
+}

src/components/CreditCard.js

@@ -0,0 +1,22 @@
+import './CreditCard.css'
+import visa from '../assets/images/visa.png'
+import master from '../assets/images/mastercard.png'
+function CreditCard(props)
+{
+    const img = props.type === 'Visa' ? visa : master;
+    let mon=props.expirationMonth
+    let yr=props.expirationYear%100
+    let ex=''
+    if(mon<10)
+      ex='0'+mon+'/'+yr
+    console.log(ex)
+    return <div className='credit' style={{backgroundColor: props.bgColor,color:props.color}}>
+    <div>
+        <img src={img} alt='pic' />
+        </div>
+        <h1>.... .... .... {props.number.slice(12)}</h1>
+        <p>Expires {ex} {props.bank}</p>
+        <p>{props.owner}</p>
+    </div>;
+}
+export default CreditCard

src/components/Dice.js

@@ -0,0 +1,46 @@
+import dice0 from '../assets/images/dice-empty.png'
+import dice1 from '../assets/images/dice1.png'
+import dice2 from '../assets/images/dice2.png'
+import dice3 from '../assets/images/dice3.png'
+import dice4 from '../assets/images/dice4.png'
+import dice5 from '../assets/images/dice5.png'
+import dice6 from '../assets/images/dice6.png'
+
+import React from 'react';
+
+function Dice()
+{
+    const [img, throwDice]=React.useState(dice0)
+    //setInterval(change,1000)
+    function change()
+    {
+        let n=parseInt(Math.random()*6)
+        switch(n)
+        {
+            case 0:
+                throwDice(dice1)
+                break;
+            case 1:
+                throwDice(dice1)
+                break;
+            case 2:
+                throwDice(dice2)
+                break;
+            case 3:
+                throwDice(dice3)
+                break;
+            case 4:
+                throwDice(dice4)
+                break;
+            case 5:
+                throwDice(dice5)
+                break;
+            default :
+                throwDice(dice6)
+                break;
+        }
+    }
+    return <div> <img src={img} alt='dice' onClick={change} style={{width:'100px'}}/> </div>
+}
+
+export default Dice

src/components/DriverCard.css

@@ -0,0 +1,17 @@
+.driver{
+    display: flex;
+    width:500px;
+    border-radius: 10px;
+    background-color: dodgerblue;
+    justify-content: center;
+    align-items: center;
+    padding:5px;
+    margin:10px;
+    color: white;
+}
+.driver img{
+    width:100px;
+    height:100px;
+    border-radius: 50%;
+    margin-right: 15px;
+}