Skip to content

[MAD DE] ADRIAN RAMIREZ #60

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

[MAD DE] ADRIAN RAMIREZ #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
aa631af
iteration 1
xRamire Nov 29, 2021
333ab69
iteration 1 complete
xRamire Nov 29, 2021
4a31cd2
iteration 2
xRamire Nov 29, 2021
036686a
iteration 3 done
xRamire Nov 29, 2021
7d41322
iteration 4 done
xRamire Nov 29, 2021
53fcd05
iteration 5 empezada
xRamire Nov 29, 2021
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
15,828 changes: 15,828 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,7 @@
transform: rotate(360deg);
}
}




57 changes: 42 additions & 15 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,52 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import IdCard from './IdCard';
import Greetings from './Greetings';
import Random from './Random';
import "./Greetings.css"
import "./Random.css"
import BoxColor from './BoxColor';
import CreditCard from './CreditCard';


function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>


<div>

{/* ITERATION 1 */}
<IdCard lastName='Doe' firstName="John" gender="male" height='1,78m' birth={new Date("1992-07-14").toDateString()} picture="https://randomuser.me/api/portraits/men/44.jpg"/>
<IdCard lastName='Delores' firstName="Obrien" gender="female" height='1,72m' birth={new Date("1988-05-11").toDateString()} picture="https://randomuser.me/api/portraits/women/44.jpg" />


{/* ITERATION 2 */}
<div className="languages">
<Greetings lang="de" children="Ludwig" />
<Greetings lang="fr" children="François" />
</div>

{/* ITERATION 3 */}
<div className="random">
<Random min={1} max={6}/>
<Random min={1} max={100} />
</div>

{/* ITERATION 4 */}
<BoxColor r={255} g={0} b={0}/>
<BoxColor r={0} g={255} b={0} />

{/* ITERATION 5 */}

{/* <CreditCard type="Visa" number="**** **** **** 8845" expirationMonth="" /> */}


</div>




);
}

Expand Down
16 changes: 16 additions & 0 deletions src/BoxColor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";


const BoxColor = (props) => {


return (
<div style={{height: '50px', width: "130px", padding: "40px", backgroundColor: `rgb(${props.r}, ${props.g}, ${props.b})`, color: "white"}}>
<p>rgb({props.r},{props.g},{props.b})</p>
</div>
)


}

export default BoxColor
34 changes: 34 additions & 0 deletions src/CreditCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from "react";
// import "./Greetings.css"
import Random from "./Random";


const CreditCard = (props) => {

<article>
<p>{props.type}</p>

<p>{props.number}</p>


<div>
<div>
<p>{props.expirationMonth}</p>
<p>{props.expirationYear}</p>
</div>

<div>
<p>{props.bank}</p>
</div>

</div>



<p>{props.owner}</p>
<p>{props.color}</p>
</article>

}

export default CreditCard
6 changes: 6 additions & 0 deletions src/Greetings.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.languages p {
border: 1px solid black;
width: 150px;
margin-left: 6px;
margin-top: 6px;
}
19 changes: 19 additions & 0 deletions src/Greetings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from "react";
import "./Greetings.css"


const Greetings = (props) => {

if (props.lang === "de"){
return <p>Hallo {props.children}</p>
} else if (props.lang === "fr") {
return <p>Bonjour {props.children}</p>
} else if (props.lang === "es") {
return <p>Hola {props.children}</p>
} else if (props.lang === "en") {
return <p>Hello {props.children}</p>
}

}

export default Greetings
26 changes: 26 additions & 0 deletions src/IdCard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.card {
width: 320px;
margin-top: 6px;
margin-left: 6px;
border: 1px solid black;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: stretch;
}

.card p {
margin: auto;
font-weight: bold;
}

.card p span{
font-weight: normal;
}

.img {

width: 150px;
}
29 changes: 29 additions & 0 deletions src/IdCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from "react";
import "./IdCard.css"


const IdCard = (props) => {

return (
<article className="card">
<header>
<img className="img" src={props.picture} alt={props.name} />

</header>

<div>
<p>Last name: <span>{props.lastName}</span></p>
<p>First name: <span>{props.firstName}</span></p>
<p>Gender: <span>{props.gender}</span></p>
<p>Height: <span>{props.height}</span></p>
<p>Birthday: <span>{props.birth}</span></p>
</div>

</article>
)



}

export default IdCard
6 changes: 6 additions & 0 deletions src/Random.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.random p {
border: 1px solid black;
width: 300px;
margin-left: 6px;
margin-top: 6px;
}
15 changes: 15 additions & 0 deletions src/Random.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";


const Random = (props) => {

const random = Math.floor(Math.random() * (props.max - props.min +1) + props.min)

return (
<p>Random value between {props.min} and {props.max} => {random}</p>
)


}

export default Random