- Edit src/App.js and save to reload.
-
+ Ludwig
+ François
+
+
);
}
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js
new file mode 100644
index 0000000..2502f0c
--- /dev/null
+++ b/src/components/BoxColor.js
@@ -0,0 +1,16 @@
+function BoxColor({ r, g, b }) {
+ const backgroundColor = `rgb(${r}, ${g}, ${b})`;
+ const hexColor = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+
+ return (
+
+
+
+
+ 0
+
+ 1.49
+
+ 1.5
+
+ 3
+
+ 4
+
+ 5
+
+
+
+
+
+ );
+}
+
+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..d20ffec
--- /dev/null
+++ b/src/components/Carousel.js
@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+
+function Carousel({ images }) {
+ const [currentIndex, setCurrentIndex] = useState(0);
+
+ const nextImage = () => {
+ setCurrentIndex((currentIndex + 1) % images.length);
+ };
+
+ const prevImage = () => {
+ setCurrentIndex((currentIndex - 1 + images.length) % images.length);
+ };
+
+ return (
+ {backgroundColor}
+{hexColor}
+
+
+ 
+
+
+ );
+}
+
+export default Carousel;
\ No newline at end of file
diff --git a/src/components/ClickablePicture.js b/src/components/ClickablePicture.js
new file mode 100644
index 0000000..fe566f4
--- /dev/null
+++ b/src/components/ClickablePicture.js
@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+
+function ClickablePicture({ img, imgClicked }) {
+ const [isClicked, setIsClicked] = useState(false);
+
+ return (
+
+
+ );
+}
+
+export default CreditCard;
\ No newline at end of file
diff --git a/src/components/Dice.js b/src/components/Dice.js
new file mode 100644
index 0000000..7ecf610
--- /dev/null
+++ b/src/components/Dice.js
@@ -0,0 +1,52 @@
+import React, { 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';
+
+function Dice() {
+ const [diceValue, setDiceValue] = useState(diceEmpty);
+
+ const rollDice = () => {
+ setDiceValue(diceEmpty);
+ setTimeout(() => {
+ const newValue = Math.floor(Math.random() * 6) + 1;
+ switch (newValue) {
+ case 1:
+ setDiceValue(dice1);
+ break;
+ case 2:
+ setDiceValue(dice2);
+ break;
+ case 3:
+ setDiceValue(dice3);
+ break;
+ case 4:
+ setDiceValue(dice4);
+ break;
+ case 5:
+ setDiceValue(dice5);
+ break;
+ case 6:
+ setDiceValue(dice6);
+ break;
+ default:
+ break;
+ }
+ }, 1000);
+ };
+
+ return (
+ {type}
+**** **** **** {lastFourDigits}
+
+
+
+
+ Expires {expirationMonth}/{expirationYear}
+{bank}
+{owner}
+
+ 
+
+ );
+}
+
+export default DriverCard;
\ No newline at end of file
diff --git a/src/components/Greetings.js b/src/components/Greetings.js
new file mode 100644
index 0000000..d6898f2
--- /dev/null
+++ b/src/components/Greetings.js
@@ -0,0 +1,11 @@
+function Greetings({ lang, children }) {
+ const greetings = {
+ de: "Hallo",
+ en: "Hello",
+ es: "Hola",
+ fr: "Bonjour"
+ };
+ return
+ {rating}
+
+ {name}
+{`${car.model} - ${car.licensePlate}`}
+{`${greetings[lang]} ${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..77c45ea --- /dev/null +++ b/src/components/IdCard.js @@ -0,0 +1,19 @@ +function IdCard({ lastName, firstName, gender, height, birth, picture }) { + return ( +
+ 
+
+ );
+}
+
+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..c3b1ee7
--- /dev/null
+++ b/src/components/LikeButton.js
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+
+function LikeButton() {
+ const [likes, setLikes] = useState(0);
+ const colors = ['bg-purple-500', 'bg-blue-500', 'bg-green-500', 'bg-yellow-500', 'bg-orange-500', 'bg-red-500'];
+
+ const handleClick = () => {
+ setLikes(likes + 1);
+ };
+
+ return (
+
+ );
+}
+
+export default LikeButton;
\ No newline at end of file
diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js
new file mode 100644
index 0000000..341f4c9
--- /dev/null
+++ b/src/components/NumbersTable.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+function NumbersTable({ limit }) {
+ const rows = Math.ceil(limit / 6); // Assuming 6 numbers per row
+ const numbers = Array.from({ length: limit }, (_, index) => index + 1);
+
+ return (
+
+
+ {`${firstName} ${lastName}`}
+Gender: {gender}
+Height: {height} cm
+Birth: {birth.toDateString()}
+
+ {numbers.map((number, index) => (
+
+ );
+}
+
+export default NumbersTable;
\ No newline at end of file
diff --git a/src/components/RGBColorPicker.js b/src/components/RGBColorPicker.js
new file mode 100644
index 0000000..ab9bacc
--- /dev/null
+++ b/src/components/RGBColorPicker.js
@@ -0,0 +1,43 @@
+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 (
+
+ {number}
+
+ ))}
+
+ setRValue(newValue)}
+ />
+ setGValue(newValue)}
+ />
+ setBValue(newValue)}
+ />
+
+
+ );
+};
+
+export default RGBColorPicker;
diff --git a/src/components/Random.js b/src/components/Random.js
new file mode 100644
index 0000000..f9b931f
--- /dev/null
+++ b/src/components/Random.js
@@ -0,0 +1,6 @@
+function Random({ min, max }) {
+ const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+ return
+
+
+ rgb({rValue}, {gValue}, {bValue})
+Random number between {min} and {max} => {randomNumber}
; +} + +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..22da60c --- /dev/null +++ b/src/components/Rating.js @@ -0,0 +1,10 @@ +function Rating({ children }) { + const filledStars = Math.round(children); // Round to nearest whole number + const stars = Array.from({ length: 5 }, (_, index) => + index < filledStars ? '★' : '☆' + ).join(''); + + return{stars}
; +} + +export default Rating; \ No newline at end of file diff --git a/src/components/SingleColorPicker.js b/src/components/SingleColorPicker.js new file mode 100644 index 0000000..d73f8b2 --- /dev/null +++ b/src/components/SingleColorPicker.js @@ -0,0 +1,35 @@ +import React from "react"; + +const SingleColorPicker = ({ color, value, onChange }) => { + const colorMap = { + r: "red", + g: "green", + b: "blue", + }; + + return ( +
+
+
+
+ );
+};
+
+export default SingleColorPicker;
diff --git a/src/index.css b/src/index.css
index ec2585e..bd6213e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,3 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..a0cebb6
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./src/**/*.{html,js}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
\ No newline at end of file