From 441a44487031bbe35c879a3ca38107adac7806cc Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Tue, 4 Feb 2025 19:14:37 -0300 Subject: [PATCH 01/10] Primeras 5 iteraciones sin estilos --- components/BoxColor.js | 17 +++++++++++++++++ components/CreditCard.js | 17 +++++++++++++++++ components/Greetings.js | 18 ++++++++++++++++++ components/IdCard.js | 14 ++++++++++++++ components/Random.js | 11 +++++++++++ 5 files changed, 77 insertions(+) create mode 100644 components/BoxColor.js create mode 100644 components/CreditCard.js create mode 100644 components/Greetings.js create mode 100644 components/IdCard.js create mode 100644 components/Random.js diff --git a/components/BoxColor.js b/components/BoxColor.js new file mode 100644 index 0000000..8709bb7 --- /dev/null +++ b/components/BoxColor.js @@ -0,0 +1,17 @@ +export default function BoxColor({ r, g, b }) { + + const styles = { + backgroundColor: `rgb(${r},${g},${b})`, + } + + const rSex = r.toString(16) + const gSex = g.toString(16) + const bSex = b.toString(16) + + return ( +
+

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

+

#{rSex}{gSex}{bSex}

+
+ ) +} diff --git a/components/CreditCard.js b/components/CreditCard.js new file mode 100644 index 0000000..4164f14 --- /dev/null +++ b/components/CreditCard.js @@ -0,0 +1,17 @@ +export default function CreditCard({ + type, + number, + expirationMonth, + expirationYear, + bank, + owner, + bgColor, + color + }) { + + + + return ( +
CreditCard
+ ) +} diff --git a/components/Greetings.js b/components/Greetings.js new file mode 100644 index 0000000..a997c6e --- /dev/null +++ b/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} {children}

+ ) +} diff --git a/components/IdCard.js b/components/IdCard.js new file mode 100644 index 0000000..4acf4f6 --- /dev/null +++ b/components/IdCard.js @@ -0,0 +1,14 @@ +export default function IdCard({ lastName, firstName, gender, height, birth, picture }) { + return ( +
+ {firstName} +
+

First name: {firstName}

+

Last name: {lastName}

+

Gender: {gender}

+

Height: {height}

+

Birth: {birth}

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

+ ) +} From 07761e0da5016b8046addbb555bdc4ca68785dc0 Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Thu, 6 Feb 2025 21:08:28 -0300 Subject: [PATCH 02/10] =?UTF-8?q?Se=20a=C3=B1aden=20los=20estilos=20de=20l?= =?UTF-8?q?os=205=20ejercicios=20que=20ya=20estaban=20avanzados.=20Esto=20?= =?UTF-8?q?a=C3=B1adiendo=20estilos=20para=20uno=20de=20esos=20componentes?= =?UTF-8?q?=20y=20tambien=20arreglando=20el=20svg=20del=20logo=20de=20mast?= =?UTF-8?q?ercard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/BoxColor.js | 17 ----- components/CreditCard.js | 17 ----- components/IdCard.js | 14 ---- src/App.js | 52 ++++++++++----- src/assets/images/master-card.svg | 72 +++------------------ src/components/BoxColor.js | 22 +++++++ src/components/CreditCard.js | 31 +++++++++ {components => src/components}/Greetings.js | 2 +- src/components/IdCard.js | 27 ++++++++ {components => src/components}/Random.js | 2 +- src/styles/creditCard.css | 23 +++++++ 11 files changed, 148 insertions(+), 131 deletions(-) delete mode 100644 components/BoxColor.js delete mode 100644 components/CreditCard.js delete mode 100644 components/IdCard.js create mode 100644 src/components/BoxColor.js create mode 100644 src/components/CreditCard.js rename {components => src/components}/Greetings.js (74%) create mode 100644 src/components/IdCard.js rename {components => src/components}/Random.js (70%) create mode 100644 src/styles/creditCard.css diff --git a/components/BoxColor.js b/components/BoxColor.js deleted file mode 100644 index 8709bb7..0000000 --- a/components/BoxColor.js +++ /dev/null @@ -1,17 +0,0 @@ -export default function BoxColor({ r, g, b }) { - - const styles = { - backgroundColor: `rgb(${r},${g},${b})`, - } - - const rSex = r.toString(16) - const gSex = g.toString(16) - const bSex = b.toString(16) - - return ( -
-

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

-

#{rSex}{gSex}{bSex}

-
- ) -} diff --git a/components/CreditCard.js b/components/CreditCard.js deleted file mode 100644 index 4164f14..0000000 --- a/components/CreditCard.js +++ /dev/null @@ -1,17 +0,0 @@ -export default function CreditCard({ - type, - number, - expirationMonth, - expirationYear, - bank, - owner, - bgColor, - color - }) { - - - - return ( -
CreditCard
- ) -} diff --git a/components/IdCard.js b/components/IdCard.js deleted file mode 100644 index 4acf4f6..0000000 --- a/components/IdCard.js +++ /dev/null @@ -1,14 +0,0 @@ -export default function IdCard({ lastName, firstName, gender, height, birth, picture }) { - return ( -
- {firstName} -
-

First name: {firstName}

-

Last name: {lastName}

-

Gender: {gender}

-

Height: {height}

-

Birth: {birth}

-
-
- ) -} diff --git a/src/App.js b/src/App.js index 3784575..42f3fae 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,42 @@ -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' function App() { return ( -
-
- logo -

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

