From e442a334a8084057b66070927d5633ffbc2a9b21 Mon Sep 17 00:00:00 2001 From: Elena Piaggio Date: Thu, 3 Oct 2019 15:12:05 +0200 Subject: [PATCH 1/4] add idCard component --- src/App.js | 18 ++++++++++++++++++ src/components/Greetings.js | 14 ++++++++++++++ src/components/IdCard.js | 21 +++++++++++++++++++++ src/css/greetings.css | 0 src/css/idCard.css | 0 5 files changed, 53 insertions(+) create mode 100644 src/components/Greetings.js create mode 100644 src/components/IdCard.js create mode 100644 src/css/greetings.css create mode 100644 src/css/idCard.css diff --git a/src/App.js b/src/App.js index e7ca67f20..70288c097 100755 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,6 @@ import React, { Component } from 'react'; +import IdCard from './components/IdCard'; +import Greetings from './components/Greetings'; class App extends Component { render() { @@ -6,9 +8,25 @@ class App extends Component {

IdCard

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

Greetings

{/* TODO: Use the Greetings component */} +
); } diff --git a/src/components/Greetings.js b/src/components/Greetings.js new file mode 100644 index 000000000..91750d881 --- /dev/null +++ b/src/components/Greetings.js @@ -0,0 +1,14 @@ +import React from "react"; +import "../css/greetings.css"; + +function Greetings(props){ + return( +
+

hello greetings

+
+ ); +} + +export default Greetings; + + diff --git a/src/components/IdCard.js b/src/components/IdCard.js new file mode 100644 index 000000000..787ece6a4 --- /dev/null +++ b/src/components/IdCard.js @@ -0,0 +1,21 @@ +import React from "react"; +import "../css/idCard.css"; + +function IdCard(props){ + return( +
+ +
+ ); +} + +export default IdCard; + + diff --git a/src/css/greetings.css b/src/css/greetings.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/css/idCard.css b/src/css/idCard.css new file mode 100644 index 000000000..e69de29bb From c43bfd546dd065383ae0d5491e821c2567f6e9b3 Mon Sep 17 00:00:00 2001 From: Elena Piaggio Date: Sat, 5 Oct 2019 14:44:34 +0200 Subject: [PATCH 2/4] add greeting iteration --- src/App.js | 31 ++++++++++++++++++++++++++++++- src/components/Greetings.js | 8 +++++++- src/components/IdCard.js | 22 +++++++++++----------- src/css/greetings.css | 11 +++++++++++ src/css/idCard.css | 19 +++++++++++++++++++ src/index.css | 2 ++ 6 files changed, 80 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 70288c097..c1a552f76 100755 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,26 @@ import IdCard from './components/IdCard'; import Greetings from './components/Greetings'; class App extends Component { + + getGreeting(lang){ + // console.log('holaaaaaaaa: ', lang) + const allLang = ["de","en","es","fr"]; + const allGreetings = ["Hallo", "Hello", "Hola", "Bonjour"]; + console.log("the posittion: " + allGreetings[allLang.indexOf(lang)]); + switch(lang){ + case 'de': + return 'Hallo'; + case 'fr': + return 'Bonjour'; + case 'en': + return 'Hello'; + case 'es': + return 'Hola'; + default : + return 'noe xx`x' + } +}; + render() { return (
@@ -26,10 +46,19 @@ class App extends Component {

Greetings

{/* TODO: Use the Greetings component */} - + + + + + +
); } } export default App; + + diff --git a/src/components/Greetings.js b/src/components/Greetings.js index 91750d881..599172770 100644 --- a/src/components/Greetings.js +++ b/src/components/Greetings.js @@ -4,7 +4,13 @@ import "../css/greetings.css"; function Greetings(props){ return(
-

hello greetings

+

+ {props.greeting(props.lang)} {props.children} +

+ {/*
    +
  • {props.lang}
    • +
  • Children: {props.children}
    • +
*/}
); } diff --git a/src/components/IdCard.js b/src/components/IdCard.js index 787ece6a4..751728c8c 100644 --- a/src/components/IdCard.js +++ b/src/components/IdCard.js @@ -4,18 +4,18 @@ import "../css/idCard.css"; function IdCard(props){ return(
-
    -
  • lastName: {props.lastName}
    • -
  • firstName: {props.firstName}
    • -
  • gender: {props.gender}
    • -
  • height: {props.height}
    • -
  • birth: {props.birth}
    • -
  • picture: {props.picture}
    • -
+
+
+
    +
  • First name: {props.firstName}
    • +
  • Last name: {props.lastName}
    • +
  • Gender: {props.gender}
    • +
  • Height: {props.height}
    • +
  • Birth: birth: {props.birth}
    • +
+
); } -export default IdCard; - - +export default IdCard; \ No newline at end of file diff --git a/src/css/greetings.css b/src/css/greetings.css index e69de29bb..53f46ed67 100644 --- a/src/css/greetings.css +++ b/src/css/greetings.css @@ -0,0 +1,11 @@ +.greetings{ + border: 1em; + box-sizing: border-box; + width: 100%; + border: solid #5B6DCD 5px; + padding: 5px; + margin: 5px; + flex: auto; + display: flex; + flex-direction: row; +} \ No newline at end of file diff --git a/src/css/idCard.css b/src/css/idCard.css index e69de29bb..064564dc0 100644 --- a/src/css/idCard.css +++ b/src/css/idCard.css @@ -0,0 +1,19 @@ +.id-card{ + border: 1em; + box-sizing: border-box; + width: 100%; + border: solid #5B6DCD 5px; + padding: 5px; + margin: 5px; + flex: auto; + display: flex; + flex-direction: row; +} + +.id-card ul{ + list-style-type: none; +} + +.id-card ul span{ + font-weight: bold; +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index cee5f348f..1932494a1 100755 --- a/src/index.css +++ b/src/index.css @@ -6,6 +6,8 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + width: 80%; + margin: 0 auto; } code { From f22f7a237bacda70264426f6d80ccba9644bc9ea Mon Sep 17 00:00:00 2001 From: Elena Piaggio Date: Sat, 5 Oct 2019 19:43:12 +0200 Subject: [PATCH 3/4] add greetings and boxcolor --- src/App.js | 15 ++++++++++++--- src/components/BoxColor.js | 17 +++++++++++++++++ src/components/Greetings.js | 6 +----- src/components/IdCard.js | 4 ++-- src/components/Random.js | 16 ++++++++++++++++ src/css/Random.css | 0 src/css/greetings.css | 3 ++- src/helpers/index.js | 10 ++++++++++ src/index.css | 12 ++++++++++++ 9 files changed, 72 insertions(+), 11 deletions(-) create mode 100644 src/components/BoxColor.js create mode 100644 src/components/Random.js create mode 100644 src/css/Random.css create mode 100644 src/helpers/index.js diff --git a/src/App.js b/src/App.js index c1a552f76..a1c57f76b 100755 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,13 @@ 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'; class App extends Component { getGreeting(lang){ // console.log('holaaaaaaaa: ', lang) - const allLang = ["de","en","es","fr"]; - const allGreetings = ["Hallo", "Hello", "Hola", "Bonjour"]; - console.log("the posittion: " + allGreetings[allLang.indexOf(lang)]); switch(lang){ case 'de': return 'Hallo'; @@ -54,7 +53,17 @@ class App extends Component { + +

Random

+ + + +

BoxColor

+ + + + ); } } diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js new file mode 100644 index 000000000..49f51b996 --- /dev/null +++ b/src/components/BoxColor.js @@ -0,0 +1,17 @@ +import React from "react"; +import { convertStringToHex } from '../helpers'; + +function BoxColor(props){ + const { r, g, b } = props; + const hex = convertStringToHex(r,g,b); + const result = {'background-color': convertStringToHex(r,g,b)}; + + return( +
+

rgb({r},{g},{b})

+

{hex}

+
+ ); +} + +export default BoxColor; diff --git a/src/components/Greetings.js b/src/components/Greetings.js index 599172770..b4c8bf102 100644 --- a/src/components/Greetings.js +++ b/src/components/Greetings.js @@ -1,5 +1,5 @@ import React from "react"; -import "../css/greetings.css"; +import "../css/Greetings.css"; function Greetings(props){ return( @@ -7,10 +7,6 @@ function Greetings(props){

{props.greeting(props.lang)} {props.children}

- {/*
    -
  • {props.lang}
    • -
  • Children: {props.children}
    • -
*/} ); } diff --git a/src/components/IdCard.js b/src/components/IdCard.js index 751728c8c..558e86190 100644 --- a/src/components/IdCard.js +++ b/src/components/IdCard.js @@ -1,10 +1,10 @@ import React from "react"; -import "../css/idCard.css"; +import "../css/IdCard.css"; function IdCard(props){ return(
-
+
img-id-card
  • First name: {props.firstName}
    • diff --git a/src/components/Random.js b/src/components/Random.js new file mode 100644 index 000000000..448a968dd --- /dev/null +++ b/src/components/Random.js @@ -0,0 +1,16 @@ +import React from "react"; +import "../css/Random.css"; +import { generateRandom } from "../helpers/index"; + + +function Random(props){ + const { min, max } = props; + const random = generateRandom(min, max); + return( +
    +

    Random value between {props.min} and {props.max} => {random}

    +
    + ); +} + +export default Random; \ No newline at end of file diff --git a/src/css/Random.css b/src/css/Random.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/css/greetings.css b/src/css/greetings.css index 53f46ed67..fac64b438 100644 --- a/src/css/greetings.css +++ b/src/css/greetings.css @@ -8,4 +8,5 @@ flex: auto; display: flex; flex-direction: row; -} \ No newline at end of file +} + diff --git a/src/helpers/index.js b/src/helpers/index.js new file mode 100644 index 000000000..8b370323d --- /dev/null +++ b/src/helpers/index.js @@ -0,0 +1,10 @@ +export const generateRandom = (min, max) => { + return Math.floor(Math.random() * (max - min)) + min; + } + +export const convertStringToHex = (r,g,b) => { + let rgb = ''+r+g+b; +let nou = '#'+parseInt(rgb).toString(16); + + return nou; +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 1932494a1..8f38ab3ee 100755 --- a/src/index.css +++ b/src/index.css @@ -14,3 +14,15 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +.marc{ + border: 1em; + box-sizing: border-box; + width: 100%; + border: solid #5B6DCD 5px; + padding: 5px; + margin: 5px; + flex: auto; + display: flex; + flex-direction: row; +} \ No newline at end of file From c9a4d1ef5b2c9de020ee927ee7ccefa592379963 Mon Sep 17 00:00:00 2001 From: Elena Piaggio Date: Sat, 5 Oct 2019 22:20:40 +0200 Subject: [PATCH 4/4] add credit-card --- src/App.js | 32 ++++++++++++++++++++++++++++++-- src/components/CreditCard.js | 24 ++++++++++++++++++++++++ src/css/CreditCard.css | 31 +++++++++++++++++++++++++++++++ 3 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 src/components/CreditCard.js create mode 100644 src/css/CreditCard.css diff --git a/src/App.js b/src/App.js index a1c57f76b..194d0e6b8 100755 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ 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 { @@ -61,9 +62,36 @@ class App extends Component {

    BoxColor

    + +

    Credit Card

    + + +
- - ); } } diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js new file mode 100644 index 000000000..d54db830f --- /dev/null +++ b/src/components/CreditCard.js @@ -0,0 +1,24 @@ +import React from 'react'; +import '../css/CreditCard.css' + +function CreditCard(props){ + const {type,number,expirationMonth,expirationYear,bank,owner,bgColor,color} = props; + const result = {'background-color': bgColor, 'color': color}; + + return( +
+ logo-bank + +
+ •••• •••• •••• {number.slice(-4)} +
+

+ + Expires {expirationMonth}/{expirationYear} {bank}
+ {owner} +

+
+ ); +} + +export default CreditCard; \ No newline at end of file diff --git a/src/css/CreditCard.css b/src/css/CreditCard.css new file mode 100644 index 000000000..af9c719cf --- /dev/null +++ b/src/css/CreditCard.css @@ -0,0 +1,31 @@ + +div { + display: block; +} + +.CreditCard .number { + font-size: 1.9em; + text-align: center; + margin: 20px 0; +} +user agent stylesheet +div { + display: block; +} +.credit-card{ + margin: 10px; + padding: 20px; + width: 300px; + border-radius: 10px; + display: inline-block; +} + +.credit-card .number { + font-size: 1.9em; + text-align: center; + margin: 20px 0; +} + +.credit-card img { + height: 20px; +} \ No newline at end of file