diff --git a/src/App.js b/src/App.js index 3784575..7cfa047 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,132 @@ -import logo from './logo.svg'; -import './App.css'; +import React from 'react'; +import IdCard from './components/Idcard'; +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 Dice from './components/DiceComponent'; +import Carousel from './components/Carousal'; +import RGBColorPicker from './components/RGBColorPicker'; +import NumbersTable from './components/NumbersTable'; function App() { return (
-
- logo -

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

- - Learn React - -
+

User Details

+ +

Greetings

+ Ludwig +François +

Random Number

+ + +

Box Color

+ + +

Credit Cards

+ + + + + +

Ratings

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

Driver Cards +

+ + + +

LikeButton

+ + +

ClickablePicture

+ + +

Dice

+ + +

Carousel

+ + +

Numbers Table

+ + +

RGB Color Picker

+ + + +
); } diff --git a/src/assets/images/dice-empty.png b/src/assets/dice-empty.png similarity index 100% rename from src/assets/images/dice-empty.png rename to src/assets/dice-empty.png diff --git a/src/assets/images/dice1.png b/src/assets/dice1.png similarity index 100% rename from src/assets/images/dice1.png rename to src/assets/dice1.png diff --git a/src/assets/images/dice2.png b/src/assets/dice2.png similarity index 100% rename from src/assets/images/dice2.png rename to src/assets/dice2.png diff --git a/src/assets/images/dice3.png b/src/assets/dice3.png similarity index 100% rename from src/assets/images/dice3.png rename to src/assets/dice3.png diff --git a/src/assets/images/dice4.png b/src/assets/dice4.png similarity index 100% rename from src/assets/images/dice4.png rename to src/assets/dice4.png diff --git a/src/assets/images/dice5.png b/src/assets/dice5.png similarity index 100% rename from src/assets/images/dice5.png rename to src/assets/dice5.png diff --git a/src/assets/images/dice6.png b/src/assets/dice6.png similarity index 100% rename from src/assets/images/dice6.png rename to src/assets/dice6.png diff --git a/src/assets/images/master-card.svg b/src/assets/master-card.svg similarity index 100% rename from src/assets/images/master-card.svg rename to src/assets/master-card.svg diff --git a/src/assets/images/maxence-glasses.png b/src/assets/maxence-glasses.png similarity index 100% rename from src/assets/images/maxence-glasses.png rename to src/assets/maxence-glasses.png diff --git a/src/assets/images/maxence.png b/src/assets/maxence.png similarity index 100% rename from src/assets/images/maxence.png rename to src/assets/maxence.png diff --git a/src/assets/images/visa.png b/src/assets/visa.png similarity index 100% rename from src/assets/images/visa.png rename to src/assets/visa.png diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js new file mode 100644 index 0000000..a3b4f9a --- /dev/null +++ b/src/components/BoxColor.js @@ -0,0 +1,25 @@ +import React from 'react'; + +function BoxColor({ r, g, b }) { + const divStyle = { + backgroundColor: `rgb(${r},${g},${b})`, + padding: '20px', + margin: '10px', + color: 'white', + textAlign: 'center', + border: '1px solid black', + }; + + const toHex = (r, g, b) => { + return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`; + }; + + return ( +
+ rgb({r}, {g}, {b})
+ {toHex(r, g, b)} +
+ ); +} + +export default BoxColor; diff --git a/src/components/Carousal.js b/src/components/Carousal.js new file mode 100644 index 0000000..30e2925 --- /dev/null +++ b/src/components/Carousal.js @@ -0,0 +1,27 @@ +import React, { useState } from 'react'; + +function Carousel({ images }) { + const [currentIndex, setCurrentIndex] = useState(0); + + const handleLeftClick = () => { + setCurrentIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1)); + }; + + const handleRightClick = () => { + setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1)); + }; + + return ( +
+ + carousel + +
+ ); +} + +export default Carousel; diff --git a/src/components/ClickablePicture.js b/src/components/ClickablePicture.js new file mode 100644 index 0000000..6b75ec5 --- /dev/null +++ b/src/components/ClickablePicture.js @@ -0,0 +1,20 @@ +import React, { useState } from 'react'; + +function ClickablePicture({ img, imgClicked }) { + const [isClicked, setIsClicked] = useState(false); + + const handleClick = () => { + setIsClicked(!isClicked); + }; + + return ( + Clickable + ); +} + +export default ClickablePicture; diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js new file mode 100644 index 0000000..df4eb32 --- /dev/null +++ b/src/components/CreditCard.js @@ -0,0 +1,40 @@ +import React from 'react'; + +function CreditCard({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color }) { + const cardTypeImage = type === 'Visa' ? 'https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg' : 'https://upload.wikimedia.org/wikipedia/commons/a/a4/Mastercard_2019_logo.svg'; + const formattedNumber = `**** **** **** ${number.slice(-4)}`; + const formattedMonth = expirationMonth < 10 ? `0${expirationMonth}` : expirationMonth; + const formattedYear = expirationYear.toString().slice(-2); + + return ( +
+
+ {type} +
+
{formattedNumber}
+
+
+ Expires {formattedMonth}/{formattedYear} +
+
{bank}
+
+
{owner}
+
+ ); +} + +export default CreditCard; diff --git a/src/components/DiceComponent.js b/src/components/DiceComponent.js new file mode 100644 index 0000000..0e0b209 --- /dev/null +++ b/src/components/DiceComponent.js @@ -0,0 +1,33 @@ +import React, { useState } from 'react'; + +function Dice() { + const diceImages = [ + './assets/dice1.png', + './assets/dice2.png', + './assets/dice3.png', + './assets/dice4.png', + './assets/dice5.png', + './assets/dice6.png', + ]; + const [currentImage, setCurrentImage] = useState(diceImages[0]); + + const handleClick = () => { + setCurrentImage('./assets/images/dice-empty.png'); + setTimeout(() => { + const randomImage = diceImages[Math.floor(Math.random() * diceImages.length)]; + setCurrentImage(randomImage); + }, 1000); + }; + + return ( + Dice + ); +} + +export default Dice; + \ No newline at end of file diff --git a/src/components/DriverCard.js b/src/components/DriverCard.js new file mode 100644 index 0000000..799580d --- /dev/null +++ b/src/components/DriverCard.js @@ -0,0 +1,40 @@ +import React from 'react'; +import Rating from './Rating'; + +function DriverCard({ name, rating, img, car }) { + return ( +
+ {name} +
+

{name}

+ {rating} +

{car.model} - {car.licensePlate}

+
+
+ ); +} + +export default DriverCard; diff --git a/src/components/Greetings.js b/src/components/Greetings.js new file mode 100644 index 0000000..5b77b30 --- /dev/null +++ b/src/components/Greetings.js @@ -0,0 +1,29 @@ +import React from 'react'; + +function Greetings({ lang, children }) { + let greeting; + switch (lang) { + case 'de': + greeting = 'Hallo'; + break; + case 'en': + greeting = 'Hello'; + break; + case 'es': + greeting = 'Hola'; + break; + case 'fr': + greeting = 'Bonjour'; + break; + default: + greeting = 'Hello'; + } + + return ( +
+ {greeting} {children} +
+ ); + } + + export default Greetings; \ No newline at end of file diff --git a/src/components/Idcard.js b/src/components/Idcard.js new file mode 100644 index 0000000..9793fde --- /dev/null +++ b/src/components/Idcard.js @@ -0,0 +1,46 @@ +import React from 'react'; +import userData from '../data/berlin.json'; // Adjust the path as necessary + +function IdCard() { + return ( +
+ {userData.map((user, index) => ( +
+ {`${user.firstName} +
+

+ First Name: {user.firstName} +

+

+ Last Name: {user.lastName} +

+

+ Gender: {user.gender} +

+

+ Height: {user.height} cm +

+

+ Birth: {new Date(user.birth).toDateString()} +

+
+
+ ))} +
+ ); +} + +export default IdCard; diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js new file mode 100644 index 0000000..0581c57 --- /dev/null +++ b/src/components/LikeButton.js @@ -0,0 +1,30 @@ +import React, { useState } from 'react'; + +function LikeButton() { + const [likes, setLikes] = useState(0); + const [colorIndex, setColorIndex] = useState(0); + const colors = ['purple', 'blue', 'green', 'yellow', 'orange', 'red']; + + const handleClick = () => { + setLikes(likes + 1); + setColorIndex((colorIndex + 1) % colors.length); + }; + + return ( + + ); +} + +export default LikeButton; diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js new file mode 100644 index 0000000..821cd26 --- /dev/null +++ b/src/components/NumbersTable.js @@ -0,0 +1,28 @@ +import React from 'react'; + +function NumbersTable({ limit }) { + const numbersArray = Array.from({ length: limit }, (_, i) => i + 1); + + return ( +
+ {numbersArray.map((number) => ( +
+ {number} +
+ ))} +
+ ); +} + +export default NumbersTable; diff --git a/src/components/RGBColorPicker.js b/src/components/RGBColorPicker.js new file mode 100644 index 0000000..30b9321 --- /dev/null +++ b/src/components/RGBColorPicker.js @@ -0,0 +1,34 @@ +import React, { useState } from 'react'; +import SingleColorPicker from './SingleColorPicker'; + +function RGBColorPicker() { + const [rgbValues, setRgbValues] = useState({ r: 0, g: 0, b: 0 }); + + const handleColorChange = (color, value) => { + setRgbValues((prevValues) => ({ + ...prevValues, + [color]: Number(value), + })); + }; + + return ( +
+ + + + +
+

RGB Color: rgb({rgbValues.r}, {rgbValues.g}, {rgbValues.b})

+
+ ); +} + +export default RGBColorPicker; diff --git a/src/components/Random.js b/src/components/Random.js new file mode 100644 index 0000000..4c8f002 --- /dev/null +++ b/src/components/Random.js @@ -0,0 +1,13 @@ +import React from 'react'; + +function Random({ min, max }) { + const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min; + + return ( +
+ Random value between {min} and {max} => {randomNumber} +
+ ); +} + +export default Random; diff --git a/src/components/Rating.js b/src/components/Rating.js new file mode 100644 index 0000000..93fbe79 --- /dev/null +++ b/src/components/Rating.js @@ -0,0 +1,10 @@ +import React from 'react'; + +function Rating({ children }) { + const roundedRating = Math.round(children); + const stars = '★'.repeat(roundedRating) + '☆'.repeat(5 - roundedRating); + + return
{stars}
; +} + +export default Rating; diff --git a/src/components/SingleColorPicker.js b/src/components/SingleColorPicker.js new file mode 100644 index 0000000..30210bc --- /dev/null +++ b/src/components/SingleColorPicker.js @@ -0,0 +1,20 @@ +import React from 'react'; + +function SingleColorPicker({ color, value, onChange }) { + return ( +
+ + onChange(color, e.target.value)} + style={{ marginLeft: '10px', width: '50px' }} + /> +
+ ); +} + +export default SingleColorPicker; + \ No newline at end of file