diff --git a/src/App.css b/src/App.css index 74b5e0534..b893872db 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,9 @@ .App { text-align: center; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; } .App-logo { @@ -36,3 +40,9 @@ transform: rotate(360deg); } } + +.creditCard { + display: flex; + flex-direction: row; + padding: 5rem, 5rem; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 378457572..d21fd5899 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,152 @@ -import logo from './logo.svg'; +import React from 'react'; +// import logo from './logo.svg'; import './App.css'; +import IdCard from './components/IdCard/IdCard' +import Greeting from './components/Greetings/Greetings'; +import Random from './components/Random/Random'; +import BoxColor from './components/BoxColor/BoxColor'; +import CreditCard from './components/CreditCard/CreditCard'; +import Rating from './components/Rating/Rating'; +import DriverCard from './components/DriverCard/DriverCard'; +import LikeButton from './components/LikeButton/LikeButton'; +import ClickablePicture from './components/ClickablePicture/ClickablePicture'; +import Dice from './components/Dice/Dice'; +import Carousel from './components/Carousel/Carousel'; +import NumbersTable from './components/NumbersTable/NumbersTable'; +import Facebook from './components/Facebook/Facebook'; function App() { return (
-
- logo -

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

- - Learn React - -
+

LAB | React Training

+

Iteration 1:

+ + + + +

Iteration 2:

+ Ludwig + François + +

Iteration 3:

+ + + +

Iteration 4:

+ + + +

Iteration 5:

+
+ + + + + + +
+ +

Iteration 6:

+ 0 + 1.49 + 1.5 + 3 + 4 + 5 + +

Iteration 7:

+ + + + +

Iteration 8:

+ + +

Iterarion 9:

+ + +

Iterarion 10:

+ + +

Iterarion 11:

+ + +

Iterarion 12:

+ + +

Iterarion 13 and 14:

+ +
); } export default App; + diff --git a/src/assets/images/mastercard.png b/src/assets/images/mastercard.png new file mode 100644 index 000000000..a463d018f Binary files /dev/null and b/src/assets/images/mastercard.png differ diff --git a/src/assets/images/visa.png b/src/assets/images/visa.png new file mode 100644 index 000000000..d9acf8449 Binary files /dev/null and b/src/assets/images/visa.png differ diff --git a/src/components/BoxColor/BoxColor.css b/src/components/BoxColor/BoxColor.css new file mode 100644 index 000000000..fe8f61b99 --- /dev/null +++ b/src/components/BoxColor/BoxColor.css @@ -0,0 +1,6 @@ +.BoxColor { + border: 1px solid black; + padding: 5px; + margin: 10px 0; + width: 30rem; +} \ No newline at end of file diff --git a/src/components/BoxColor/BoxColor.jsx b/src/components/BoxColor/BoxColor.jsx new file mode 100644 index 000000000..27afc7e44 --- /dev/null +++ b/src/components/BoxColor/BoxColor.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import './BoxColor.css'; + +function BoxColor({ r, g, b }) { + const color = `rgb(${r}, ${g}, ${b})`; + + return ( +
+

{color}

+
+ ); +} + +export default BoxColor; diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx new file mode 100644 index 000000000..a830bdd96 --- /dev/null +++ b/src/components/Carousel/Carousel.jsx @@ -0,0 +1,23 @@ +import React, { useState } from "react"; + +function Carousel({ images }) { + const [currentIndex, setCurrentIndex] = useState(0); + + const changeImageLeft = () => { + setCurrentIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1)); + }; + + const changeImageRight = () => { + setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1)); + }; + + return ( +
+ + Images + +
+ ); +} + +export default Carousel; diff --git a/src/components/ClickablePicture/ClickablePicture.css b/src/components/ClickablePicture/ClickablePicture.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/ClickablePicture/ClickablePicture.jsx b/src/components/ClickablePicture/ClickablePicture.jsx new file mode 100644 index 000000000..8ec980fbc --- /dev/null +++ b/src/components/ClickablePicture/ClickablePicture.jsx @@ -0,0 +1,17 @@ +import React, { useState } from 'react'; + +function ClickablePicture({ img, imgClicked }) { + const [isClicked, setIsClicked] = useState(false); + + const handleClick = () => { + setIsClicked(!isClicked); + }; + + return ( +
+ Imagen +
+ ); +} + +export default ClickablePicture; diff --git a/src/components/CreditCard/CreditCard.css b/src/components/CreditCard/CreditCard.css new file mode 100644 index 000000000..1d24ee8b7 --- /dev/null +++ b/src/components/CreditCard/CreditCard.css @@ -0,0 +1,19 @@ +.CreditCard { + padding: 20px; + border-radius: 2%; + margin: 10px; + width: 350px; +} + +.cardNumber { + font-size: xx-large; +} + +.cardInfo{ + text-align: left; +} + +.cardLogo{ + width: 50px; + margin-left: 250px; +} \ No newline at end of file diff --git a/src/components/CreditCard/CreditCard.jsx b/src/components/CreditCard/CreditCard.jsx new file mode 100644 index 000000000..a2c14b5d6 --- /dev/null +++ b/src/components/CreditCard/CreditCard.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import './CreditCard.css'; +import Visa from '../../assets/images/visa.png' +import MasterCard from '../../assets/images/mastercard.png' + +function CreditCard({type, number, expirationMonth, expirationYear, bank, owner, bgColor, color}){ + const logo = (type === 'Visa') ? Visa : MasterCard; + return ( +
+ Bank logo +

•••• •••• •••• {number.slice(-4)}

+
Expires {expirationMonth}/{expirationYear}{bank}
+
{owner}
+
+ ) +} + +export default CreditCard \ No newline at end of file diff --git a/src/components/Dice/Dice.css b/src/components/Dice/Dice.css new file mode 100644 index 000000000..0421976b1 --- /dev/null +++ b/src/components/Dice/Dice.css @@ -0,0 +1,8 @@ +img { + width: 100px; + margin-top: 20px; +} + +.Dice { + display: block; +} \ No newline at end of file diff --git a/src/components/Dice/Dice.jsx b/src/components/Dice/Dice.jsx new file mode 100644 index 000000000..a9e9cff70 --- /dev/null +++ b/src/components/Dice/Dice.jsx @@ -0,0 +1,29 @@ +import React, {useState} from "react"; +import './Dice.css' +import DiceEmpty from './../../assets/images/dice-empty.png' +import DiceOne from './../../assets/images/dice1.png' +import DiceTwo from './../../assets/images/dice2.png' +import DiceThree from './../../assets/images/dice3.png' +import DiceFour from './../../assets/images/dice4.png' +import DiceFive from './../../assets/images/dice5.png' +import DiceSix from './../../assets/images/dice6.png' + +function Dice(){ + const [diceChanges, setDiceChanges] = useState(DiceThree) + const dice = [DiceOne, DiceTwo, DiceThree, DiceFour, DiceFive, DiceSix] + + const switchDice = () => { + setDiceChanges(DiceEmpty) + setTimeout(() => { + setDiceChanges(dice[Math.floor(Math.random() * dice.length)]) + }, 1000) + } + + return ( +
+ Dice +
+ ) +} + +export default Dice \ No newline at end of file diff --git a/src/components/DriverCard/DriverCard.css b/src/components/DriverCard/DriverCard.css new file mode 100644 index 000000000..6f156c068 --- /dev/null +++ b/src/components/DriverCard/DriverCard.css @@ -0,0 +1,17 @@ +.DriverCard { + margin: 10px; + display: flex; + color: white; + background-color: rgb(86, 67, 207); + width: 700px; + border-radius: 10px; + padding: 20px; + text-align: left; +} + +.DriverCard img { + width: 8rem; + border-radius: 50%; + margin-left: 100px; + margin-right: 20px; +} \ No newline at end of file diff --git a/src/components/DriverCard/DriverCard.jsx b/src/components/DriverCard/DriverCard.jsx new file mode 100644 index 000000000..69ef01f50 --- /dev/null +++ b/src/components/DriverCard/DriverCard.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import './DriverCard.css'; + +function DriverCard({name, rating, img, car}) { + const roundedRating = Math.round(rating) + const stars = Array.from({ length: 5}, (_, index) => { + if (index < roundedRating) { + return '★'; + } else { + return '☆'; + } + }); + return ( +
+ DriverImage +
+


{name}

+

{stars}

+
{`${car.model} - ${car.licensePlate}`}
+
+
+ ) +} + +export default DriverCard \ No newline at end of file diff --git a/src/components/Facebook/Facebook.css b/src/components/Facebook/Facebook.css new file mode 100644 index 000000000..6b403e0f3 --- /dev/null +++ b/src/components/Facebook/Facebook.css @@ -0,0 +1,17 @@ +.Facebook { + border: 1px solid black; + padding: 5px; + margin: 10px 0; + width: 30rem; + display: flex; + align-items: center; +} + +.FacebookCardInfo { + margin-left: 5px; + text-align: left; +} + +img{ + margin: 0; +} \ No newline at end of file diff --git a/src/components/Facebook/Facebook.jsx b/src/components/Facebook/Facebook.jsx new file mode 100644 index 000000000..2f6d4cd75 --- /dev/null +++ b/src/components/Facebook/Facebook.jsx @@ -0,0 +1,54 @@ +import React, { useState } from 'react'; +import './Facebook.css'; +import berlinData from '../../data/berlin.json'; + +function Facebook() { + const [selectedCountries, setSelectedCountries] = useState([]); + + const changeBackground = (country) => { + if (selectedCountries.includes(country)) { + setSelectedCountries(selectedCountries.filter((c) => c !== country)); + } else { + setSelectedCountries([...selectedCountries, country]); + } + }; + + return ( +
+
+ + + + +
+ {berlinData.map((user, index) => ( +
+ {`${user.lastName}`} +
+
+ First name: + {user.firstName} +
+
+ Last name: + {user.lastName} +
+
+ Country: + {user.country} +
+
+ Type: + {user.isStudent ? 'Student' : 'Teacher'} +
+
+
+ ))} +
+ ); +} + +export default Facebook; + + + diff --git a/src/components/Greetings/Greetings.css b/src/components/Greetings/Greetings.css new file mode 100644 index 000000000..65df91004 --- /dev/null +++ b/src/components/Greetings/Greetings.css @@ -0,0 +1,6 @@ +.Greeting { + border: 1px solid black; + padding: 5px; + margin: 10px 0; + width: 30rem; +} \ No newline at end of file diff --git a/src/components/Greetings/Greetings.jsx b/src/components/Greetings/Greetings.jsx new file mode 100644 index 000000000..08c974177 --- /dev/null +++ b/src/components/Greetings/Greetings.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import './Greetings.css' + +function Greeting({lang, children}){ + let greeting = '' + if (lang === 'de'){ + greeting = "Hallo" + } else if (lang === 'en'){ + greeting = 'Hello' + } else if (lang === 'es'){ + greeting = 'Hola' + } else if (lang === 'fr'){ + greeting = 'Bonjour' + } + return ( +
+ {greeting} {children} +
+ + ) +} + +export default Greeting; \ No newline at end of file diff --git a/src/components/IdCard/IdCard.css b/src/components/IdCard/IdCard.css new file mode 100644 index 000000000..c9e239a78 --- /dev/null +++ b/src/components/IdCard/IdCard.css @@ -0,0 +1,17 @@ +.IdCard { + border: 1px solid black; + padding: 5px; + margin: 10px 0; + width: 30rem; + display: flex; + align-items: center; +} + +.IdCardInfo { + margin-left: 5px; + text-align: left; +} + +img{ + margin: 0; +} \ No newline at end of file diff --git a/src/components/IdCard/IdCard.jsx b/src/components/IdCard/IdCard.jsx new file mode 100644 index 000000000..69199993a --- /dev/null +++ b/src/components/IdCard/IdCard.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import './IdCard.css' + +function IdCard({ lastName, firstName, gender, height, birth, picture }) { + const formattedBirth = birth.toDateString(); + return ( +
+ {`${lastName}`} +
+
First name: {firstName}
+
Last name: {lastName}
+
Gender: {gender}
+
Height: {height}
+
Birth: {formattedBirth}
+
+
+ ); +} +export default IdCard; \ No newline at end of file diff --git a/src/components/LikeButton/LikeButton.jsx b/src/components/LikeButton/LikeButton.jsx new file mode 100644 index 000000000..2cdd02e4f --- /dev/null +++ b/src/components/LikeButton/LikeButton.jsx @@ -0,0 +1,21 @@ +import React, {useState} from 'react'; + +function LikeButton() { + const colors = ['purple', 'blue', 'green', 'yellow', 'orange', 'red']; + const [counter, setCounter] = useState(0) + const [colorIndex, setColorIndex] = useState(0); + + + const raiseCountAndColor = () => { + setCounter(counter + 1); + setColorIndex((colorIndex + 1) % colors.length); + + }; + return ( +
+ +
+ ) +} + +export default LikeButton \ No newline at end of file diff --git a/src/components/NumbersTable/NumbersTable.css b/src/components/NumbersTable/NumbersTable.css new file mode 100644 index 000000000..80944c8b5 --- /dev/null +++ b/src/components/NumbersTable/NumbersTable.css @@ -0,0 +1,10 @@ +.Grid { + display: grid; + grid-template-columns: repeat(5, 1fr); +} + +.NumberBox { + border: 1px solid black; + padding: 30px; + text-align: center; +} diff --git a/src/components/NumbersTable/NumbersTable.jsx b/src/components/NumbersTable/NumbersTable.jsx new file mode 100644 index 000000000..7548088b1 --- /dev/null +++ b/src/components/NumbersTable/NumbersTable.jsx @@ -0,0 +1,26 @@ +import React from "react"; +import './NumbersTable.css'; + +function NumbersTable({ limit }) { + const numbers = [] + + for (let i = 1; i <= limit; i++) { + numbers.push(i) + } + + const styleBox = { + backgroundColor: 'red' + } + + return ( +
+ { + numbers.map((elm, idx) => { + return
{elm}
+ }) + } +
+ ) +} + +export default NumbersTable; diff --git a/src/components/Random/Random.css b/src/components/Random/Random.css new file mode 100644 index 000000000..74f15734c --- /dev/null +++ b/src/components/Random/Random.css @@ -0,0 +1,6 @@ +.Random { + border: 1px solid black; + padding: 5px; + margin: 10px 0; + width: 30rem; +} \ No newline at end of file diff --git a/src/components/Random/Random.jsx b/src/components/Random/Random.jsx new file mode 100644 index 000000000..cc856b488 --- /dev/null +++ b/src/components/Random/Random.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import './Random.css' + +function Random({min, max}){ + min = Math.ceil(min); + max = Math.floor(max); + let randomNumber = Math.floor(Math.random() * (max - min) + min) + return ( +
+

Random value between {min} and {max} = {randomNumber}

+
+ ) +} + +export default Random; \ No newline at end of file diff --git a/src/components/Rating/Rating.jsx b/src/components/Rating/Rating.jsx new file mode 100644 index 000000000..03b4ee481 --- /dev/null +++ b/src/components/Rating/Rating.jsx @@ -0,0 +1,17 @@ +import React from 'react'; + +function Rating({children}){ + const roundNumber = Math.round(children); + const stars = Array.from({ length: 5}, (_, index) => { + if (index < roundNumber) { + return '★'; + } else { + return '☆'; + } + }); + + return ( +
{stars}
+ ) +} +export default Rating \ No newline at end of file