-
-
-# LAB | React Training
-
-
-
-## Introduction
-
-
-
-The purpose of this exercise is to practice the core React concepts such as: creating components, passing data through props, working with state, rendering lists, and working with forms (controlled components).
-
-
-
-To see the expected result for each iteration, refer to the solution example: [**React Training - solution**](https://5c6c2a0de07b084ce35373ee--determined-aryabhata-a8a833.netlify.com/).
-
-
-
-## Setup
-
-
-
-- Fork this repo
-
-- Clone this repo
-
-
-
-```shell
-
-$ cd lab-react-training
-
-$ npm install
-
-$ npm start
-
-```
-
-
-
-
-
-
-
-## Submission
-
-
-
-- Upon completion, run the following commands:
-
-
-
-```
-
-git add .
-
-git commit -m "done"
-
-git push origin master
-
-```
-
-
-
-- Create a Pull Request so we can review your work.
-
-
-
-## Instructions
-
-
-
-### Iteration 1 | Component: `IdCard`
-
-
-
-Create and render an `IdCard` component with 6 props:
-
-
-
-- `lastName`: A string
-
-- `firstName`: A string
-
-- `gender`: A string, `'male'` or `'female'`
-
-- `height`: A number
-
-- `birth`: A date
-
-- `picture`: A string
-
-
-
-**Example:**
-
-
-
-```jsx
-
-
-
- 
-
+ Ludwig
+François
+0
+
+1.49
+
+1.5
+
+3
+
+4
+
+5
+
);
}
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render(
- Edit src/App.js and save to reload.
-
User Details
+Greetings
+Random Number
+Box Color
+Credit Cards
+Ratings
+ +Driver Cards +
+LikeButton
+ +ClickablePicture
+ +Dice
+Carousel
+Numbers Table
+RGB Color Picker
+
+ rgb({r}, {g}, {b})
+ {toHex(r, g, b)} +
+ );
+}
+
+export default BoxColor;
\ No newline at end of file
diff --git a/src/components/Carousal.js b/src/components/Carousal.js
new file mode 100644
index 0000000..fb6b020
--- /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 (
+ + {toHex(r, g, b)} +
+
+ 
+
+
+ );
+}
+
+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..7e54731
--- /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 (
+
+
+ );
+}
+
+export default CreditCard;
\ No newline at end of file
diff --git a/src/components/DiceComponent.js b/src/components/DiceComponent.js
new file mode 100644
index 0000000..57e68f8
--- /dev/null
+++ b/src/components/DiceComponent.js
@@ -0,0 +1,32 @@
+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 (
+
+ 
+
+ {formattedNumber}
+
+
+
+ Expires {formattedMonth}/{formattedYear}
+
+ {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..da07ffb
--- /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 (
+
+ {rating}
+
+ {name}
+{car.model} - {car.licensePlate}
+
+ {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..671fd68
--- /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) => (
+
+ );
+}
+
+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..d1767da
--- /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;
\ No newline at end of file
diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js
new file mode 100644
index 0000000..a44e2e1
--- /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 (
+
+ 
+
+ ))}
+
+
+ + First Name: {user.firstName} +
++ Last Name: {user.lastName} +
++ Gender: {user.gender} +
++ Height: {user.height} cm +
++ Birth: {new Date(user.birth).toDateString()} +
+
+ {numbersArray.map((number) => (
+
+ );
+}
+
+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..ba8d499
--- /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 (
+
+ {number}
+
+ ))}
+
+
+ );
+}
+
+export default RGBColorPicker;
\ No newline at end of file
diff --git a/src/components/Random.js b/src/components/Random.js
new file mode 100644
index 0000000..e87ac15
--- /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 (
+ RGB Color: rgb({rgbValues.r}, {rgbValues.g}, {rgbValues.b})
+
+ Random value 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..80021ec
--- /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;
\ No newline at end of file
diff --git a/src/components/SingleColorPicker.js b/src/components/SingleColorPicker.js
new file mode 100644
index 0000000..da3997b
--- /dev/null
+++ b/src/components/SingleColorPicker.js
@@ -0,0 +1,19 @@
+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
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 8f2609b..0000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';