- - Learn React - -
-
+ <> + + Yerko + + + + ); } 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/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/components/Greetings.js b/src/components/Greetings.js similarity index 74% rename from components/Greetings.js rename to src/components/Greetings.js index a997c6e..eef0e74 100644 --- a/components/Greetings.js +++ b/src/components/Greetings.js @@ -13,6 +13,6 @@ export default function Greetings({ lang, children}) { } return ( -

{greting} {children}

+

{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/components/Random.js b/src/components/Random.js similarity index 70% rename from components/Random.js rename to src/components/Random.js index 2725655..d48fbca 100644 --- a/components/Random.js +++ b/src/components/Random.js @@ -6,6 +6,6 @@ export default function Random({ min, max }) { } return ( -

{getNumberText}

+

{getNumberText(min, max)}

) } 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; +} From f5e3bb8ef02cf9922660f3208d1a36c2abca9f26 Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Fri, 7 Feb 2025 15:36:47 -0300 Subject: [PATCH 03/10] Iteration 6 completed --- src/App.js | 3 +++ src/components/Rating.js | 25 +++++++++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 src/components/Rating.js diff --git a/src/App.js b/src/App.js index 42f3fae..c0d7a9e 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ 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'; function App() { return ( @@ -36,6 +37,8 @@ function App() { bgColor="#11aa99" color="white" /> + 4.4 + ); } 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)}

+ ) +} From 5d5ad1dbbd22c04d6457e2d9497df64df59d7794 Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Fri, 7 Feb 2025 16:05:36 -0300 Subject: [PATCH 04/10] Iteration 7 completed --- src/App.js | 14 ++++++++++++-- src/components/DriverCard.js | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 src/components/DriverCard.js diff --git a/src/App.js b/src/App.js index c0d7a9e..d1838fd 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,8 @@ 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 Rating from './components/Rating' +import DriverCard from './components/DriverCard' function App() { return ( @@ -38,7 +39,16 @@ function App() { color="white" /> 4.4 - + ); } 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}

