From 51fc3b94135898d653289237040700e98a4e99fd Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Thu, 7 Nov 2019 17:20:22 +0100
Subject: [PATCH 01/13] IdCard done

---
 src/App.css              | 18 ++++++++++++++++++
 src/App.js               | 21 ++++++++++++++++++++-
 src/components/IdCard.js | 19 +++++++++++++++++++
 3 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 src/App.css
 create mode 100644 src/components/IdCard.js

diff --git a/src/App.css b/src/App.css
new file mode 100644
index 000000000..17632c12b
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,18 @@
+.IdCard {
+  display: flex;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+}
+
+.right li {
+  list-style-type: none;
+}
+
+.Box {
+  padding: 10px;
+  margin: 10px;
+  border: solid 1px black;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index e7ca67f20..7004845ed 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,30 @@
 import React, { Component } from 'react';
+import IdCard from './components/IdCard';
+import './App.css';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
         <h1>IdCard</h1>
-        {/* TODO: Use the IdCard component */}
+        
+        <IdCard 
+          lastName='Doe'
+          firstName='John'
+          gender='male'
+          height={178}
+          birth={new Date("1992-07-14")}
+          picture="https://randomuser.me/api/portraits/men/44.jpg"
+        />
+
+        <IdCard 
+          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 */}
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
new file mode 100644
index 000000000..b8f59a8ca
--- /dev/null
+++ b/src/components/IdCard.js
@@ -0,0 +1,19 @@
+import React from 'react'
+
+const IdCard = (props) => {
+  console.log(props.birth)
+  return (
+    <div className="IdCard Box">
+      <img src={props.picture} alt={props.firstName}></img>
+      <ul className="right">
+        <li><strong>First name</strong>: {props.firstName}</li>
+        <li><strong>Last name</strong>: {props.lastName}</li>
+        <li><strong>Gender</strong>: {props.gender}</li>
+        <li><strong>Height</strong>: {props.height} cm</li>
+        <li><strong>Birth</strong>: {props.birth.toString().slice(0,15)}</li>
+      </ul>
+    </div>
+  );
+}
+
+export default IdCard;

From 3cec46a48664233d7b15bb10ab94be0625180afa Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Thu, 7 Nov 2019 17:32:27 +0100
Subject: [PATCH 02/13] Greeting done

---
 src/App.css                 |  2 +-
 src/App.js                  |  4 +++-
 src/components/Greetings.js | 31 +++++++++++++++++++++++++++++++
 src/components/IdCard.js    |  2 +-
 4 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Greetings.js

diff --git a/src/App.css b/src/App.css
index 17632c12b..e7a78da0d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -11,7 +11,7 @@
   list-style-type: none;
 }
 
