-
Expires: {props.expirationMonth} / {props.expirationYear}
-
{props.bank}
+
+
+
{maskNumber(props.number)}
+
+
Expires: {props.expirationMonth} / {props.expirationYear}
+
{props.bank}
-
{props.owner}
+
{props.owner}
)
}
diff --git a/src/components/Greetings.js b/src/components/Greetings.js
index 2f609bb4b..cb33a7694 100644
--- a/src/components/Greetings.js
+++ b/src/components/Greetings.js
@@ -5,7 +5,7 @@ class Greetings extends Component {
const { lang, children } = this.props
return (
<>
-
Hallo {children}
+
{children}
)
}
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
index d3f1c007b..394eac993 100644
--- a/src/components/IdCard.js
+++ b/src/components/IdCard.js
@@ -6,12 +6,14 @@ class IdCard extends Component {
const birthDate = birth.toDateString();
return (
-
-
{firstName}
-
{lastName}
-
{gender}
-
{height}
-
{birthDate}
+
+
+
{firstName}
+
{lastName}
+
{gender}
+
{height}
+
{birthDate}
+
)
}
diff --git a/src/index.css b/src/index.css
index cee5f348f..f042f00f7 100755
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,6 @@
body {
margin: 0;
- padding: 0;
+ padding: 2rem 3.5rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
@@ -9,6 +9,59 @@ body {
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
+
+p {
+ margin: 0;
+}
+
+.challenge {
+ margin: 3.5rem 0;
+}
+
+.card-container,
+.card-info {
+ display: flex;
+}
+
+.card-info {
+ flex-flow: column nowrap;
+ justify-content: center;
+ line-height: 1.8;
+ padding: 0 1.5rem;
+}
+
+.card-image {
+ width: 10rem;
+ height: 10rem;
+}
+
+.boxed-text {
+ padding: 1.5rem;
+ border: 1px solid #fabada;
+}
+
+.boxed-text {
+ margin-bottom: .5rem;
+}
+
+.boxes-container {
+ display: flex;
+ flex-flow: row wrap;
+}
+
+.credit-cards {
+ display: flex;
+}
+
+.cc-container {
+ display: flex;
+ padding: 2rem;
+}
+
+.cc-brand {
+ width: 3.5rem;
+ height: auto;
+ align-self: flex-end;
+}
\ No newline at end of file
From 93deb9d4aab93c87e3a40baddf8fc7c309b1a124 Mon Sep 17 00:00:00 2001
From: annacv <21217131+annacv@users.noreply.github.com>
Date: Sat, 10 Aug 2019 14:11:31 +0200
Subject: [PATCH 06/12] ColorToHex bonus
---
src/components/BoxColor.js | 26 ++++++++++++++++++++++----
1 file changed, 22 insertions(+), 4 deletions(-)
diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js
index 90d92aab9..5bde25f58 100644
--- a/src/components/BoxColor.js
+++ b/src/components/BoxColor.js
@@ -6,15 +6,33 @@ function BoxColor(props) {
// console.log(colorString)
const divStyle = {
backgroundColor: colorString,
- //backgroundColor: 'rgb(' + r + ',' + g + ',' + b + ')',
- height: '10rem',
- width: '10rem',
+ // also works with backgroundColor: 'rgb(' + r + ',' + g + ',' + b + ')',
+ height: '9rem',
+ width: '9rem',
+ display: 'flex',
+ flexFlow: 'column wrap',
+ justifyContent: 'center',
padding: '2rem',
+ fontSize: '1.125rem',
textAlign: 'center'
}
+
+ const colorToHex = (color) => {
+ let hex = Number(color).toString(16);
+ return hex.length < 2 ? hex = '0' + hex : hex
+ }
+
+ let rgbToHex = (r, g, b) => {
+ const red = colorToHex(r);
+ const green = colorToHex(g);
+ const blue = colorToHex(b);
+ return red + green + blue;
+ }
+
return (
- {colorString}
+
{colorString}
+
#{rgbToHex(props.r, props.g, props.b)}
)
}
From ee43f74bf798b4a8b6da32af531de9903de93cbf Mon Sep 17 00:00:00 2001
From: annacv <21217131+annacv@users.noreply.github.com>
Date: Sat, 10 Aug 2019 14:12:06 +0200
Subject: [PATCH 07/12] AddZero, RemoveDigits
---
src/components/CreditCard.js | 14 ++++++++++++--
1 file changed, 12 insertions(+), 2 deletions(-)
diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js
index e986fdfc5..1b5d8ad8c 100644
--- a/src/components/CreditCard.js
+++ b/src/components/CreditCard.js
@@ -11,7 +11,17 @@ function CreditCard(props) {
const cardType = props.type === 'Visa' ? './img/visa.png' : './img/master-card.svg'
const maskNumber = (number) => {
- return number.slice(0, -4).replace(/./g, '·') + number.slice(-4)
+ return number.slice(0, -4).replace(/./g, '• ') + number.slice(-4)
+ }
+
+ const addZero = (month) => {
+ const monthStr = month.toString();
+ return monthStr.length < 2 ? '0' + monthStr : monthStr;
+ }
+
+ const removeDigits = (year) => {
+ const yearStr = year.toString();
+ return yearStr.slice(0, -2).replace(/./g, '') + yearStr.slice(-2)
}
return (
@@ -19,7 +29,7 @@ function CreditCard(props) {
{maskNumber(props.number)}
-
Expires: {props.expirationMonth} / {props.expirationYear}
+
Expires: {addZero(props.expirationMonth)}/{removeDigits(props.expirationYear)}
{props.bank}
{props.owner}
From a27efbc6737e550bd10e358b869dedb375fb22f6 Mon Sep 17 00:00:00 2001
From: annacv <21217131+annacv@users.noreply.github.com>
Date: Sat, 10 Aug 2019 14:12:20 +0200
Subject: [PATCH 08/12] RF styles to suit output
---
src/components/IdCard.js | 10 ++---
src/index.css | 89 +++++++++++++++++++++++++++++++++++-----
2 files changed, 84 insertions(+), 15 deletions(-)
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
index 394eac993..a7fc81f53 100644
--- a/src/components/IdCard.js
+++ b/src/components/IdCard.js
@@ -8,11 +8,11 @@ class IdCard extends Component {
-
{firstName}
-
{lastName}
-
{gender}
-
{height}
-
{birthDate}
+
First Name:{firstName}
+
Last Name:{lastName}
+
Gender:{gender}
+
Height:{height}
+
Birth:{birthDate}
)
diff --git a/src/index.css b/src/index.css
index f042f00f7..133511a2a 100755
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,5 @@
body {
margin: 0;
- padding: 2rem 3.5rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
@@ -17,24 +16,65 @@ p {
}
.challenge {
- margin: 3.5rem 0;
+ width: 100%;
+ padding: 3.5rem 1.5rem 0 1.5rem;
+}
+
+@media (min-width: 768px) {
+ .challenge {
+ padding: 4.5rem 3.5rem 0 3.5rem;
+ }
}
.card-container,
.card-info {
- display: flex;
+ display: inline-flex;
+ background-color: #fabada;
+}
+
+.card-container {
+ flex-flow: row wrap;
+ width: 100%;
+}
+
+@media (min-width: 768px) {
+ .card-container {
+ flex-flow: row wrap;
+ width: auto;
+ }
}
.card-info {
flex-flow: column nowrap;
justify-content: center;
- line-height: 1.8;
- padding: 0 1.5rem;
+ font-size: .875rem;
+ line-height: 1.2;
+ padding: 1rem;
+}
+
+@media (min-width: 768px) {
+ .card-info {
+ font-size: 1rem;
+ line-height: 1.8;
+ padding: 1.5rem;
+ }
}
.card-image {
- width: 10rem;
- height: 10rem;
+ width: 7rem;
+ height: auto;
+}
+
+@media (min-width: 768px) {
+ .card-image {
+ width: 12rem;
+ height: auto;
+ }
+}
+
+.card-label {
+ font-weight: 800;
+ margin: 0 .5rem 0 0;
}
.boxed-text {
@@ -43,6 +83,7 @@ p {
}
.boxed-text {
+ max-width: 23rem;
margin-bottom: .5rem;
}
@@ -53,15 +94,43 @@ p {
.credit-cards {
display: flex;
+ flex-flow: row wrap;
}
.cc-container {
display: flex;
- padding: 2rem;
+ width: 100%;
+ border-radius: .5rem;
+ padding: 1.25rem;
+ margin: 0 0 1rem 0;
+}
+
+@media (min-width: 768px) {
+ .cc-container {
+ width: 17.5rem;
+ padding: 2rem;
+ margin: 0 1rem 1rem 0;
+ }
}
.cc-brand {
- width: 3.5rem;
- height: auto;
+ width: auto;
+ height: 1.75rem;
align-self: flex-end;
+}
+
+.cc-number {
+ font-size: 1.65rem;
+ font-weight: 600;
+ padding: 1.5rem 0;
+ width: 100%;
+}
+
+.cc-info {
+ display: flex;
+ width: 100%;
+}
+
+.cc-expiration {
+ margin-right: 1.5rem;
}
\ No newline at end of file
From 1f5d6aaea31b30a6f9326c5e880c4ea548be0618 Mon Sep 17 00:00:00 2001
From: annacv <21217131+annacv@users.noreply.github.com>
Date: Sat, 10 Aug 2019 15:02:42 +0200
Subject: [PATCH 09/12] Rating
---
src/App.js | 11 +++++++++++
src/components/Rating.js | 24 ++++++++++++++++++++++++
src/index.css | 26 ++++++++++++++++++++++----
3 files changed, 57 insertions(+), 4 deletions(-)
create mode 100644 src/components/Rating.js
diff --git a/src/App.js b/src/App.js
index d45ea2569..6d0b444be 100755
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import Greetings from './components/Greetings';
import Random from './components/Random';
import BoxColor from './components/BoxColor';
import CreditCard from './components/CreditCard';
+import Rating from './components/Rating';
class App extends Component {
render() {
@@ -76,11 +77,21 @@ class App extends Component {
/>