Lab completed

src/App.js

@@ -1,24 +1,80 @@
-import logo from './logo.svg';
+import IdCard from './components/IdCard'
 import './App.css';
+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'
+import LikeButton from './components/LikeButton'
+import ClickablePicture from './components/ClickablePicture'
+import maxImg from './assets/images/maxence.png'
+import maxImgClicked from './assets/images/maxence-glasses.png'
+import Dice from './components/Dice';
+import Carousel from './components/Carousel';
+import NumbersTable from './components/NumbersTable';
+import RGBColorPicker from './components/RGBColorPicker';
 
 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='Arce' 
+        firstName='Yerko'
+        gender='Male'
+        height={185}
+        birth={new Date('2000-01-01')}
+        picture='unaImagen'
+      />
+      <Greetings lang='en'>Yerko</Greetings>
+      <Random
+        min={1}
+        max={10}
+      />
+      <BoxColor
+        r={255}
+        g={123}
+        b={255}
+      />
+      <CreditCard
+        type="Master card"
+        number="0123456789018845"
+        expirationMonth={3}
+        expirationYear={2021}
+        bank="BNP"
+        owner="Maxence Bouret"
+        bgColor="#11aa99"
+        color="white"
+      />
+      <Rating>4.4</Rating>
+      <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 />
+      <ClickablePicture 
+        img={maxImg}
+        imgClicked={maxImgClicked}
+      />
+      <Dice />
+      <Carousel 
+        arrayPhotos={[
+        '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'
+        ]}
+      />
+      <NumbersTable 
+        limit={10}
+      />
+      <RGBColorPicker />
+    </>
   );
 }
 

src/components/BoxColor.js

@@ -0,0 +1,22 @@
+export default function BoxColor({ r, g, b }) {
+
+  const styles = {
+    backgroundColor: `rgb(${r},${g},${b})`,
+    border: '1px solid #000', 
+    margin: '10px', 
+    padding: '0 10px',
+    textAlign: 'center',
+    color: '#fff'
+  }
+
+  const rSex = r.toString(16).padStart(2, '0')
+  const gSex = g.toString(16).padStart(2, '0')
+  const bSex = b.toString(16).padStart(2, '0')
+
+  return (
+    <div className='Container' style={styles}>
+      <p>rgb({r},{g},{b})</p>
+      <p>#{rSex}{gSex}{bSex}</p>
+    </div>
+  )
+}

src/components/Carousel.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react"
+
+export default function Carousel({ arrayPhotos }) {
+
+  const [photoIndex, setPhotoIndex] = useState(0)
+
+  const [photo, setPhoto] = useState(arrayPhotos[photoIndex])
+
+  useEffect(() => {
+    setPhoto(arrayPhotos[photoIndex]) 
+  }, [photoIndex, arrayPhotos])
+
+
+  const handlerRightBtn = () => {
+    if (photoIndex < arrayPhotos.length - 1){
+      setPhotoIndex(photoIndex + 1)
+    }
+  }
+
+  const handlerLeftBtn = () => {
+    if (photoIndex > 0){
+      setPhotoIndex(photoIndex - 1)
+    }
+  }
+
+  return (
+    <div>
+      <button onClick={handlerLeftBtn}>Left</button>
+      <img src={photo} alt='foto' />
+      <button onClick={handlerRightBtn}>Right</button>
+    </div>
+  )
+}

src/components/ClickablePicture.js

@@ -0,0 +1,17 @@
+import { useState } from 'react'
+
+export default function ClickablePicture({ img, imgClicked }) {
+
+  const [image, setImage] = useState(img)
+  const handlerImg = () => {
+    if (image === img) {
+      setImage(imgClicked)
+    } else {
+      setImage(img)
+    }
+  }
+
+  return (
+    <img src={image} alt="img" onClick={handlerImg}/>
+  )
+}

src/components/CreditCard.js

@@ -0,0 +1,31 @@
+import '../styles/creditCard.css'
+import MasterCardImg from '../assets/images/master-card.svg'
+import VisaImg from '../assets/images//visa.png'
+
+export default function CreditCard({ 
+  type,
+  number,
+  expirationMonth,
+  expirationYear,
+  bank,
+  owner,
+  bgColor,
+  color
+ }) {
+
+  const newNumber = (number) => {
+    const newNumber = number.replace(/\d{12}/g, '●●●● ●●●● ●●●● ')
+    return newNumber
+  }
+
+  return (
+    <div className='credit-card' style={{ backgroundColor: bgColor, color: color }}>
+      {type === 'Visa' ? <img src={VisaImg} alt='Visa' className='credit-card-logo' /> : <img src={MasterCardImg} alt='Master Card' className='credit-card-logo' />}
+        <p className='credit-card-number'>{newNumber(number)}</p>
+      <div className='credit-card-info'>
+        <p>Expires {expirationMonth}/{expirationYear} <span style={{ marginLeft: '15px' }}>{bank}</span></p>
+        <p>{owner}</p>
+      </div>
+    </div>
+  )
+}

