-
- 
-
-
- );
-}
-
-export default App;
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 000000000..bb12b61d9
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,112 @@
+import './App.css';
+import BoxColor from './components/BoxColor.jsx';
+import CreditCard from './components/CreditCard';
+import Greetings from './components/Greetings';
+import IdCard from './components/IdCard';
+import Random from './components/Random.jsx';
+import Rating from './components/Rating.jsx';
+import DriverCard from './components/DriverCard.jsx';
+
+function App() {
+ return (
+
- Edit src/App.js and save to reload.
-
+ Ludwig
+ François
+
+ 0
+ 1.49
+ 1.5
+ 3
+ 4
+ 5
+
+
+ );
+}
+
+export default App;
diff --git a/src/assets/images/glasses.png b/src/assets/images/glasses.png
new file mode 100644
index 000000000..a0afd63a1
Binary files /dev/null and b/src/assets/images/glasses.png differ
diff --git a/src/components/BoxColor.jsx b/src/components/BoxColor.jsx
new file mode 100644
index 000000000..3143c0383
--- /dev/null
+++ b/src/components/BoxColor.jsx
@@ -0,0 +1,19 @@
+function BoxColor(props) {
+ const { r, g, b, textColor } = props;
+
+ const divStyle = {
+ backgroundColor: `rgb(${r},${g},${b})`,
+ color: textColor,
+ };
+
+ return (
+ LAB | React Training
+ +ITERATION 1: ID CARD
+ITERATION 2: GREETINGS
+ITERATION 3: RANDOMIZER
+ITERATION 4: BOX COLOR
+ITERATION 5: CREDIT CARD
+ITERATION 6: RATING
+ITERATION 7: DRIVER CARD
+
+
+ );
+}
+
+export default BoxColor;
diff --git a/src/components/CreditCard.jsx b/src/components/CreditCard.jsx
new file mode 100644
index 000000000..4595f7159
--- /dev/null
+++ b/src/components/CreditCard.jsx
@@ -0,0 +1,36 @@
+function CreditCard(props) {
+ const {
+ type,
+ number,
+ expirationMonth,
+ expirationYear,
+ bank,
+ owner,
+ bgColor,
+ color,
+ } = props;
+
+ const divStyle = {
+ backgroundColor: bgColor,
+ color,
+ };
+
+ const formattedMonth =
+ expirationMonth < 10 ? `0${expirationMonth}` : expirationMonth;
+
+ const maskedNumbers = `···· ···· ···· ${number.slice(-4)}`;
+
+ return (
+ + rgb({r},{g},{b}) +
+ +
+
+ );
+}
+
+export default CreditCard;
diff --git a/src/components/DriverCard.jsx b/src/components/DriverCard.jsx
new file mode 100644
index 000000000..a2b31d9b0
--- /dev/null
+++ b/src/components/DriverCard.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Rating from './Rating';
+
+function DriverCard({ name, rating, img, car }) {
+ return (
+ {type}
+{maskedNumbers}
++ {formattedMonth}/{expirationYear} +
+{bank}
+{owner}
+
+
+ );
+}
+
+export default DriverCard;
diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx
new file mode 100644
index 000000000..0fc2960ba
--- /dev/null
+++ b/src/components/Greetings.jsx
@@ -0,0 +1,30 @@
+function Greetings(props) {
+ let greeting = '';
+
+ const { lang, children } = props;
+
+ switch (lang) {
+ case 'de':
+ greeting = 'Hallo';
+ break;
+ case 'es':
+ greeting = 'Hola';
+ break;
+ case 'en':
+ greeting = 'Hello';
+ break;
+ case 'fr':
+ greeting = 'Bonjour';
+ break;
+ }
+
+ return (
+
+ 
+
+
+ {rating}
+
+ {name}
++ {car.model} - {car.licensePlate} +
+
+
+ );
+}
+
+export default Greetings;
diff --git a/src/components/IdCard.jsx b/src/components/IdCard.jsx
new file mode 100644
index 000000000..7a877191c
--- /dev/null
+++ b/src/components/IdCard.jsx
@@ -0,0 +1,31 @@
+function IdCard(props) {
+ const { lastName, firstName, gender, height, birth, picture } = props;
+
+ return (
+ + {greeting} {children} +
+
+
+ );
+}
+
+export default IdCard;
diff --git a/src/components/Random.jsx b/src/components/Random.jsx
new file mode 100644
index 000000000..a94b533c0
--- /dev/null
+++ b/src/components/Random.jsx
@@ -0,0 +1,15 @@
+function Random(props) {
+ const { min, max } = props;
+
+ const randomResult = Math.floor(Math.random() * max + min);
+
+ return (
+
+ 
+
+
+
+
+ + First name: {firstName} +
++ Last name: {lastName} +
++ Gender: {gender} +
++ Height: {height} +
++ Birth: {birth.toDateString()} +
+
+
+ );
+}
+
+export default Random;
diff --git a/src/components/Rating.jsx b/src/components/Rating.jsx
new file mode 100644
index 000000000..3c8959851
--- /dev/null
+++ b/src/components/Rating.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+function Rating({ children }) {
+ const rate = Math.round(parseFloat(children));
+ const stars = `${'★'.repeat(rate)}${'☆'.repeat(5 - rate)}`;
+
+ return + Random value between {min} and {max} equals to {randomResult} +
+{stars}
;
+}
+
+export default Rating;
diff --git a/src/data/berlin.json b/src/data/berlin.json
index aebdd5887..bc938ec03 100644
--- a/src/data/berlin.json
+++ b/src/data/berlin.json
@@ -1,30 +1,198 @@
[
- {"firstName": "Aaron", "lastName": "Newell", "country": "England", "img": "https://i.imgur.com/CFgX3Xx.png", "isStudent": false},
- {"firstName": "Alec", "lastName": "Budd", "country": "USA", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550165485/Ironclass/IH_Jan1950.jpg.jpg", "isStudent": true},
- {"firstName": "Alexander", "lastName": "Burdett", "country": "England", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550166990/Ironclass/alexander.jpeg.jpg", "isStudent": true},
- {"firstName": "Amelia", "lastName": "Chorng Ua", "country": "Malaysia", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550168765/Ironclass/IH_Jan1952.jpg.jpg", "isStudent": true},
- {"firstName": "André", "lastName": "Sebastian", "country": "Germany", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550164358/Ironclass/IH_Jan1928.jpg.jpg", "isStudent": true},
- {"firstName": "Axel", "lastName": "Dahlin", "country": "Sweden", "img": "https://i.imgur.com/V8bB1SMb.jpg", "isStudent": false},
- {"firstName": "Emmanuel", "lastName": "Iyere", "country": "Nigeria", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550166409/Ironclass/IH_Jan1933.jpg.jpg", "isStudent": true},
- {"firstName": "Federico", "lastName": "Cassettai", "country": "Italy", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550165453/Ironclass/IH_Jan1942.jpg.jpg", "isStudent": true},
- {"firstName": "Felix", "lastName": "Grosser", "country": "Germany", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167284/Ironclass/IH_Jan1939.jpg.jpg", "isStudent": true},
- {"firstName": "Franziska", "lastName": "Bath", "country": "Germany", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550165033/Ironclass/IH_Jan1934.jpg.jpg", "isStudent": true},
- {"firstName": "Jamie", "lastName": "Egan", "country": "Scotland", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167356/Ironclass/IH_Jan1947.jpg.jpg", "isStudent": true},
- {"firstName": "Jennifer", "lastName": "Roberts", "country": "England", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167383/Ironclass/IH_Jan1943.jpg.jpg", "isStudent": true},
- {"firstName": "Julia", "lastName": "Miller", "country": "Kazakhstan", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550165074/Ironclass/IH_Jan1937.jpg.jpg", "isStudent": true},
- {"firstName": "Ksenia", "lastName": "Danniker", "country": "Russia", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550165850/Ironclass/IH_Jan1945.jpg.jpg", "isStudent": true},
- {"firstName": "Laura", "lastName": "Puyol Rigol", "country": "Catalonia", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550165798/Ironclass/IH_Jan1946.jpg.jpg", "isStudent": true},
- {"firstName": "Malte", "lastName": "Felmy", "country": "Germany", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550164955/Ironclass/IH_Jan1932.jpg.jpg", "isStudent": true},
- {"firstName": "Marvin", "lastName": "Artioli", "country": "Italy", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167631/Ironclass/IH_Jan1953.jpg.jpg", "isStudent": true},
- {"firstName": "Matt", "lastName": "Harrison", "country": "USA", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550166114/Ironclass/IH_Jan1949.jpg.jpg", "isStudent": true},
- {"firstName": "Maxence", "lastName": "Bouret", "country": "France", "img": "https://i.imgur.com/8P2xl9sb.jpg", "isStudent": false},
- {"firstName": "Min", "lastName": "Sheng", "country": "Malaysia", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167221/Ironclass/IH_Jan1951.jpg.jpg", "isStudent": true},
- {"firstName": "Moritz", "lastName": "Opitz", "country": "Germany", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167694/Ironclass/IH_Jan1941.jpg.jpg", "isStudent": true},
- {"firstName": "Na'aman", "lastName": "Hirschfeld", "country": "Israel", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550166075/Ironclass/IH_Jan1936.jpg.jpg", "isStudent": true},
- {"firstName": "Pedro", "lastName": "Arantes", "country": "Brazil", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167744/Ironclass/IH_Jan1929.jpg.jpg", "isStudent": true},
- {"firstName": "Petter", "lastName": "Astedt", "country": "Sweden", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167875/Ironclass/IH_Jan1948.jpg.jpg", "isStudent": true},
- {"firstName": "Ruby", "lastName": "Lai", "country": "Taiwan", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167904/Ironclass/IH_Jan1944.jpg.jpg", "isStudent": true},
- {"firstName": "Sinan", "lastName": "Taylan", "country": "Turkey", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167937/Ironclass/IH_Jan1940.jpg.jpg", "isStudent": true},
- {"firstName": "Svenja", "lastName": "Weiler", "country": "Germany", "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167977/Ironclass/IH_Jan1938.jpg.jpg", "isStudent": true},
- {"firstName": "Thor", "lastName": "Flesjo", "country": "Norway", "img": "https://i.imgur.com/O5x4RPrb.jpg", "isStudent": false}
+ {
+ "firstName": "Aaron",
+ "lastName": "Newell",
+ "country": "England",
+ "img": "https://i.imgur.com/CFgX3Xx.png",
+ "isStudent": false
+ },
+ {
+ "firstName": "Alec",
+ "lastName": "Budd",
+ "country": "USA",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550165485/Ironclass/IH_Jan1950.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Alexander",
+ "lastName": "Burdett",
+ "country": "England",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550166990/Ironclass/alexander.jpeg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Amelia",
+ "lastName": "Chorng Ua",
+ "country": "Malaysia",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550168765/Ironclass/IH_Jan1952.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "André",
+ "lastName": "Sebastian",
+ "country": "Germany",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550164358/Ironclass/IH_Jan1928.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Axel",
+ "lastName": "Dahlin",
+ "country": "Sweden",
+ "img": "https://i.imgur.com/V8bB1SMb.jpg",
+ "isStudent": false
+ },
+ {
+ "firstName": "Emmanuel",
+ "lastName": "Iyere",
+ "country": "Nigeria",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550166409/Ironclass/IH_Jan1933.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Federico",
+ "lastName": "Cassettai",
+ "country": "Italy",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550165453/Ironclass/IH_Jan1942.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Felix",
+ "lastName": "Grosser",
+ "country": "Germany",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167284/Ironclass/IH_Jan1939.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Franziska",
+ "lastName": "Bath",
+ "country": "Germany",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550165033/Ironclass/IH_Jan1934.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Jamie",
+ "lastName": "Egan",
+ "country": "Scotland",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167356/Ironclass/IH_Jan1947.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Jennifer",
+ "lastName": "Roberts",
+ "country": "England",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167383/Ironclass/IH_Jan1943.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Julia",
+ "lastName": "Miller",
+ "country": "Kazakhstan",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550165074/Ironclass/IH_Jan1937.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Ksenia",
+ "lastName": "Danniker",
+ "country": "Russia",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550165850/Ironclass/IH_Jan1945.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Laura",
+ "lastName": "Puyol Rigol",
+ "country": "Catalonia",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550165798/Ironclass/IH_Jan1946.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Malte",
+ "lastName": "Felmy",
+ "country": "Germany",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550164955/Ironclass/IH_Jan1932.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Marvin",
+ "lastName": "Artioli",
+ "country": "Italy",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167631/Ironclass/IH_Jan1953.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Matt",
+ "lastName": "Harrison",
+ "country": "USA",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550166114/Ironclass/IH_Jan1949.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Maxence",
+ "lastName": "Bouret",
+ "country": "France",
+ "img": "https://i.imgur.com/8P2xl9sb.jpg",
+ "isStudent": false
+ },
+ {
+ "firstName": "Min",
+ "lastName": "Sheng",
+ "country": "Malaysia",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167221/Ironclass/IH_Jan1951.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Moritz",
+ "lastName": "Opitz",
+ "country": "Germany",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167694/Ironclass/IH_Jan1941.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Na'aman",
+ "lastName": "Hirschfeld",
+ "country": "Israel",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550166075/Ironclass/IH_Jan1936.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Pedro",
+ "lastName": "Arantes",
+ "country": "Brazil",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167744/Ironclass/IH_Jan1929.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Petter",
+ "lastName": "Astedt",
+ "country": "Sweden",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167875/Ironclass/IH_Jan1948.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Ruby",
+ "lastName": "Lai",
+ "country": "Taiwan",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167904/Ironclass/IH_Jan1944.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Sinan",
+ "lastName": "Taylan",
+ "country": "Turkey",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167937/Ironclass/IH_Jan1940.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Svenja",
+ "lastName": "Weiler",
+ "country": "Germany",
+ "img": "http://res.cloudinary.com/djyjdargg/image/upload/v1550167977/Ironclass/IH_Jan1938.jpg.jpg",
+ "isStudent": true
+ },
+ {
+ "firstName": "Thor",
+ "lastName": "Flesjo",
+ "country": "Norway",
+ "img": "https://i.imgur.com/O5x4RPrb.jpg",
+ "isStudent": false
+ }
]
diff --git a/src/index.css b/src/index.css
index ec2585e8c..2023e19b2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,13 @@
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;
+ 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;
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
}
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 6b60c1042..000000000
--- a/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/src/index.js b/src/main.jsx
similarity index 78%
rename from src/index.js
rename to src/main.jsx
index 4046932ac..18f039e2f 100644
--- a/src/index.js
+++ b/src/main.jsx
@@ -6,7 +6,7 @@ import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-