diff --git a/src/App.js b/src/App.js index e7ca67f20..194d0e6b8 100755 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,101 @@ 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 { + + getGreeting(lang){ + // console.log('holaaaaaaaa: ', 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 (

IdCard

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

Greetings

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

Random

+ + + +

BoxColor

+ + + +

Credit Card

+ + +
); } } export default App; + + 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/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/components/Greetings.js b/src/components/Greetings.js new file mode 100644 index 000000000..b4c8bf102 --- /dev/null +++ b/src/components/Greetings.js @@ -0,0 +1,16 @@ +import React from "react"; +import "../css/Greetings.css"; + +function Greetings(props){ + return( +
+

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

+
+ ); +} + +export default Greetings; + + diff --git a/src/components/IdCard.js b/src/components/IdCard.js new file mode 100644 index 000000000..558e86190 --- /dev/null +++ b/src/components/IdCard.js @@ -0,0 +1,21 @@ +import React from "react"; +import "../css/IdCard.css"; + +function IdCard(props){ + return( +
+
img-id-card
+
+ +
+
+ ); +} + +export default IdCard; \ No newline at end of file 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/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 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 new file mode 100644 index 000000000..fac64b438 --- /dev/null +++ b/src/css/greetings.css @@ -0,0 +1,12 @@ +.greetings{ + border: 1em; + box-sizing: border-box; + width: 100%; + border: solid #5B6DCD 5px; + padding: 5px; + margin: 5px; + flex: auto; + display: flex; + flex-direction: row; +} + diff --git a/src/css/idCard.css b/src/css/idCard.css new file mode 100644 index 000000000..064564dc0 --- /dev/null +++ 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/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 cee5f348f..8f38ab3ee 100755 --- a/src/index.css +++ b/src/index.css @@ -6,9 +6,23 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + width: 80%; + margin: 0 auto; } 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