From 215068281d7f4775214ff31a63f1f65973483d7b Mon Sep 17 00:00:00 2001 From: Tash Tenner Date: Thu, 3 Oct 2019 17:47:24 +0200 Subject: [PATCH 1/3] IdCard without CSS --- .env | 1 + src/App.js | 22 ++++++++++++++++++---- src/components/BoxColor.css | 0 src/components/BoxColor.js | 0 src/components/CreditCard.css | 0 src/components/CreditCard.js | 0 src/components/Greetings.css | 0 src/components/Greetings.js | 0 src/components/IdCard.css | 0 src/components/IdCard.js | 17 +++++++++++++++++ src/components/Random.css | 0 src/components/Random.js | 0 12 files changed, 36 insertions(+), 4 deletions(-) create mode 100644 .env create mode 100644 src/components/BoxColor.css create mode 100644 src/components/BoxColor.js create mode 100644 src/components/CreditCard.css create mode 100644 src/components/CreditCard.js create mode 100644 src/components/Greetings.css create mode 100644 src/components/Greetings.js create mode 100644 src/components/IdCard.css create mode 100644 src/components/IdCard.js create mode 100644 src/components/Random.css create mode 100644 src/components/Random.js diff --git a/.env b/.env new file mode 100644 index 000000000..7d910f148 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/src/App.js b/src/App.js index e7ca67f20..cfd148e35 100755 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,28 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; +import IdCard from "./components/IdCard"; class App extends Component { render() { return (

IdCard

- {/* TODO: Use the IdCard component */} - + +

Greetings

- {/* TODO: Use the Greetings component */}
); } diff --git a/src/components/BoxColor.css b/src/components/BoxColor.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/CreditCard.css b/src/components/CreditCard.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Greetings.css b/src/components/Greetings.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Greetings.js b/src/components/Greetings.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/IdCard.css b/src/components/IdCard.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/IdCard.js b/src/components/IdCard.js new file mode 100644 index 000000000..0d024490d --- /dev/null +++ b/src/components/IdCard.js @@ -0,0 +1,17 @@ +import React, { Component } from "react"; +import "./IdCard.css"; + +const IdCard = props => { + return ( +
+

{props.lastName}

+

{props.firstName}

+

{props.gender}

+

{props.height}

+ {/*

{props.birth}

*/} +

{props.picture}

+
+ ); +}; + +export default IdCard; diff --git a/src/components/Random.css b/src/components/Random.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Random.js b/src/components/Random.js new file mode 100644 index 000000000..e69de29bb From d8c7c70b21b9f39e55c32f7216e6519eb9f9073c Mon Sep 17 00:00:00 2001 From: Tash Tenner Date: Sun, 6 Oct 2019 20:15:37 +0200 Subject: [PATCH 2/3] done --- src/App.js | 43 +++++++++++++++++++++++++++++++++++ src/components/BoxColor.css | 7 ++++++ src/components/BoxColor.js | 16 +++++++++++++ src/components/CreditCard.css | 12 ++++++++++ src/components/CreditCard.js | 41 +++++++++++++++++++++++++++++++++ src/components/Greetings.css | 6 +++++ src/components/Greetings.js | 17 ++++++++++++++ src/components/IdCard.css | 11 +++++++++ src/components/IdCard.js | 31 +++++++++++++++++++------ src/components/Random.css | 6 +++++ src/components/Random.js | 17 ++++++++++++++ 11 files changed, 200 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index cfd148e35..f938a4a72 100755 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,9 @@ import React, { Component } 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"; class App extends Component { render() { @@ -23,6 +27,45 @@ class App extends Component { picture="https://randomuser.me/api/portraits/women/44.jpg" />

Greetings

+ Ludwig + François +

Random

+ + +

BoxColor

+ + +

CreditCard

+ + + ); } diff --git a/src/components/BoxColor.css b/src/components/BoxColor.css index e69de29bb..dbd5b3923 100644 --- a/src/components/BoxColor.css +++ b/src/components/BoxColor.css @@ -0,0 +1,7 @@ +.BoxColor { + display: flex; + border-style: solid; + align-items: center; + margin: 5px; + justify-content: center; +} diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js index e69de29bb..cc5a32e50 100644 --- a/src/components/BoxColor.js +++ b/src/components/BoxColor.js @@ -0,0 +1,16 @@ +import React from "react"; +import "./BoxColor.css"; + +// option 1 +const BoxColor = props => { + // const { r, g, b } = props; + const rgb = `rgb(${props.r},${props.g},${props.b})`; + + return ( +
+ rgb({props.r},{props.g},{props.b}) +
+ ); +}; + +export default BoxColor; diff --git a/src/components/CreditCard.css b/src/components/CreditCard.css index e69de29bb..000affcc0 100644 --- a/src/components/CreditCard.css +++ b/src/components/CreditCard.css @@ -0,0 +1,12 @@ +.CreditCard { + display: flex; + border-style: solid; + align-items: center; + margin: 5px; + justify-content: space-between; +} + +.CreditCard-pic { + border-radius: 8px; + max-width: 10%; +} diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js index e69de29bb..94643e3dc 100644 --- a/src/components/CreditCard.js +++ b/src/components/CreditCard.js @@ -0,0 +1,41 @@ +import React from "react"; +import "./CreditCard.css"; + +// option 1 +const CreditCard = props => { + const { + type, + number, + expirationMonth, + expirationYear, + bank, + owner, + bgColor, + color + } = props; + return ( +
+
+