src/components/Dice.js

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import diceEmpty 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'
+
+
+export default function Dice() {
+
+  const [dice, setDice] = useState(diceEmpty)
+
+  const randomDice = () => {
+    const diceArray = [dice1, dice2, dice3, dice4, dice5, dice6]
+    const random = diceArray[Math.round(Math.random() * 6)]
+    console.log(random)
+    return random
+  }
+
+  const handlerDice = () => {
+      if (dice === diceEmpty){
+        setDice(randomDice())
+      } else {
+        setDice(diceEmpty)
+        setTimeout( () => {
+          setDice(randomDice())
+        }, 1000 )
+      }
+  }
+
+  return (
+    <img src={dice} alt="dice" style={{width: 300}} onClick={handlerDice}/> 
+  )
+}

src/components/DriverCard.js

@@ -0,0 +1,32 @@
+import Rating from './Rating'
+
+export default function DriverCard({ name, rating, img, car }) {
+
+  const styleContainer = {
+    display: 'flex',
+    margin: '10px',
+    padding: '20px',
+    borderRadius: '20px',
+    backgroundColor: '#4977ff',
+    color: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+    maxWidth: '850px'
+  }
+
+  const styleImg = {
+    width: '200px',
+    borderRadius: '50%'
+  }
+
+  return (
+    <div style={styleContainer}>
+      <img src={img} alt={name} style={styleImg} />
+      <div style={{ marginLeft: '30px' }}>
+        <h3>{name}</h3>
+        <Rating>{rating}</Rating>
+        <p>{car.model} - {car.licensePlate}</p>
+      </div>
+    </div>
+  )
+}

src/components/Greetings.js

@@ -0,0 +1,18 @@
+export default function Greetings({ lang, children}) {
+
+  const greting = (lang) => {
+    if (lang === 'de'){
+      return 'Hallo'
+    } else if (lang === 'en'){
+      return 'Hello'
+    } else if (lang === 'es'){
+      return 'Hola'
+    } else if (lang === 'fr'){
+      return 'Bonjour'
+    }
+  }
+
+  return (
+    <p style={{border: '1px solid #000', margin: '10px', padding: '0 10px'}}>{greting(lang)} {children}</p>
+  )
+}

src/components/IdCard.js

@@ -0,0 +1,27 @@
+export default function IdCard({ lastName, firstName, gender, height, birth, picture }) {
+
+  const styleContainer = {
+    display: 'flex',
+    border: '1px solid #000',
+    margin: '10px',
+    padding: '0 10px'
+  }
+
+  const styleImg = {
+    width: '200px',
+    height: 'auto'
+  }
+
+  return (
+    <div className='container-card' style={styleContainer}>
+      <img src={picture} alt='img' style={styleImg} />
+      <div>
+        <p><strong>First name: </strong>{firstName}</p>
+        <p><strong>Last name: </strong>{lastName}</p>
+        <p><strong>Gender: </strong>{gender}</p>
+        <p><strong>Height: </strong>{height}</p>
+        <p><strong>Birth: </strong>{birth.toDateString()}</p>
+      </div>
+    </div>
+  )
+}

src/components/LikeButton.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+
+export default function LikeButton() {
+
+  const [likes, setLikes] = useState(0)
+
+  const colors = ['purple','blue','green','yellow','orange','red']
+
+  function getRandomColor() {
+    const randomColor = colors[Math.floor(Math.random() * colors.length)]
+    return randomColor
+  }
+
+  function handleClick() {
+    setLikes(likes + 1)
+  }
+
+  const styles = {
+    backgroundColor:getRandomColor(), 
+    color:'white', 
+    padding:'10px', 
+    borderRadius:'10px', 
+    border:'none', 
+    margin:'10px',
+    cursor:'pointer'
+  }
+
+
+  return (
+    <button style={styles} onClick={() =>handleClick()}>{likes} Likes</button>
+  )
+}