+
+
+ ) +} From 93b39cf4e11c3c3ff8e89d690382e82680c6cf8c Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Wed, 12 Feb 2025 23:41:22 -0300 Subject: [PATCH 05/10] Iteration 8 completed --- src/App.js | 7 ++++--- src/components/LikeButton.js | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 3 deletions(-) create mode 100644 src/components/LikeButton.js diff --git a/src/App.js b/src/App.js index d1838fd..2a2dfd9 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ 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'; function App() { return ( @@ -46,9 +47,9 @@ function App() { car={{ model: "Audi A3", licensePlate: "BE33ER" - } - } -/> + }} + /> + ); } 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 ( + + ) +} From 5bffac9f19f0338eb453e8e62aae73d013326c15 Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Thu, 20 Feb 2025 11:45:19 -0300 Subject: [PATCH 06/10] iteration 8 completed! --- src/App.js | 9 ++++++++- src/components/ClickablePicture.js | 17 +++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 src/components/ClickablePicture.js diff --git a/src/App.js b/src/App.js index 2a2dfd9..1d2498c 100644 --- a/src/App.js +++ b/src/App.js @@ -6,7 +6,10 @@ 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 LikeButton from './components/LikeButton' +import ClickablePicture from './components/ClickablePicture' +import maxImg from './assets/images/maxence.png' +import maxImgClicked from './assets/images/maxence-glasses.png' function App() { return ( @@ -50,6 +53,10 @@ function App() { }} /> + ); } 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 + ) +} From 1d6b6371cf0f4f8c4c74187a09ffb849505e5e35 Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Thu, 20 Feb 2025 12:44:14 -0300 Subject: [PATCH 07/10] iteration 10 completed --- src/App.js | 2 ++ src/components/Dice.js | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 src/components/Dice.js diff --git a/src/App.js b/src/App.js index 1d2498c..dc48286 100644 --- a/src/App.js +++ b/src/App.js @@ -10,6 +10,7 @@ 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'; function App() { return ( @@ -57,6 +58,7 @@ function App() { img={maxImg} imgClicked={maxImgClicked} /> + ); } 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 + ) +} From fb039db6e5b095b95126b147e04038dd76881c81 Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Fri, 21 Feb 2025 21:08:29 -0300 Subject: [PATCH 08/10] Iteration 11 completed! --- src/App.js | 9 +++++++++ src/components/Carousel.js | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 src/components/Carousel.js diff --git a/src/App.js b/src/App.js index dc48286..44698af 100644 --- a/src/App.js +++ b/src/App.js @@ -11,6 +11,7 @@ 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'; function App() { return ( @@ -59,6 +60,14 @@ function App() { imgClicked={maxImgClicked} /> + ); } 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 + +
+ ) +} From 02e568907e3b0aba9ab01f4e1ae51dc261af08f2 Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Fri, 21 Feb 2025 23:22:38 -0300 Subject: [PATCH 09/10] Iteration 12 completed! --- src/App.js | 4 +++ src/components/NumbersTable.js | 48 ++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 src/components/NumbersTable.js diff --git a/src/App.js b/src/App.js index 44698af..337128a 100644 --- a/src/App.js +++ b/src/App.js @@ -12,6 +12,7 @@ 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'; function App() { return ( @@ -68,6 +69,9 @@ function App() { 'https://randomuser.me/api/portraits/men/2.jpg' ]} /> + ); } 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}
+ ) + })} +
+ ) +} From 60acb2f2d366e05d37cfaf038ba6740a51a1c9c9 Mon Sep 17 00:00:00 2001 From: Yerko Arce Date: Wed, 26 Feb 2025 16:27:19 -0300 Subject: [PATCH 10/10] Iteration 13 Completed! --- src/App.js | 2 ++ src/components/RGBColorPicker.js | 51 +++++++++++++++++++++++++++++ src/components/SingleColorPicker.js | 19 +++++++++++ 3 files changed, 72 insertions(+) create mode 100644 src/components/RGBColorPicker.js create mode 100644 src/components/SingleColorPicker.js diff --git a/src/App.js b/src/App.js index 337128a..aa8b20a 100644 --- a/src/App.js +++ b/src/App.js @@ -13,6 +13,7 @@ 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 ( @@ -72,6 +73,7 @@ function App() { + ); } 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/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()}:

+
+ ) +}