•••• •••• •••• {number.slice(12, 16)}

+
+
+ {expirationMonth < 10 ? `0${expirationMonth}` : `${expirationMonth}`} + {expirationYear.toString().slice(2, 4)} +
+
{bank}
+
{owner}
+
+ +
+
+ ); +}; + +export default CreditCard; diff --git a/src/components/Greetings.css b/src/components/Greetings.css index e69de29bb..f7a6adac2 100644 --- a/src/components/Greetings.css +++ b/src/components/Greetings.css @@ -0,0 +1,6 @@ +.Greetings { + display: flex; + border-style: solid; + align-items: center; + margin: 5px; +} diff --git a/src/components/Greetings.js b/src/components/Greetings.js index e69de29bb..bc0dc25cf 100644 --- a/src/components/Greetings.js +++ b/src/components/Greetings.js @@ -0,0 +1,17 @@ +import React, { Component } from "react"; +import "./Greetings.css"; + +// option 1 +const Greetings = props => { + return ( +
+ {props.lang === "de" ? ( +

Hallo {props.children}

+ ) : ( +

Bonjour {props.children}

+ )} +
+ ); +}; + +export default Greetings; diff --git a/src/components/IdCard.css b/src/components/IdCard.css index e69de29bb..d7aae6e66 100644 --- a/src/components/IdCard.css +++ b/src/components/IdCard.css @@ -0,0 +1,11 @@ +.IdCard { + display: flex; + border-style: solid; + align-items: center; + margin: 5px; +} + +.IdCard-pic { + margin-left: 10px; + margin-right: 10px; +} diff --git a/src/components/IdCard.js b/src/components/IdCard.js index 0d024490d..1d3ba0eb0 100644 --- a/src/components/IdCard.js +++ b/src/components/IdCard.js @@ -1,17 +1,34 @@ import React, { Component } from "react"; import "./IdCard.css"; +// option 1 const IdCard = props => { return ( -
-

{props.lastName}

-

{props.firstName}

-

{props.gender}

-

{props.height}

- {/*

{props.birth}

*/} -

{props.picture}

+
+
+ +
+
+

{props.lastName}

+

{props.firstName}

+

{props.gender}

+

{props.height}

+

{props.birth.toString()}

+
); }; +// option 2 +// function IdCard(props) { +// return

Hello, {props.lastName}

; +// } + +// option 3 +// class IdCard extends React.Component { +// render() { +// return

Hello, {this.props.lastName}

; +// } +// } + export default IdCard; diff --git a/src/components/Random.css b/src/components/Random.css index e69de29bb..657eadfb3 100644 --- a/src/components/Random.css +++ b/src/components/Random.css @@ -0,0 +1,6 @@ +.Random { + display: flex; + border-style: solid; + align-items: center; + margin: 5px; +} diff --git a/src/components/Random.js b/src/components/Random.js index e69de29bb..3383f456b 100644 --- a/src/components/Random.js +++ b/src/components/Random.js @@ -0,0 +1,17 @@ +import React, { Component } from "react"; +import "./Random.css"; + +function rand(min, max) { + return Math.floor(min + (max - min + 1) * Math.random()); +} +// option 1 +const Random = props => { + return ( +
+ Random value between {props.min} and {props.max} =>{" "} + {rand(props.min, props.max)} +
+ ); +}; + +export default Random; From 7132303c1e4c62445d5e4e9dfe5f85c7dd55ec02 Mon Sep 17 00:00:00 2001 From: Tash Tenner Date: Mon, 20 Apr 2020 15:46:18 +0200 Subject: [PATCH 3/3] update npm packages --- package-lock.json | 23 +++++++++++------------ package.json | 4 ++-- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 47b084a03..00e4b082b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12521,14 +12521,13 @@ } }, "react": { - "version": "16.8.6", - "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz", - "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==", + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz", + "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.13.6" + "prop-types": "^15.6.2" } }, "react-app-polyfill": { @@ -12673,14 +12672,14 @@ } }, "react-dom": { - "version": "16.8.6", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz", - "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==", + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", + "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.13.6" + "scheduler": "^0.19.1" } }, "react-error-overlay": { @@ -13763,9 +13762,9 @@ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==" }, "scheduler": { - "version": "0.13.6", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", - "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", + "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" diff --git a/package.json b/package.json index 1c2e51d9b..58c5db01c 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "react": "^16.8.2", - "react-dom": "^16.8.2", + "react": "^16.13.1", + "react-dom": "^16.13.1", "react-scripts": "2.1.5" }, "scripts": {