diff --git a/src/App.js b/src/App.js index 3784575..ba84b14 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,176 @@ -import logo from './logo.svg'; + import './App.css'; +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/Dice'; +import Carousel from './components/Carousel'; +import NumbersTable from './components/NumbersTable'; +import RGBColorPicker from './components/RGBColorPicker'; +import SingleColorPicker from './components/SingleColorPicker'; function App() { return ( -
-
- logo -

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

- - Learn React - -
+
+ + + + + + + +Ludwig + +François + + + + + + + + + + + + + + + + + + + +0 + +1.49 + +1.5 + +3 + +4 + +5 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
); } diff --git a/src/components/BoxColor.css b/src/components/BoxColor.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js new file mode 100644 index 0000000..c5a6592 --- /dev/null +++ b/src/components/BoxColor.js @@ -0,0 +1,27 @@ +import React from 'react' + +const BoxColor =({r, g, b}) =>{ + const divStyle={ + backgroundColor: `rgb(${r}, ${g}, ${b})`, + width: '200px', + height: '100px', + margin: '10px', + display: 'inline-block', + border: '1px solid #333', + textAlign: 'center', + lineHeight: '100px', + color: 'white', + + + }; + + + return ( +
+ rgba({r},{g},{b}) +
+ ) +} + + +export default BoxColor; \ No newline at end of file diff --git a/src/components/Carousel.js b/src/components/Carousel.js new file mode 100644 index 0000000..6352bf4 --- /dev/null +++ b/src/components/Carousel.js @@ -0,0 +1,25 @@ +import React, { useState } from 'react'; + +const Carousel = ({ images }) => { + const [currentIndex, setCurrentIndex] = useState(0); + + const goToNextSlide = () => { + const newIndex = (currentIndex + 1) % images.length; + setCurrentIndex(newIndex); + }; + + const goToPreviousSlide = () => { + const newIndex = (currentIndex - 1 + images.length) % images.length; + setCurrentIndex(newIndex); + }; + + return ( +
+ + Slide + +
+ ); +}; + +export default Carousel; diff --git a/src/components/ClickablePicture.js b/src/components/ClickablePicture.js new file mode 100644 index 0000000..95b5d98 --- /dev/null +++ b/src/components/ClickablePicture.js @@ -0,0 +1,24 @@ +import React, { useState } from 'react'; + +const ClickablePicture = ({ img, imgClicked }) => { + const [isClicked, setIsClicked] = useState(false); + + const handleClick = () => { + console.log('Click event triggered'); + setIsClicked(!isClicked); + }; + + console.log('img:', img); + console.log('imgClicked:', imgClicked); + + return ( + + ); +}; + +export default ClickablePicture; diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js new file mode 100644 index 0000000..28710e6 --- /dev/null +++ b/src/components/CreditCard.js @@ -0,0 +1,52 @@ +import React from 'react'; + +const CreditCard = ({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color, logo }) => { + const lastFourDigits = number.slice(-4); + + const cardStyle = { + backgroundColor: bgColor, + color: color, + width: '300px', + padding: '20px', + borderRadius: '10px', + margin: '10px', + position: 'relative', // Add position relative to the card container + fontFamily: 'Arial, sans-serif', + }; + + const logoStyle = { + position: 'absolute', + top: '10px', + right: '10px', + width: '50px', // Adjust the width as needed + height: 'auto', // Maintain aspect ratio + }; + + const cardTypeStyle = { + fontSize: '24px', + marginBottom: '10px', + }; + + const cardNumberStyle = { + fontSize: '20px', + marginBottom: '10px', + }; + + const cardInfoStyle = { + fontSize: '16px', + marginBottom: '5px', + }; + + return ( +
+ {logo && Logo} {/* Render logo if provided */} +
{type}
+
**** **** **** {lastFourDigits}
+
Expires: {expirationMonth}/{expirationYear}
+
Bank: {bank}
+
Owner: {owner}
+
+ ); +}; + +export default CreditCard; diff --git a/src/components/Dice.js b/src/components/Dice.js new file mode 100644 index 0000000..0fae9ab --- /dev/null +++ b/src/components/Dice.js @@ -0,0 +1,21 @@ +import React, { useState } from 'react'; + +const Dice = () => { + const [diceImage, setDiceImage] = useState('./assets/images/dice-empty.png'); + + const rollDice = () => { + setDiceImage('./assets/images/dice-empty.png'); // Display empty image + setTimeout(() => { + const randomNumber = Math.floor(Math.random() * 6) + 1; // Generate random number between 1 and 6 + setDiceImage(`./assets/images/dice${randomNumber}.png`); // Display random dice image + }, 1000); + }; + + return ( +
+ Dice +
+ ); +}; + +export default Dice; diff --git a/src/components/DriverCard.css b/src/components/DriverCard.css new file mode 100644 index 0000000..6eca125 --- /dev/null +++ b/src/components/DriverCard.css @@ -0,0 +1,28 @@ +.driver-card { + display: flex; + align-items: center; + border: 1px solid #ccc; + border-radius: 5px; + padding: 10px; + margin-bottom: 10px; + } + + .driver-img { + width: 100px; + height: 100px; + border-radius: 50%; + margin-right: 20px; + } + + .driver-info { + font-family: Arial, sans-serif; + } + + .driver-info h2 { + margin-bottom: 5px; + } + + .driver-info p { + margin: 0; + } + \ No newline at end of file diff --git a/src/components/DriverCard.js b/src/components/DriverCard.js new file mode 100644 index 0000000..a933a5e --- /dev/null +++ b/src/components/DriverCard.js @@ -0,0 +1,18 @@ +import React from 'react'; +import "./DriverCard.css" + + +const DriverCard = ({ name, rating, img, car }) => { + return ( +
+ Driver +
+

{name}

+

{rating}

+

{car.model} - {car.licensePlate}

+
+
+ ); +}; + +export default DriverCard; diff --git a/src/components/Greetings.css b/src/components/Greetings.css new file mode 100644 index 0000000..9a0b512 --- /dev/null +++ b/src/components/Greetings.css @@ -0,0 +1,11 @@ +.greet{ + display: flex; + align-items: center; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + margin-bottom: 10px; + border: 2px solid black; + font-weight: 700; + font-size:x-large; +} \ No newline at end of file diff --git a/src/components/Greetings.js b/src/components/Greetings.js new file mode 100644 index 0000000..ddfaede --- /dev/null +++ b/src/components/Greetings.js @@ -0,0 +1,33 @@ +import React from 'react' +import "./Greetings.css" + + +const 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; + diff --git a/src/components/IdCard.css b/src/components/IdCard.css new file mode 100644 index 0000000..2746337 --- /dev/null +++ b/src/components/IdCard.css @@ -0,0 +1,29 @@ +.id-card { + display: flex; + align-items: center; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + margin-bottom: 10px; + border: 2px solid black; + } + + .id-card img { + width: 200px; + height: 200px; + + margin-right: 20px; + } + + .id-card div { + flex: 1; + } + + .id-card p { + margin: 5px 0; + } + + .id-card strong { + font-weight: bold; + } + \ No newline at end of file diff --git a/src/components/IdCard.js b/src/components/IdCard.js new file mode 100644 index 0000000..ca34d62 --- /dev/null +++ b/src/components/IdCard.js @@ -0,0 +1,22 @@ +import React from 'react' +import "./IdCard.css"; + +const IdCard = ({lastName ,firstName, gender, height, birth, picture}) => { + return ( +
+ profile +
+

Last Name:{lastName}

+

First Name:{firstName}

+

Gender:{gender}

+

Height:{height}

+

Birth:{birth.toLocaleDateString()}

+
+ + + +
+ ) +} + +export default IdCard; \ No newline at end of file diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js new file mode 100644 index 0000000..e230932 --- /dev/null +++ b/src/components/LikeButton.js @@ -0,0 +1,34 @@ +import React, { useState } from 'react'; + +const LikeButton = () => { + const [likes, setLikes] = useState(0); + const [bgColorIndex, setBgColorIndex] = useState(0); + const colors = ['purple', 'blue', 'green', 'yellow', 'orange', 'red']; + + const handleLikeClick = () => { + setLikes(likes + 1); + setBgColorIndex((bgColorIndex + 1) % colors.length); + }; + + return ( +
+ + + +
+ + + ); +}; + +export default LikeButton; diff --git a/src/components/NumbersTable.css b/src/components/NumbersTable.css new file mode 100644 index 0000000..dad4634 --- /dev/null +++ b/src/components/NumbersTable.css @@ -0,0 +1,19 @@ +.numbers-table { + display: flex; + flex-wrap: wrap; + } + + .numbers-table div { + width: calc(20% - 8px); + width: 50px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid black; + } + + .even { + background-color: red; + } + \ No newline at end of file diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js new file mode 100644 index 0000000..cca8e9a --- /dev/null +++ b/src/components/NumbersTable.js @@ -0,0 +1,21 @@ +import React from 'react'; +import "./NumbersTable.css"; + +const NumbersTable = ({ limit }) => { + const numbers = []; + for (let i = 1; i <= limit; i++) { + numbers.push(i); + } + + return ( +
+ {numbers.map((number, index) => ( +
+ {number} +
+ ))} +
+ ); +}; + +export default NumbersTable; diff --git a/src/components/RGBColorPicker.js b/src/components/RGBColorPicker.js new file mode 100644 index 0000000..e1d39cb --- /dev/null +++ b/src/components/RGBColorPicker.js @@ -0,0 +1,38 @@ +import React, { useState } from 'react'; +import SingleColorPicker from './SingleColorPicker'; + +const RGBColorPicker = () => { + const [rValue, setRValue] = useState(0); + const [gValue, setGValue] = useState(0); + const [bValue, setBValue] = useState(0); + + return ( +
+ setRValue(value)} + /> + setGValue(value)} + /> + setBValue(value)} + /> +
+
+ ); +}; + +export default RGBColorPicker; diff --git a/src/components/Random.css b/src/components/Random.css new file mode 100644 index 0000000..e9f167b --- /dev/null +++ b/src/components/Random.css @@ -0,0 +1,11 @@ +.random{ + display: flex; + align-items: center; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + margin-bottom: 10px; + border: 2px solid black; + font-weight: 700; + font-size:x-large; +} \ No newline at end of file diff --git a/src/components/Random.js b/src/components/Random.js new file mode 100644 index 0000000..2c14d88 --- /dev/null +++ b/src/components/Random.js @@ -0,0 +1,14 @@ +import React from 'react' +import "./Random.css"; + +const Random = ({min , max}) => { + const randnum = Math.floor(Math.random() * (max - min + 1)) + min; + return ( +
+

Random Value between {min} and {max} => {randnum}

+ +
+ ) +} + +export default Random \ No newline at end of file diff --git a/src/components/Rating.js b/src/components/Rating.js new file mode 100644 index 0000000..e9179cf --- /dev/null +++ b/src/components/Rating.js @@ -0,0 +1,19 @@ +import React from 'react'; + +const Rating = ({ children }) => { + const filledStars = Math.round(children); + const emptyStars = 5 - filledStars; + + return ( +
+ {[...Array(filledStars)].map((_, index) => ( + ★ + ))} + {[...Array(emptyStars)].map((_, index) => ( + ☆ + ))} +
+ ); +}; + +export default Rating; diff --git a/src/components/SingleColorPicker.js b/src/components/SingleColorPicker.js new file mode 100644 index 0000000..3e0b103 --- /dev/null +++ b/src/components/SingleColorPicker.js @@ -0,0 +1,20 @@ +import React from 'react'; + +const SingleColorPicker = ({ color, value, onChange }) => { + return ( +
+ + onChange(e.target.value)} + /> +
+ ); +}; + +export default SingleColorPicker;