Skip to content

[BCN-FT-ANNAC] #6

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
annacv wants to merge 12 commits into
base: master
Choose a base branch
from
Open

[BCN-FT-ANNAC] #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
492dedc
npm fixes
annacv Aug 6, 2019
0ed175a
IdCard, Greetings, Random components
annacv Aug 6, 2019
0b37619
Box color component
annacv Aug 6, 2019
c412240
Credit Card component
annacv Aug 6, 2019
83665e6
Some styles
annacv Aug 7, 2019
93deb9d
ColorToHex bonus
annacv Aug 10, 2019
ee43f74
AddZero, RemoveDigits
annacv Aug 10, 2019
a27efbc
RF styles to suit output
annacv Aug 10, 2019
1f5d6aa
Rating
annacv Aug 10, 2019
4f78376
DriverCard
annacv Aug 10, 2019
6a550a3
fix driver styles
annacv Aug 10, 2019
bdcde56
Like button
annacv Aug 10, 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
559 changes: 521 additions & 38 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

120 changes: 116 additions & 4 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,129 @@
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';
import Rating from './components/Rating';
import DriverCard from './components/DriverCard';
import LikeButton from './components/LikeButton';

class App extends Component {
render() {
return (
<div className="App">
<h1>IdCard</h1>
{/* TODO: Use the IdCard component */}
<section className="challenge">
<h2>IdCard</h2>
<IdCard
lastName='Delores '
firstName='Obrien'
gender='female'
height={172}
birth={new Date("1988-05-11")}
picture="https://randomuser.me/api/portraits/women/44.jpg" />
</section>

<h1>Greetings</h1>
{/* TODO: Use the Greetings component */}
<section className="challenge">
<h2>Greetings</h2>
<Greetings lang='de'>
<p className="boxed-text">Hallo Ludwig</p>
</Greetings>
</section>

<section className="challenge">
<h2>Random</h2>
<div className="boxed-text"><Random min={1} max={6} /></div>
<div className="boxed-text"><Random min={1} max={100} /></div>
</section>

<section className="challenge">
<h2>Box Color</h2>
<div className="boxes-container">
<BoxColor r={255} g={0} b={0} />
<BoxColor r={128} g={255} b={0} />
</div>
</section>

<section className="challenge">
<h2>Credit Card</h2>
<div className="credit-cards">
<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"
/>
</div>
</section>
<section className="challenge">
<h2>Rating</h2>
<Rating children='0' />
<Rating children='1.49' />
<Rating children='1.5' />
<Rating children='3' />
<Rating children='4' />
<Rating children='5' />
</section>
<section className="challenge">
<h2>Driver Card</h2>
<DriverCard
name='Travis Kalanick'
image='https://si.wsj.net/public/resources/images/BN-TY647_37gql_OR_20170621052140.jpg?width=620&height=428'
children='4.2'
car={{
model: 'Toyota Corolla Altis',
licensePlate: 'CO42DE'
}}
className='driver-card'
/>
<DriverCard
name='Dara Khosrowshahi'
image='https://ubernewsroomapi.10upcdn.com/wp-content/uploads/2017/09/Dara_ELT_Newsroom_1000px.jpg'
children='4.9'
car={{
model: 'Audi A3',
licensePlate: 'BE33ER'
}}
className='driver-card'
/>
</section>
<section className="challenge">
<h2>Like Button</h2>
<div className="buttons-container">
<LikeButton />
<LikeButton />
</div>
</section>
<section className="challenge"></section>
</div>
);
}
}

export default App;


41 changes: 41 additions & 0 deletions src/components/BoxColor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react'

function BoxColor(props) {
const { r, g, b } = props
const colorString = 'rgb(' + r + ',' + g + ',' + b + ')'
// console.log(colorString)
const divStyle = {
backgroundColor: colorString,
// 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 (
<div style={divStyle}>
<p>{colorString}</p>
<p>#{rgbToHex(props.r, props.g, props.b)}</p>
</div>
)
}

export default BoxColor

40 changes: 40 additions & 0 deletions src/components/CreditCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react'

function CreditCard(props) {
const divStyle = {
backgroundColor: props.bgColor,
color: props.color,
display: 'flex',
flexFlow: 'column nowrap'
}

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)
}

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 (
<div style={divStyle} className="cc-container" >
<img className="cc-brand" src={cardType} alt={props.type}></img>
<p className="cc-number" > {maskNumber(props.number)}</p>
<div className="cc-info">
<p className="cc-expiration">Expires: {addZero(props.expirationMonth)}/{removeDigits(props.expirationYear)}</p>
<p className="cc-bank">{props.bank}</p>
</div>
<p className="cc-owner">{props.owner}</p>
</div >
)
}

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

function DriverCard(props) {
return (
<div className='driver-container'>
<img className='driver-image' src={props.image} alt={props.name} />
<div className='driver-details'>
<h3 className='driver-name'>{props.name}</h3>
<div className='driver-rating'><Rating children={props.children} /></div>
<p className='driver-car'>{props.car.model}-{props.car.licensePlate}</p>
</div>
</div>
)
}

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

class Greetings extends Component {
render() {
const { lang, children } = this.props
return (
<>
<div lang={lang}>{children}</div>
</>
)
}
}

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

class IdCard extends Component {
render() {
const { lastName, firstName, gender, height, birth, picture } = this.props;
const birthDate = birth.toDateString();
return (
<div className="card-container">
<img className="card-image" src={picture} alt="a profile" />
<div className="card-info">
<p><span className="card-label">First Name:</span>{firstName}</p>
<p><span className="card-label">Last Name:</span>{lastName}</p>
<p><span className="card-label">Gender:</span>{gender}</p>
<p><span className="card-label">Height:</span>{height}</p>
<p><span className="card-label">Birth:</span>{birthDate}</p>
</div>
</div>
)
}
}

export default IdCard

25 changes: 25 additions & 0 deletions src/components/LikeButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React, { Component } from 'react'

class LikeButton extends Component {
state = {
number: 0,
text: 'Likes'
}

modifyNumber = (sum) => {
let newNumber = this.state.number
this.setState({
number: newNumber + sum
})
}

render() {
return (
<>
<button className='button-counter' children={this.state.number + '\t' + this.state.text} onClick={() => { this.modifyNumber(1) }}></button>
</>
)
}
}

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

class Random extends Component {
render() {
const { min, max } = this.props
const randomValue = () => Math.round(Math.random() * (max - min) + min)
return (
<div min={min} max={max}>
Random value between {min} and {max} => {randomValue()}
</ div>
)
}
}

export default Random
24 changes: 24 additions & 0 deletions src/components/Rating.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react'

function Rating(props) {
const value = Math.round(props.children);

const star = (rates) => {
let filled = '★';
let empty = '☆';
let stars = new Array(5);

for (let i = 0; i < 5; i++) {
i < rates ? stars[i] = filled : stars[i] = empty;
}
return stars.join('')
}

return (
<div>
{star(value)}
</div>
)
}

export default Rating
Loading