diff --git a/src/App.js b/src/App.js index 3784575..aa8b20a 100644 --- a/src/App.js +++ b/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 ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ <> + + Yerko + + + + 4.4 + + + + + + + + ); } diff --git a/src/assets/images/master-card.svg b/src/assets/images/master-card.svg index 00d7f2e..520e5ff 100644 --- a/src/assets/images/master-card.svg +++ b/src/assets/images/master-card.svg @@ -2,58 +2,13 @@ - - - - image/svg+xml - - - - - + height="612.25"> - @@ -64,20 +19,19 @@ + style="fill:#ff0018;fillOpacity:1;fillRule:evenodd;stroke:none" + /> + style="fill:#ffaa18;fillOpacity:1;fillRule:evenodd;stroke:none" + /> @@ -91,9 +45,9 @@ style="fill:white"> + /> @@ -114,42 +68,34 @@ @@ -157,7 +103,6 @@ id="use8523" transform="translate(847.0062,0)"> @@ -166,7 +111,6 @@ id="use8525" transform="translate(442.2857,0)"> diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js new file mode 100644 index 0000000..80b0628 --- /dev/null +++ b/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 ( +
+

rgb({r},{g},{b})

+

#{rSex}{gSex}{bSex}

+
+ ) +} diff --git a/src/components/Carousel.js b/src/components/Carousel.js new file mode 100644 index 0000000..9c5020e --- /dev/null +++ b/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 ( +
+ + foto + +
+ ) +} diff --git a/src/components/ClickablePicture.js b/src/components/ClickablePicture.js new file mode 100644 index 0000000..1a61b6a --- /dev/null +++ b/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 + ) +} diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js new file mode 100644 index 0000000..56f9978 --- /dev/null +++ b/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 ( +
+ {type === 'Visa' ? Visa : Master Card} +

{newNumber(number)}

+
+

Expires {expirationMonth}/{expirationYear} {bank}

+

{owner}

+
+
+ ) +} diff --git a/src/components/Dice.js b/src/components/Dice.js new file mode 100644 index 0000000..0753279 --- /dev/null +++ b/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 ( + dice + ) +} diff --git a/src/components/DriverCard.js b/src/components/DriverCard.js new file mode 100644 index 0000000..65d10b2 --- /dev/null +++ b/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 ( +
+ {name} +
+

{name}

+ {rating} +

{car.model} - {car.licensePlate}

+
+
+ ) +} diff --git a/src/components/Greetings.js b/src/components/Greetings.js new file mode 100644 index 0000000..eef0e74 --- /dev/null +++ b/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 ( +

{greting(lang)} {children}

+ ) +} diff --git a/src/components/IdCard.js b/src/components/IdCard.js new file mode 100644 index 0000000..ce93dcc --- /dev/null +++ b/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 ( +
+ img +
+

First name: {firstName}

+

Last name: {lastName}

+

Gender: {gender}

+

Height: {height}

+

Birth: {birth.toDateString()}

+
+
+ ) +} diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js new file mode 100644 index 0000000..11a6f63 --- /dev/null +++ b/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 ( + + ) +} diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js new file mode 100644 index 0000000..244dbe5 --- /dev/null +++ b/src/components/NumbersTable.js @@ -0,0 +1,48 @@ +import { useState } from "react" + +export default function NumbersTable({ limit }) { + + /* + Mostrar numeros en pantalla entre 1 y un límite. + cada número par debe estar rojo + + El componente recibe el numero límite como prop + */ + + const [boxNumber, setBoxNumber] = useState(Array.from({ length: limit }, (_, i) => i + 1)) + + const esPar = (num) => { + if (num % 2 === 0){ + return true + } + return false + } + + const boxStyle = (pair) => { + if (pair) { + return { + border: '1px solid black', + padding: '50px', + backgroundColor: 'red', + fontSize: '30px' + } + } else { + return { + border: '1px solid black', + padding: '50px', + fontSize: '30px' + } + } + } + + return ( +
+ {boxNumber.map(element => { + + return ( +
{element}
+ ) + })} +
+ ) +} diff --git a/src/components/RGBColorPicker.js b/src/components/RGBColorPicker.js new file mode 100644 index 0000000..350ff80 --- /dev/null +++ b/src/components/RGBColorPicker.js @@ -0,0 +1,51 @@ +import { useState } from "react"; +import SingleColorPicker from "./SingleColorPicker"; + +export default function RGBColorPicker() { + + const [rValue, setRValue] = useState(134) + const [gValue, setGValue] = useState(231) + const [bValue, setBValue] = useState(156) + + const styleBox = { + backgroundColor: `rgb(${rValue}, ${gValue}, ${bValue})`, + width: '20px', + height: '20px', + display: 'inline-flex', + border: '2px solid black', + verticalAlign: 'middle' + } + + const handleRValue = (e) => { + setRValue(e.target.value) + } + + const handleGValue = (e) => { + setGValue(e.target.value) + } + + const handleBValue = (e) => { + setBValue(e.target.value) + } + + return ( +
+ + + +

rgb({rValue},{gValue},{bValue})

+
+ ) +} diff --git a/src/components/Random.js b/src/components/Random.js new file mode 100644 index 0000000..d48fbca --- /dev/null +++ b/src/components/Random.js @@ -0,0 +1,11 @@ +export default function Random({ min, max }) { + + const getNumberText = (min, max) => { + const randomNumber = Math.floor(Math.random() * (max - min + 1)) + 1 + return `Random value between ${min} and ${max} => ${randomNumber}` + } + + return ( +

{getNumberText(min, max)}

+ ) +} diff --git a/src/components/Rating.js b/src/components/Rating.js new file mode 100644 index 0000000..926adec --- /dev/null +++ b/src/components/Rating.js @@ -0,0 +1,25 @@ +export default function Rating({ children }) { + + const stars = (rating) => { + + const ratingRounded = Math.round(rating) + + if (ratingRounded < 1) { + return '☆☆☆☆☆' + } else if (ratingRounded === 1) { + return '★☆☆☆☆' + } else if (ratingRounded === 2) { + return '★★☆☆☆' + } else if (ratingRounded === 3) { + return '★★★☆☆' + } else if (ratingRounded === 4) { + return '★★★★☆' + } else if (ratingRounded === 5) { + return '★★★★★' + } + } + + return ( +

{stars(children)}

+ ) +} diff --git a/src/components/SingleColorPicker.js b/src/components/SingleColorPicker.js new file mode 100644 index 0000000..2ef44f6 --- /dev/null +++ b/src/components/SingleColorPicker.js @@ -0,0 +1,19 @@ +export default function SingleColorPicker({ color, value, onChange }) { + + const getColorBox = (color, value) => { + return { + backgroundColor: `rgb(${color === "r" ? value : 0}, ${color === "g" ? value : 0}, ${color === "b" ? value : 0})`, + width: '20px', + height: '20px', + display: 'inline-flex', + border: '2px solid black', + verticalAlign: 'middle' + } + } + + return ( +
+

{color.toUpperCase()}:

+
+ ) +} diff --git a/src/styles/creditCard.css b/src/styles/creditCard.css new file mode 100644 index 0000000..a0147d5 --- /dev/null +++ b/src/styles/creditCard.css @@ -0,0 +1,23 @@ +.credit-card { + border-radius: 20px; + box-sizing: border-box; + padding: 25px; + display: flex; + flex-direction: column; + max-width: 450px; + margin: 10px; +} + +.credit-card-logo { + width: 80px; + height: auto; + display: flex; + align-self: flex-end; + margin-bottom: 10px; +} + +.credit-card-number { + font-size: 35px; + margin: 2px 0; + text-align: center; +}