Skip to content

BCN-FT-Marcela-Carlos #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CarlosMunozG wants to merge 2 commits into
base: master
Choose a base branch
from
Open

BCN-FT-Marcela-Carlos #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8fc143e
almost done
CarlosMunozG Aug 6, 2019
44cdc8b
till dice exercise
CarlosMunozG Aug 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"moment": "^2.24.0",
"react": "^16.8.2",
"react-dom": "^16.8.2",
"react-moment": "^0.9.2",
"react-scripts": "2.1.5"
},
"scripts": {
Expand Down
108 changes: 106 additions & 2 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,119 @@
import React, { Component } from 'react';
import ICard from './data/components/ICard';
import Greetings from './data/components/Greetings';
import Random from './data/components/Random';
import BoxColor from './data/components/BoxColor';
import CreditCard from './data/components/CreditCard';
import Rating from './data/components/Rating';
import DriverCard from './data/components/DriverCard';
import LikeButton from './data/components/LikeButton';
import ClickablePicture from './data/components/ClickablePicture';
import Dice from './data/components/Dice';


class App extends Component {
render() {
return (
<div className="App">
<h1>IdCard</h1>
{/* TODO: Use the IdCard component */}

<ICard
lastName='Doe'
firstName='John'
gender='male'
height={178}
birth={new Date("1992-07-14")}
picture="https://randomuser.me/api/portraits/men/44.jpg"
/>
<ICard
lastName='Delores'
firstName='Obrien'
gender='female'
height={172}
birth={new Date("1988-05-11")}
picture="https://randomuser.me/api/portraits/women/44.jpg"
/>
<h1>Greetings</h1>
{/* TODO: Use the Greetings component */}
<Greetings lang="de">Ludwig</Greetings>
<Greetings lang="fr">François</Greetings>

<h1>Random</h1>
<Random min={1} max={6}/>
<Random min={1} max={100}/>

<h1>Box color</h1>
<BoxColor r={255} g={0} b={0} />
<BoxColor r={128} g={255} b={0} />

<h1>Credit Cards</h1>
<CreditCard
type="Visa"
number="0123456789018845"
expirationMonth={3}
expirationYear={2021}
bank="BNP"
owner="Maxence Bouret"
bgColor="#11aa99"
color="white" />
<CreditCard
type="Master Card"
number="0123456789010995"
expirationMonth={3}
expirationYear={2021}
bank="N26"
owner="Maxence Bouret"
bgColor="#eeeeee"
color="#222222" />
<CreditCard
type="Visa"
number="0123456789016984"
expirationMonth={12}
expirationYear={2019}
bank="Name of the Bank"
owner="Firstname Lastname"
bgColor="#ddbb55"
color="white"
/>

<h1>Rating</h1>
<Rating>0</Rating>
<Rating>1.49</Rating>
<Rating>1.5</Rating>
<Rating>3</Rating>
<Rating>4</Rating>
<Rating>5</Rating>

<h1>Driver Cards</h1>
<DriverCard
name="Travis Kalanick"
rating={4.2}
img="https://si.wsj.net/public/resources/images/BN-TY647_37gql_OR_20170621052140.jpg?width=620&height=428"
car={{
model: "Toyota Corolla Altis",
licensePlate: "CO42DE"
}} />
<DriverCard
name="Dara Khosrowshahi"
rating={4.9}
img="https://ubernewsroomapi.10upcdn.com/wp-content/uploads/2017/09/Dara_ELT_Newsroom_1000px.jpg"
car={{
model: "Audi A3",
licensePlate: "BE33ER"
}} />

<h1>Like buttons</h1>
<LikeButton /> <LikeButton />

<h1>Clickable Picture</h1>
<ClickablePicture
img="/img/persons/maxence.png"
imgClicked="/img/persons/maxence-glasses.png" />

<h1>Dice</h1>
<Dice />
</div>


);
}
}
Expand Down
32 changes: 32 additions & 0 deletions src/data/components/BoxColor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React, { Component } from 'react'

class BoxColor extends Component {

render() {
const {r, g, b} = this.props;

const rgbToHex = (rgb) =>{
let hex = Number(rgb).toString(16);
if(hex.length < 2){
hex = '0' + hex;
}
return hex;
}
const red = rgbToHex(r);
const green = rgbToHex(g);
const blue = rgbToHex(b);
const color = `rgb(${r},${g},${b})`;
const divStyle ={
backgroundColor: color
}

return (
<div style={divStyle}>
<p>{color}</p>
<p>{`#${red}${green}${blue}`}</p>
</div>
)
}
}

export default BoxColor;
32 changes: 32 additions & 0 deletions src/data/components/ClickablePicture.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React, { Component } from 'react'

class ClickablePicture extends Component {
state = { isClicked: false}

changePicture = () => {
this.setState({isClicked: true});
}
changeClickedPicture = () => {
this.setState({isClicked: false});
}

render() {
const {img, imgClicked} = this.props;
const isClicked = this.state.isClicked;
let picture;

if (isClicked) {
picture = <img onClick={this.changeClickedPicture} src={imgClicked} alt="profile"/>;
} else {
picture = <img onClick={this.changePicture} src={img} alt="profile"/>;
}

return (
<div>
{picture}
</div>
)
}
}

export default ClickablePicture;
58 changes: 58 additions & 0 deletions src/data/components/CreditCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React, { Component } from 'react'

class CreditCard extends Component {
render() {
const {
type,
number,
expirationMonth,
expirationYear,
bank,
owner,
bgColor,
color
} = this.props;

const secretNumber = number.toString().split('').map((element, i) =>{
if(i < 12){
if((i+1)%4 === 0){
return '* ';
} else {
return '*';
}
} else {
return element;
}
})
const month = expirationMonth < 10 ? `0${expirationMonth}` : expirationMonth
const year = expirationYear.toString().slice(2,4);

const getTypeCard = () =>{
if(type === 'Visa'){
return process.env.PUBLIC_URL + '/img/visa.png';
} else {
return process.env.PUBLIC_URL + '/img/master-card.svg';
}
}

const divStyle = {
color: color,
backgroundColor: bgColor
}


return (
<article style={divStyle}>
<div>
<img src={getTypeCard()} alt="" />
</div>
<p>{secretNumber}</p>
<p>{`Expires ${month}/${year}`}</p>
<p>{bank}</p>
<p>{owner}</p>
</article>
)
}
}

export default CreditCard;
48 changes: 48 additions & 0 deletions src/data/components/Dice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React, { Component } from 'react'

class Dice extends Component {
state = {
url: [
'/img/dice1.png',
'/img/dice2.png',
'/img/dice3.png',
'/img/dice4.png',
'/img/dice5.png',
'/img/dice6.png'
],
isClicked: false
}

changePicture = () => {
this.setState({isClicked: true});
}
changeClickedPicture = () => {
this.setState({isClicked: false});
}


render() {
const {url} = this.state;
const isClicked = this.state.isClicked;
const RandomPicture = Math.round(Math.random()*url.length);
let img;

if(isClicked){
// img = <img src={process.env.PUBLIC_URL + '/img/dice-empty.png'} alt="dice view"/>
img = <img onClick={this.changeClickedPicture} src={process.env.PUBLIC_URL + url[RandomPicture]} alt="dice view"/>
// setTimeout({
// img = <img onClick={this.changeClickedPicture} src={process.env.PUBLIC_URL + url[RandomPicture]} alt="dice view"/>
// },1000);
} else {
img = <img onClick={this.changePicture} src={process.env.PUBLIC_URL + url[RandomPicture]} alt="dice view"/>
}

return (
<div>
{img}
</div>
)
}
}

export default Dice;
22 changes: 22 additions & 0 deletions src/data/components/DriverCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React, { Component } from 'react'
import Rating from './Rating';

class DriverCard extends Component {
render() {
const {name, rating, img, car} = this.props;
return (
<article>
<div>
<img src={img} alt="owner profile"/>
</div>
<div>
<h2>{name}</h2>
<Rating>{rating}</Rating>
<p>{`${car.model} - ${car.licensePlate}`}</p>
</div>
</article>
)
}
}

export default DriverCard;
28 changes: 28 additions & 0 deletions src/data/components/Greetings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React, { Component } from 'react'

class Greetings extends Component {

getLanguage = () => {
const {lang} = this.props;
if(lang === 'de'){
return 'Hallo';
} else if(lang === 'en'){
return 'Hello';
} else if(lang === 'fr'){
return 'Bonjour';
} else if(lang === 'es'){
return 'Hola';
}
}

render() {
const{children} = this.props;
return (
<section>
<p>{`${this.getLanguage()} ${children}`}</p>
</section>
)
}
}

export default Greetings;
Loading