-.Box {
+.box {
   padding: 10px;
   margin: 10px;
   border: solid 1px black;
diff --git a/src/App.js b/src/App.js
index 7004845ed..999f875c0 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import IdCard from './components/IdCard';
 import './App.css';
+import { Greetings } from './components/Greetings';
 
 class App extends Component {
   render() {
@@ -27,7 +28,8 @@ class App extends Component {
         />
 
         <h1>Greetings</h1>
-        {/* TODO: Use the Greetings component */}
+        <Greetings lang="de">Ludwig</Greetings>
+        <Greetings lang="fr">François</Greetings>
       </div>
     );
   }
diff --git a/src/components/Greetings.js b/src/components/Greetings.js
new file mode 100644
index 000000000..485debb9f
--- /dev/null
+++ b/src/components/Greetings.js
@@ -0,0 +1,31 @@
+import React from 'react'
+
+export const Greetings = (props) => {
+  const greets = [
+    {
+      lang: 'de',
+      greet: 'Hallo'
+    },
+    {
+      lang: 'en',
+      greet: 'Hello'
+    },
+    {
+      lang: 'es',
+      greet: 'Hola'
+    },
+    {
+      lang: 'fr',
+      greet: 'Bonjour'
+    }
+  ];
+
+  let getGreeting = lang => greets.find(language => language.lang === lang);
+  const localGreeting = getGreeting(props.lang);
+
+  return (
+    <div className="box">
+      {localGreeting.greet} {props.children}
+    </div>
+  )
+}
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
index b8f59a8ca..ddcccdf49 100644
--- a/src/components/IdCard.js
+++ b/src/components/IdCard.js
@@ -3,7 +3,7 @@ import React from 'react'
 const IdCard = (props) => {
   console.log(props.birth)
   return (
-    <div className="IdCard Box">
+    <div className="IdCard box">
       <img src={props.picture} alt={props.firstName}></img>
       <ul className="right">
         <li><strong>First name</strong>: {props.firstName}</li>

From 4dd3078a7f59b9c35084a51a01b0e48ed8df8aae Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Thu, 7 Nov 2019 17:39:28 +0100
Subject: [PATCH 03/13] Random done

---
 src/App.css                 |  7 ++++++-
 src/App.js                  |  9 ++++++---
 src/components/Greetings.js |  4 +++-
 src/components/IdCard.js    |  1 -
 src/components/Random.js    | 12 ++++++++++++
 src/index.css               |  2 +-
 6 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Random.js

diff --git a/src/App.css b/src/App.css
index e7a78da0d..89f3c2891 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,8 @@
+
+.App {
+  margin-left: 10px;
+}
+
 .IdCard {
   display: flex;
 }
@@ -13,6 +18,6 @@
 
 .box {
   padding: 10px;
-  margin: 10px;
+  margin-bottom: 10px;
   border: solid 1px black;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 999f875c0..c3d9276a5 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import IdCard from './components/IdCard';
 import './App.css';
-import { Greetings } from './components/Greetings';
+import Greetings from './components/Greetings';
+import Random from './components/Random';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
         <h1>IdCard</h1>
-        
         <IdCard 
           lastName='Doe'
           firstName='John'
@@ -17,7 +17,6 @@ class App extends Component {
           birth={new Date("1992-07-14")}
           picture="https://randomuser.me/api/portraits/men/44.jpg"
         />
-
         <IdCard 
           lastName='Delores'
           firstName='Obrien'
@@ -30,6 +29,10 @@ class App extends Component {
         <h1>Greetings</h1>
         <Greetings lang="de">Ludwig</Greetings>
         <Greetings lang="fr">François</Greetings>
+
+        <h1>Random</h1>
+        <Random min={1} max={6}/>
+        <Random min={1} max={100}/>
       </div>
     );
   }
diff --git a/src/components/Greetings.js b/src/components/Greetings.js
index 485debb9f..934c1acff 100644
--- a/src/components/Greetings.js
+++ b/src/components/Greetings.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-export const Greetings = (props) => {
+const Greetings = (props) => {
   const greets = [
     {
       lang: 'de',
@@ -29,3 +29,5 @@ export const Greetings = (props) => {
     </div>
   )
 }
+
+export default Greetings;
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
index ddcccdf49..cb0eb0d6d 100644
--- a/src/components/IdCard.js
+++ b/src/components/IdCard.js
@@ -1,7 +1,6 @@
 import React from 'react'
 
 const IdCard = (props) => {
-  console.log(props.birth)
   return (
     <div className="IdCard box">
       <img src={props.picture} alt={props.firstName}></img>
diff --git a/src/components/Random.js b/src/components/Random.js
new file mode 100644
index 000000000..cb7814ddb
--- /dev/null
+++ b/src/components/Random.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Random = (props) => {
+  const random = Math.floor(Math.random() * props.max) + props.min;
+  return (
+    <div className="box">
+      <p>Random value between {props.min} and {props.max} => {random}</p>
+    </div>
+  )
+}
+
+export default Random;
diff --git a/src/index.css b/src/index.css
index cee5f348f..b874ac530 100755
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,5 @@
 body {
-  margin: 0;
+  margin-left: 0;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",

From 3db32d33ddf77af381b48b62e44fac45db2d4d41 Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Thu, 7 Nov 2019 17:56:21 +0100
Subject: [PATCH 04/13] BoxColor done

---
 src/App.css                |  4 ++++
 src/App.js                 | 27 +++++++++++++++++++++++++++
 src/components/BoxColor.js | 22 ++++++++++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 src/components/BoxColor.js

diff --git a/src/App.css b/src/App.css
index 89f3c2891..8acd6bf62 100644
--- a/src/App.css
+++ b/src/App.css
@@ -20,4 +20,8 @@
   padding: 10px;
   margin-bottom: 10px;
   border: solid 1px black;
+}
+
+.tx-center p {
+  text-align: center;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index c3d9276a5..8f51daaa2 100755
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import IdCard from './components/IdCard';
 import './App.css';
 import Greetings from './components/Greetings';
 import Random from './components/Random';
+import BoxColor from './components/BoxColor';
 
 class App extends Component {
   render() {
@@ -33,6 +34,32 @@ class App extends Component {
         <h1>Random</h1>
         <Random min={1} max={6}/>
         <Random min={1} max={100}/>
+
+        <h1>BoxColor</h1>
+        <BoxColor r={255} g={0} b={0} />
+        <BoxColor r={128} g={255} b={0} />
+
+        <h1>CreditCard</h1>
+
+
+        <h1>Rating</h1>
+
+
+        <h1>DriverCard</h1>
+
+
+        <h1>ClickablePicture</h1>
+
+
+        <h1>Dice</h1>
+
+
+        <h1>Carousel</h1>
+
+
+        <h1>NumbersTable</h1>
+
+
       </div>
     );
   }
diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js
new file mode 100644
index 000000000..a39d28312
--- /dev/null
+++ b/src/components/BoxColor.js
@@ -0,0 +1,22 @@
+import React from 'react'
+
+const BoxColor = (props) => {
+  const componentToHex = (c) => {
+    let hex = c.toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  }
+
+  const rgbToHex = (r, g, b) => {
+    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+  }
+  const hex = rgbToHex(props.r, props.b, props.g);
+
+  return (
+    <div className="box tx-center" style={{backgroundColor: 'rgb(' + props.r + ', ' + props.g + ', ' + props.b + ')'}} >
+      <p>rgb({props.r},{props.g},{props.b})</p>
+      <p>{hex}</p>
+    </div>
+  )
+}
+
+export default BoxColor;

From 31db1e958ca7713bde9eb161bf93672ad24b18b9 Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Thu, 7 Nov 2019 20:09:47 +0100
Subject: [PATCH 05/13] CreditCard done

---
 src/App.css                  | 30 ++++++++++++++++++++++++++++++
 src/App.js                   | 29 ++++++++++++++++++++++++++++-
 src/components/BoxColor.js   |  4 ++--
 src/components/CreditCard.js | 26 ++++++++++++++++++++++++++
 4 files changed, 86 insertions(+), 3 deletions(-)
 create mode 100644 src/components/CreditCard.js

diff --git a/src/App.css b/src/App.css
index 8acd6bf62..559721a23 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,12 +1,18 @@
 
 .App {
   margin-left: 10px;
+  font-size: 18px;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 
 .IdCard {
   display: flex;
 }
 
+.IdCard img {
+  width: 156px;
+}
+
 .right {
   display: flex;
   flex-direction: column;
@@ -24,4 +30,28 @@
 
 .tx-center p {
   text-align: center;
+}
+
+.CreditCard {
+  padding: 50px;
+  width: 350px;
+  border-radius: 10px;
+  margin-bottom: 15px;
+}
+
+.CreditCard img {
+  width: 70px;
+}
+
+.number {
+  text-align: center;
+  font-size: 2rem;
+}
+
+.type {
+  text-align: right;
+}
+
+.bank {
+  margin-left: 10px;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 8f51daaa2..4a5feaf87 100755
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import './App.css';
 import Greetings from './components/Greetings';
 import Random from './components/Random';
 import BoxColor from './components/BoxColor';
+import CreditCard from './components/CreditCard';
 
 class App extends Component {
   render() {
@@ -40,7 +41,33 @@ class App extends Component {
         <BoxColor r={128} g={255} b={0} />
 
         <h1>CreditCard</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>
 
diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js
index a39d28312..902a1c7ea 100644
--- a/src/components/BoxColor.js
+++ b/src/components/BoxColor.js
@@ -13,8 +13,8 @@ const BoxColor = (props) => {
 
   return (
     <div className="box tx-center" style={{backgroundColor: 'rgb(' + props.r + ', ' + props.g + ', ' + props.b + ')'}} >
-      <p>rgb({props.r},{props.g},{props.b})</p>
-      <p>{hex}</p>
+      <p><strong>rgb({props.r},{props.g},{props.b})</strong></p>
+      <p><strong>{hex}</strong></p>
     </div>
   )
 }
diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js
new file mode 100644
index 000000000..f5ace6af6
--- /dev/null
+++ b/src/components/CreditCard.js
@@ -0,0 +1,26 @@
+import React from 'react'
+
+const CreditCard = (props) => {
+  let imgUrl = '';
+  if (props.type === "Visa") {
+    imgUrl = './img/visa.png'
+   } else {
+    imgUrl = './img/master-card.svg';
+   }
+  return (
+    <div className="CreditCard" style={{backgroundColor: props.bgColor, color: props.color}}>
+      <div className="type">
+        <img src={imgUrl} alt={props.type}/>
+      </div>
+      <div className="number">
+        <p>•••• •••• •••• {props.number.slice(12, 16)}</p>
+      </div>
+      <div className="expiresBank">
+        <span>Expires {props.expirationMonth}/{props.expirationYear}</span><span className="bank">{props.bank}</span>
+      </div>
+      <div className="owner">{props.owner}</div>
+    </div>
+  )
+}
+
+export default CreditCard;

From 192d607c5f414fb62ba91b997134ff55968fe036 Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Thu, 7 Nov 2019 20:49:01 +0100
Subject: [PATCH 06/13] Rating done

---
 src/App.css              |  4 ++++
 src/App.js               |  8 +++++++-
 src/components/Rating.js | 16 ++++++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Rating.js

diff --git a/src/App.css b/src/App.css
index 559721a23..46cb25de3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -54,4 +54,8 @@
 
 .bank {
   margin-left: 10px;
+}
+
+.Rating {
+  font-size: 3rem;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 4a5feaf87..4be620355 100755
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ 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';
 
 class App extends Component {
   render() {
@@ -70,7 +71,12 @@ class App extends Component {
           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>DriverCard</h1>
 
diff --git a/src/components/Rating.js b/src/components/Rating.js
new file mode 100644
index 000000000..f26293a3f
--- /dev/null
+++ b/src/components/Rating.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const Rating = (props) => {
+  let string = '';
+  for (let i = 0; i < Math.round(props.children); i++) {
+    string += '★';
+  }
+
+  return (
+    <div className="Rating">
+      <pre>{string.padEnd(5, "☆")}</pre>
+    </div>
+  )
+}
+
+export default Rating;

From 6a98061eb948c6c31d9e3d23bceaf787e8e9cf93 Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Thu, 7 Nov 2019 21:21:28 +0100
Subject: [PATCH 07/13] DriverCard done

---
 src/App.css                  | 28 ++++++++++++++++++++++++++++
 src/App.js                   | 18 +++++++++++++++++-
 src/components/DriverCard.js | 24 ++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DriverCard.js

diff --git a/src/App.css b/src/App.css
index 46cb25de3..41f921529 100644
--- a/src/App.css
+++ b/src/App.css
@@ -58,4 +58,32 @@
 
 .Rating {
   font-size: 3rem;
+}
+
+.DriverCard {
+  background-color: #425cbb;
+  border-radius: 10px;
+  color: #fff;
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  margin: 10px;
+  align-items: center;
+}
+
+.DriverCard img {
+  height: 150px;
+  width: 150px;
+  object-fit: cover;
+  border-radius: 100px;
+  margin-right: 20px;
+}
+
+.DriverCard h2 {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.ratingCard {
+  font-size: 3rem;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 4be620355..46a5df573 100755
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ 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';
 
 class App extends Component {
   render() {
@@ -79,7 +80,22 @@ class App extends Component {
         <Rating>5</Rating>
 
         <h1>DriverCard</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>ClickablePicture</h1>
 
diff --git a/src/components/DriverCard.js b/src/components/DriverCard.js
new file mode 100644
index 000000000..3f6f2ebf1
--- /dev/null
+++ b/src/components/DriverCard.js
@@ -0,0 +1,24 @@
+import React from 'react'
+
+const DriverCard = (props) => {
+  let string = '';
+  for (let i = 0; i < Math.round(props.rating); i++) {
+    string += '★';
+  }
+
+
+  return (
+    <div className="DriverCard">
+      <img className="left" src={props.img} alt={props.name} style={{maxWidth: 100 + '%'}}></img>
+      <div className="right">
+        <h2>{props.name}</h2>
+        <div className="ratingCard">
+          {string.padEnd(5, "☆")}
+        </div>
+        <p>{props.car.model} - {props.car.licensePlate}</p>
+      </div>
+    </div>
+  )
+}
+
+export default DriverCard;

From e32e52404443f302c812a3a939ac263004810248 Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Sun, 10 Nov 2019 15:49:00 +0100
Subject: [PATCH 08/13] LikeButton done

---
 src/App.js                   |  4 ++++
 src/components/LikeButton.js | 31 +++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/components/LikeButton.js

diff --git a/src/App.js b/src/App.js
index 46a5df573..29736f710 100755
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@ 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() {
@@ -97,6 +98,9 @@ class App extends Component {
             licensePlate: "BE33ER"
           }} />
 
+        <h1>LikeButton</h1>
+        <LikeButton /> <LikeButton />
+
         <h1>ClickablePicture</h1>
 
 
diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js
new file mode 100644
index 000000000..b205f962d
--- /dev/null
+++ b/src/components/LikeButton.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+
+export default class LikeButton extends Component {
+  constructor() {
+    super();
+    this.state = {
+      num: 0,
+      title: "Likes",
+      color: ['purple', 'blue', 'green', 'yellow', 'orange', 'red']
+    }
+  }
+
+  changeButton = () => {
+    this.setState({
+      num: this.state.num + 1
+    })
+  }
+
+  render() {
+    return (
+      <button style={{
+          backgroundColor: this.state.color[this.state.num],
+          border: 0+"px",
+          borderRadius: 5+"px",
+          padding: 10+"px",
+          color: "white"
+        }} onClick={this.changeButton}>{this.state.num} {this.state.title}
+      </button>
+    );
+  }
+}

From 5ecfeb7235ee0a8d090ff4df9c23eec4a7021538 Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Sun, 10 Nov 2019 16:49:23 +0100
Subject: [PATCH 09/13] Clickable pictures

---
 src/App.js                         |  6 +++++-
 src/components/ClickablePicture.js | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ClickablePicture.js

diff --git a/src/App.js b/src/App.js
index 29736f710..385aeb6bf 100755
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import CreditCard from './components/CreditCard';
 import Rating from './components/Rating';
 import DriverCard from './components/DriverCard';
 import LikeButton from './components/LikeButton';
+import ClickablePicture from './components/ClickablePicture';
 
 class App extends Component {
   render() {
@@ -102,7 +103,10 @@ class App extends Component {
         <LikeButton /> <LikeButton />
 
         <h1>ClickablePicture</h1>
-
+        <ClickablePicture
+          img="/img/persons/maxence.png"
+          imgClicked="/img/persons/maxence-glasses.png"
+        />
 
         <h1>Dice</h1>
 
diff --git a/src/components/ClickablePicture.js b/src/components/ClickablePicture.js
new file mode 100644
index 000000000..2358a46a2
--- /dev/null
+++ b/src/components/ClickablePicture.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+
+export default class ClickablePicture extends Component {
+
+  state = {
+    img: this.props.img
+  }
+
+  changePicture = () => {
+    (this.state.img === this.props.img) ? this.setState({ img: this.props.imgClicked }) : this.setState({ img: this.props.img })
+  }
+
+  render() {
+    return (
+      <img src ={this.state.img} alt = "" onClick = {this.changePicture}/>
+    )
+  }
+}

From da1687835ae893bede9f6fe1de2fbe7f1a093517 Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Sun, 10 Nov 2019 17:52:28 +0100
Subject: [PATCH 10/13] Dice done

---
 src/App.js             |  3 ++-
 src/components/Dice.js | 27 +++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Dice.js

diff --git a/src/App.js b/src/App.js
index 385aeb6bf..a7c3b8ace 100755
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,7 @@ import Rating from './components/Rating';
 import DriverCard from './components/DriverCard';
 import LikeButton from './components/LikeButton';
 import ClickablePicture from './components/ClickablePicture';
+import Dice from './components/Dice';
 
 class App extends Component {
   render() {
@@ -109,7 +110,7 @@ class App extends Component {
         />
 
         <h1>Dice</h1>
-
+        <Dice />
 
         <h1>Carousel</h1>
 
diff --git a/src/components/Dice.js b/src/components/Dice.js
new file mode 100644
index 000000000..52d6ecaea
--- /dev/null
+++ b/src/components/Dice.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+
+export default class Dice extends Component {
+  constructor() {
+    super();
+    this.state = {
+      img: '/img/dice' + (Math.floor(Math.random() * 6) + 1) + '.png'
+    }
+  }
+
+  changePicture = () => {
+    this.setState({
+      img: '/img/dice-empty.png'
+    })
+    setTimeout(() => {
+      this.setState({
+        img: '/img/dice' + (Math.floor(Math.random() * 6) + 1) + '.png'
+      })
+    }, 1000)
+  }
+
+  render() {
+    return (
+      <img src={this.state.img} alt="" onClick={this.changePicture} style={{width: 100+"px"}} />
+    )
+  }
+}

From bea19559d08b35845b47ecb80ddd806a14733c5a Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Sun, 10 Nov 2019 18:50:38 +0100
Subject: [PATCH 11/13] NumbersTable done

---
 src/App.css                    | 10 +++++++++
 src/App.js                     |  6 ++----
 src/components/NumbersBox.js   | 10 +++++++++
 src/components/NumbersTable.js | 38 ++++++++++++++++++++++++++++++++++
 4 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 src/components/NumbersBox.js
 create mode 100644 src/components/NumbersTable.js

diff --git a/src/App.css b/src/App.css
index 41f921529..18a9f96b0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -86,4 +86,14 @@
 
 .ratingCard {
   font-size: 3rem;
+}
+
+.NumbersTable {
+  display: flex;
+}
+
+.NumbersBox {
+  list-style-type: none;
+  border: solid 1px;
+  padding: 30px;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index a7c3b8ace..ad2bd2758 100755
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,7 @@ import DriverCard from './components/DriverCard';
 import LikeButton from './components/LikeButton';
 import ClickablePicture from './components/ClickablePicture';
 import Dice from './components/Dice';
+import NumbersTable from './components/NumbersTable';
 
 class App extends Component {
   render() {
@@ -112,11 +113,8 @@ class App extends Component {
         <h1>Dice</h1>
         <Dice />
 
-        <h1>Carousel</h1>
-
-
         <h1>NumbersTable</h1>
-
+        <NumbersTable limit={12} />
 
       </div>
     );
diff --git a/src/components/NumbersBox.js b/src/components/NumbersBox.js
new file mode 100644
index 000000000..adf129f20
--- /dev/null
+++ b/src/components/NumbersBox.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const NumbersBox = (props) => {
+  console.log(props);
+  return (
+  <li className="NumbersBox" style={{backgroundColor: props.color}}>{props.value}</li>
+  )
+}
+
+export default NumbersBox;
diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js
new file mode 100644
index 000000000..e07dedfda
--- /dev/null
+++ b/src/components/NumbersTable.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import NumbersBox from './NumbersBox';
+
+const generateArray = (number) => {
+  let arr = [];
+  let color = '';
+
+  for (let i = 1; i <= number; i++) {
+    (i % 2 === 0) ? color = "white" : color = 'red';
+    arr.push(
+      {
+        value: i,
+        color: color
+      }
+    )
+  }
+  return arr;
+}
+
+
+const NumbersTable = (props) => {
+  
+  return (
+    <ul className="NumbersTable">
+      {
+        generateArray(props.limit).map((element, index) =>
+          <NumbersBox
+            key = {index}
+            value = {element.value}
+            color = {element.color}
+          />
+        )
+      }
+    </ul>
+  )
+}
+
+export default NumbersTable;

From 88bcf49edb2e41c046b5a7101254f7441bf60693 Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Sun, 10 Nov 2019 19:19:18 +0100
Subject: [PATCH 12/13] Facebook done

---
 src/App.js                        |  4 ++++
 src/components/Facebook.js        | 31 +++++++++++++++++++++++++++++++
 src/components/FacebookProfile.js | 21 +++++++++++++++++++++
 src/components/NumbersTable.js    |  2 +-
 4 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Facebook.js
 create mode 100644 src/components/FacebookProfile.js

diff --git a/src/App.js b/src/App.js
index ad2bd2758..972a16d45 100755
--- a/src/App.js
+++ b/src/App.js
@@ -11,6 +11,7 @@ import LikeButton from './components/LikeButton';
 import ClickablePicture from './components/ClickablePicture';
 import Dice from './components/Dice';
 import NumbersTable from './components/NumbersTable';
+import Facebook from './components/Facebook';
 
 class App extends Component {
   render() {
@@ -116,6 +117,9 @@ class App extends Component {
         <h1>NumbersTable</h1>
         <NumbersTable limit={12} />
 
+        <h1>Facebook</h1>
+        <Facebook />
+        
       </div>
     );
   }
diff --git a/src/components/Facebook.js b/src/components/Facebook.js
new file mode 100644
index 000000000..1b579ae29
--- /dev/null
+++ b/src/components/Facebook.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import berlinJSON from '../data/berlin.json';
+import FacebookProfile from './FacebookProfile.js';
+
+export default class Facebook extends Component {
+  constructor() {
+    super();
+    this.state = {
+      berlin: berlinJSON
+    }
+  }
+
+  render() {
+    return (
+      <div className="FacebookProfile">
+        {
+          this.state.berlin.map((element, index) =>
+            <FacebookProfile
+              key = {index}
+              firstName = {element.firstName}
+              lastName = {element.lastName}
+              country = {element.country}
+              img = {element.img}
+              isStudent = {element.isStudent}
+            />
+          )
+        }
+      </div>
+    )
+  }
+}
diff --git a/src/components/FacebookProfile.js b/src/components/FacebookProfile.js
new file mode 100644
index 000000000..a6f643df7
--- /dev/null
+++ b/src/components/FacebookProfile.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const type = (isStudent) => {
+  return (isStudent === true) ? "Student" : "Teacher";
+}
+
+const FacebookProfile = (props) => {
+  return (
+    <div className="IdCard box">
+      <img src={props.img} alt={props.firstName}></img>
+      <ul className="right">
+        <li><strong>First name</strong>: {props.firstName}</li>
+        <li><strong>Last name</strong>: {props.lastName}</li>
+        <li><strong>Country</strong>: {props.country}</li>
+        <li><strong>Type</strong>: {type(props.isStudent)}</li>
+      </ul>
+    </div>
+  )
+}
+
+export default FacebookProfile;
diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js
index e07dedfda..9dacb4d97 100644
--- a/src/components/NumbersTable.js
+++ b/src/components/NumbersTable.js
@@ -6,7 +6,7 @@ const generateArray = (number) => {
   let color = '';
 
   for (let i = 1; i <= number; i++) {
-    (i % 2 === 0) ? color = "white" : color = 'red';
+    (i % 2 === 0) ? color = "red" : color = 'white';
     arr.push(
       {
         value: i,

From 6ebd5e751f8824aff6c08c3a9e30271fbe1081d1 Mon Sep 17 00:00:00 2001
From: Daniel Duque <duque@outlook.com>
Date: Sun, 10 Nov 2019 20:15:54 +0100
Subject: [PATCH 13/13] Working on signup form

---
 src/App.css                  | 23 +++++++++++++
 src/App.js                   |  6 +++-
 src/components/Facebook.js   | 36 ++++++++++++++++++++-
 src/components/NumbersBox.js |  1 -
 src/components/SignupPage.js | 62 ++++++++++++++++++++++++++++++++++++
 5 files changed, 125 insertions(+), 3 deletions(-)
 create mode 100644 src/components/SignupPage.js

diff --git a/src/App.css b/src/App.css
index 18a9f96b0..b9da15ca0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -96,4 +96,27 @@
   list-style-type: none;
   border: solid 1px;
   padding: 30px;
+}
+
+.country-button {
+  border: 0px;
+  border-radius: 10px;
+  background-color: lightblue;
+  padding: 10px;
+  margin: 5px;
+}
+
+.country-button:hover {
+  background-color: darkblue;
+  color: white;
+}
+
+.SignupPage {
+  display: flex;
+  flex-direction: column;
+}
+
+.SignupPage input {
+  padding: 10px;
+  margin: 5px 0px 5px 0px;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 972a16d45..e919a38a9 100755
--- a/src/App.js
+++ b/src/App.js
@@ -12,6 +12,7 @@ import ClickablePicture from './components/ClickablePicture';
 import Dice from './components/Dice';
 import NumbersTable from './components/NumbersTable';
 import Facebook from './components/Facebook';
+import SignupPage from './components/SignupPage';
 
 class App extends Component {
   render() {
@@ -119,7 +120,10 @@ class App extends Component {
 
         <h1>Facebook</h1>
         <Facebook />
-        
+
+        <h1>Signup Form</h1>
+        <SignupPage />
+
       </div>
     );
   }
diff --git a/src/components/Facebook.js b/src/components/Facebook.js
index 1b579ae29..120fbb672 100644
--- a/src/components/Facebook.js
+++ b/src/components/Facebook.js
@@ -10,9 +10,41 @@ export default class Facebook extends Component {
     }
   }
 
+  getCountries = () => {
+    let countries = [];
+    for (let i = 0; i < berlinJSON.length; i++) {
+      countries.push(berlinJSON[i].country);
+    }
+    return [...new Set(countries)];
+  }
+
+  listCountries = (country) => {
+    if (country === 'All') {
+      this.setState({
+        berlin: berlinJSON
+      })
+    } else {
+      const countries = berlinJSON.filter(element => {
+        return element.country === country;
+      })
+      this.setState({
+        berlin: countries
+      })
+    }
+  }
+
   render() {
     return (
-      <div className="FacebookProfile">
+      <div>
+        <div>
+          <button className="country-button" onClick={() => this.listCountries('All')}>All</button>
+          {
+            this.getCountries().map((element, index) =>
+              <button key={index} className="country-button" onClick={() => this.listCountries(element)}>{element}</button>
+            )
+          }
+        </div>
+        <div className="FacebookProfile">
         {
           this.state.berlin.map((element, index) =>
             <FacebookProfile
@@ -26,6 +58,8 @@ export default class Facebook extends Component {
           )
         }
       </div>
+      </div>
+      
     )
   }
 }
diff --git a/src/components/NumbersBox.js b/src/components/NumbersBox.js
index adf129f20..46f891ef9 100644
--- a/src/components/NumbersBox.js
+++ b/src/components/NumbersBox.js
@@ -1,7 +1,6 @@
 import React from 'react'
 
 export const NumbersBox = (props) => {
-  console.log(props);
   return (
   <li className="NumbersBox" style={{backgroundColor: props.color}}>{props.value}</li>
   )
diff --git a/src/components/SignupPage.js b/src/components/SignupPage.js
new file mode 100644
index 000000000..ecd552975
--- /dev/null
+++ b/src/components/SignupPage.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+
+export default class SignupPage extends Component {
+  constructor() {
+    super();
+    this.state = {
+      email: '',
+      password: '',
+      nationality: ''
+    }
+  }
+
+  handleChange(event) {
+    let { name, value } = event.target;
+    this.setState({[name]: value});
+  }
+
+  handleFormSubmit = event => {
+    event.preventDefault();
+    this.props.signup(this.state);
+    
+    this.setState({
+      email: "",
+      password: "",
+      nationality: ""
+    })
+  };
+
+  render() {
+    return (
+      <form className="SignupPage" onSubmit={this.handleFormSubmit}>
+        <label htmlFor="email">Email</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          autoComplete="email"
+          value={this.state.email}
+          onChange={(e) => this.handleChange(e)}
+        />
+        <label htmlFor="password">Password</label>
+        <input
+          type="password"
+          id="password"
+          name="password"
+          autoComplete="password"
+          value={this.state.password}
+          onChange={(e) => this.handleChange(e)}
+        />
+        <label htmlFor="nationality">Nationality</label>
+        <input
+          type="text"
+          id="nationality"
+          name="nationality"
+          value={this.state.nationality}
+          onChange={(e) => this.handleChange(e)}
+        />
+        <button type="submit" value="Submit">Submit</button>
+      </form>
+    )
+  }
+}