diff --git a/index.html b/index.html index 79c4701..c2886ec 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,24 @@ + + + Vite + React +
+ + + diff --git a/package-lock.json b/package-lock.json index 1349153..d79848d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,6 +61,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.8.tgz", "integrity": "sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==", "dev": true, + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.21.4", @@ -964,6 +965,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1129,6 +1131,7 @@ "url": "https://tidelift.com/funding/github/npm/browserslist" } ], + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001449", "electron-to-chromium": "^1.4.284", @@ -1450,6 +1453,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz", "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.4.0", @@ -2837,6 +2841,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -3277,6 +3282,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz", "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==", "dev": true, + "peer": true, "dependencies": { "esbuild": "^0.17.5", "postcss": "^8.4.23", @@ -3436,6 +3442,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.8.tgz", "integrity": "sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==", "dev": true, + "peer": true, "requires": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.21.4", @@ -4004,7 +4011,8 @@ "version": "8.8.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", - "dev": true + "dev": true, + "peer": true }, "acorn-jsx": { "version": "5.3.2", @@ -4121,6 +4129,7 @@ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz", "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==", "dev": true, + "peer": true, "requires": { "caniuse-lite": "^1.0.30001449", "electron-to-chromium": "^1.4.284", @@ -4365,6 +4374,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz", "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==", "dev": true, + "peer": true, "requires": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.4.0", @@ -5342,6 +5352,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, "requires": { "loose-envify": "^1.1.0" } @@ -5638,6 +5649,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz", "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==", "dev": true, + "peer": true, "requires": { "esbuild": "^0.17.5", "fsevents": "~2.3.2", diff --git a/src/App.css b/src/App.css index e69de29..40f3a1f 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,8 @@ + +.card-color { + background-color: #445eb4; +} + +.text-car { + font-size: 15px; +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 98d0f49..c6ea28c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,101 @@ import "./App.css"; +import IdCard from "./components/id-card"; +import Greetings from "./components/greetings"; +import Random from "./components/random"; +import CreditCard from "./components/credit-card"; +import Rating from "./components/rating"; +import DriverCard from "./components/driver-card"; + function App() { return (

LAB | React Training

+ + + + + + Ludwig + François + + + + + + + + + + + 0 + 1.49 + 1.5 + 3 + 4 + 5 + + + + +
); } diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx new file mode 100644 index 0000000..08aad0e --- /dev/null +++ b/src/components/Greetings.jsx @@ -0,0 +1,30 @@ + +function language (lang) { + let hi = ''; + switch (lang) { + case 'de': + hi = 'Hallo'; + break; + case 'en': + hi = 'Hello'; + break; + case 'es': + hi = 'Hola'; + break; + case 'fr': + hi = 'Bonjour'; + break; + } + + return hi; +} + +function Greetings ({ lang, children }) { + return ( +
+ { language(lang) } { children } +
+ ); +} + +export default Greetings; \ No newline at end of file diff --git a/src/components/Random.jsx b/src/components/Random.jsx new file mode 100644 index 0000000..8c98b0c --- /dev/null +++ b/src/components/Random.jsx @@ -0,0 +1,14 @@ + +function getRandomArbitrary(min, max) { + return Math.random() * (max - min) + min; +} + +function Random ({ min, max }) { + return ( +
+ {`Random value between ${ min } and ${ max } => ${getRandomArbitrary(min, max).toFixed(0)}`} +
+ ); +} + +export default Random; \ No newline at end of file diff --git a/src/components/credit-card.jsx b/src/components/credit-card.jsx new file mode 100644 index 0000000..e2fce8f --- /dev/null +++ b/src/components/credit-card.jsx @@ -0,0 +1,64 @@ + +import Visa from '../assets/images/visa.png'; +import Master from '../assets/images/master-card.svg'; + +function logo (type) { + let image = ''; + + switch (type) { + case 'Visa': + image = Visa; + break; + case 'Master Card': + image = Master; + break; + } + + return image; +} + +function numCard (number) { + return number.replace(/\d(?=\d{4})/g, '•') + .replace(/(.{4})/g, '$1 ') +} + + +function CreditCard ({ type, number, expirationMonth, expirationYear, bank, owner, bgColor, color }) { + return ( +
+ +
+ +
+ +
+ { numCard(number) } +
+ +
+ +
+ Expire { expirationMonth }/{expirationYear} + {bank} +
+ +
+ {owner} +
+
+
+ ); +} + +export default CreditCard; \ No newline at end of file diff --git a/src/components/driver-card.jsx b/src/components/driver-card.jsx new file mode 100644 index 0000000..ec9c795 --- /dev/null +++ b/src/components/driver-card.jsx @@ -0,0 +1,27 @@ + +import Rating from "./rating"; + +function DriverCard (props) { + + return ( +
+
+ +
+ +
+

{ props.name }

+ { props.rating } + { props.car.model } - { props.car.licensePlate } +
+
+ ); +} + +export default DriverCard; \ No newline at end of file diff --git a/src/components/id-card.jsx b/src/components/id-card.jsx new file mode 100644 index 0000000..c1ba7e4 --- /dev/null +++ b/src/components/id-card.jsx @@ -0,0 +1,20 @@ + +function IdCard ({ lastName, firstName, gender, height, birth, picture}) { + + return ( +
+
+ ... +
+

First name: { firstName }

+

Last name: { lastName }

+

Gender: { gender }

+

Height: { (height / 100).toFixed(2) }m

+

Birth: { birth.toLocaleDateString() }

+
+
+
+ ); +} + +export default IdCard; \ No newline at end of file diff --git a/src/components/rating.jsx b/src/components/rating.jsx new file mode 100644 index 0000000..a0e132f --- /dev/null +++ b/src/components/rating.jsx @@ -0,0 +1,17 @@ + + +function Rating ({ children }) { + + const num = Math.round(children); + + const full = '★'; + const empt = '☆'; + + const start = full.repeat(num) + empt.repeat(5 - num); + + return ( +
{ start }
+ ); +} + +export default Rating; \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e..8b13789 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1 @@ -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; -}