diff --git a/src/App.js b/src/App.js index 3784575..ad1de23 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,19 @@ 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/Dice'; +import Carousel from './components/Carousel'; +import NumbersTable from './components/NumbersTable'; +import RGBColorPicker from './components/RGBColorPicker'; function App() { return ( @@ -18,6 +32,67 @@ function App() { Learn React + + {/* Render your components here */} +
+ + + Ludwig + François + + + + + + + + 4.2 + + + + + + + + + + + + + + +
); } diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js new file mode 100644 index 0000000..786a62a --- /dev/null +++ b/src/components/BoxColor.js @@ -0,0 +1,20 @@ +// src/components/BoxColor.js +import React from 'react'; + +function BoxColor({ r, g, b }) { + const color = `rgb(${r}, ${g}, ${b})`; + const hex = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; + + return ( +
+ {hex} +
+ ); +} + +export default BoxColor; diff --git a/src/components/Carousel.js b/src/components/Carousel.js new file mode 100644 index 0000000..b9c500b --- /dev/null +++ b/src/components/Carousel.js @@ -0,0 +1,24 @@ +// src/components/Carousel.js +import React, { useState } from 'react'; + +function Carousel({ images }) { + const [index, setIndex] = useState(0); + + const nextImage = () => { + setIndex((index + 1) % images.length); + }; + + const prevImage = () => { + setIndex((index - 1 + images.length) % images.length); + }; + + return ( +
+ + Carousel + +
+ ); +} + +export default Carousel; diff --git a/src/components/ClickablePicture.js b/src/components/ClickablePicture.js new file mode 100644 index 0000000..0ae92fe --- /dev/null +++ b/src/components/ClickablePicture.js @@ -0,0 +1,21 @@ +// src/components/ClickablePicture.js +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..625f85e --- /dev/null +++ b/src/components/CreditCard.js @@ -0,0 +1,26 @@ +// src/components/CreditCard.js +import React from 'react'; + +function CreditCard({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color }) { + const displayNumber = `**** **** **** ${number.slice(-4)}`; + + return ( +
+
{type}
+
{displayNumber}
+
Expires: {expirationMonth}/{expirationYear}
+
{bank}
+
{owner}
+
+ ); +} + +export default CreditCard; diff --git a/src/components/Dice.js b/src/components/Dice.js new file mode 100644 index 0000000..17a6d2f --- /dev/null +++ b/src/components/Dice.js @@ -0,0 +1,25 @@ +// src/components/Dice.js +import React, { useState } from 'react'; + +function Dice() { + const [dice, setDice] = useState('./assets/images/dice-empty.png'); + + const rollDice = () => { + setDice('./assets/images/dice-empty.png'); + setTimeout(() => { + const randomValue = Math.floor(Math.random() * 6) + 1; + setDice(`./assets/images/dice${randomValue}.png`); + }, 1000); + }; + + return ( + Dice + ); +} + +export default Dice; diff --git a/src/components/DriverCard.js b/src/components/DriverCard.js new file mode 100644 index 0000000..f89158a --- /dev/null +++ b/src/components/DriverCard.js @@ -0,0 +1,25 @@ +// src/components/DriverCard.js +import React from 'react'; +import Rating from './Rating'; + +function DriverCard({ name, rating, img, car }) { + return ( +
+ {name} +
+

{name}

+ {rating} +

Car: {car.model}

+

License Plate: {car.licensePlate}

+
+
+ ); +} + +export default DriverCard; diff --git a/src/components/Greetings.js b/src/components/Greetings.js new file mode 100644 index 0000000..eb4481b --- /dev/null +++ b/src/components/Greetings.js @@ -0,0 +1,19 @@ +// src/components/Greetings.js +import React from 'react'; + +function Greetings({ lang, children }) { + const greetings = { + de: 'Hallo', + en: 'Hello', + es: 'Hola', + fr: 'Bonjour', + }; + + return ( +
+ {greetings[lang]} {children} +
+ ); +} + +export default Greetings; diff --git a/src/components/IdCard.js b/src/components/IdCard.js new file mode 100644 index 0000000..1d7671f --- /dev/null +++ b/src/components/IdCard.js @@ -0,0 +1,30 @@ +import React from 'react'; + +function IdCard(props) { + return ( +
+ {`${props.firstName} +
+

First name: {props.firstName}

+

Last name: {props.lastName}

+

Gender: {props.gender}

+

Height: {props.height / 100} m

+

Birth: {props.birth.toDateString()}

+
+
+ ); +} + +export default IdCard; diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js new file mode 100644 index 0000000..002b138 --- /dev/null +++ b/src/components/LikeButton.js @@ -0,0 +1,21 @@ +// src/components/LikeButton.js +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..78b9756 --- /dev/null +++ b/src/components/NumbersTable.js @@ -0,0 +1,18 @@ +// src/components/NumbersTable.js +import React from 'react'; + +function NumbersTable({ limit }) { + const numbers = Array.from({ length: limit }, (_, i) => i + 1); + + return ( +
+ {numbers.map(number => ( +
+ {number} +
+ ))} +
+ ); +} + +export default NumbersTable; diff --git a/src/components/RGBColorPicker.js b/src/components/RGBColorPicker.js new file mode 100644 index 0000000..27ce4f1 --- /dev/null +++ b/src/components/RGBColorPicker.js @@ -0,0 +1,20 @@ +// src/components/RGBColorPicker.js +import React, { useState } from 'react'; +import SingleColorPicker from './SingleColorPicker'; + +function RGBColorPicker() { + const [rValue, setRValue] = useState(0); + const [gValue, setGValue] = useState(0); + const [bValue, setBValue] = useState(0); + + return ( +
+
+ + + +
+ ); +} + +export default RGBColorPicker; diff --git a/src/components/Random.js b/src/components/Random.js new file mode 100644 index 0000000..d750cc9 --- /dev/null +++ b/src/components/Random.js @@ -0,0 +1,15 @@ +// src/components/Random.js +import React from 'react'; + +function Random({ min, max }) { + // Calculate a random number between min and 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..e69de29 diff --git a/src/components/SingleColorPicker.js b/src/components/SingleColorPicker.js new file mode 100644 index 0000000..3501ed4 --- /dev/null +++ b/src/components/SingleColorPicker.js @@ -0,0 +1,21 @@ +// src/components/SingleColorPicker.js +import React from 'react'; + +function SingleColorPicker({ color, value, onChange }) { + return ( +
+ +
+ ); +} + +export default SingleColorPicker;