diff --git a/src/App.jsx b/src/App.jsx index 98d0f49aa..676205c50 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,109 @@ import "./App.css"; - +import IdCard from "../src/assets/components/Card/Card"; +import Greetings from "./assets/components/Greetings/Greetings"; +import Random from "./assets/components/Random/Random"; +import BoxColor from "./assets/components/BoxColor/BoxColor"; +import CreditCard from "./assets/components/CreditCard/CreditCard"; +import Rating from "./assets/components/Rating/Rating"; +import DriverCard from "./assets/components/DiverCard/DriverCard"; function App() { return (

LAB | React Training

+

IdCards

+ + + + +

Greetings

+ Ludwig + François + +

Random Number

+ + + +

BoxColor

+ + + +

Credit Card

+
+ + + +
+

Rating

+ 0 + 1.49 + 1.5 + 3 + 4 + 5 + +

Drive Card

+ + +
+ ); } diff --git a/src/assets/components/BoxColor/BoxColor.jsx b/src/assets/components/BoxColor/BoxColor.jsx new file mode 100644 index 000000000..08ea4f8f1 --- /dev/null +++ b/src/assets/components/BoxColor/BoxColor.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import '../Greetings/Greetings.css' + +function BoxColor ({ r, g, b}) { + + const clamp = (value) => Math.min(255, Math.max(0, value)); + + const backgroundColor = `rgb(${clamp(r)}, ${clamp(g)}, ${clamp(b)})`; + + return ( +
+

RGB: {r}, {g}, {b}

+
+ ); +} + +export default BoxColor; diff --git a/src/assets/components/Card/Card.css b/src/assets/components/Card/Card.css new file mode 100644 index 000000000..06b7ecba8 --- /dev/null +++ b/src/assets/components/Card/Card.css @@ -0,0 +1,17 @@ +.id-card { + display: flex; + border: 3px solid black; + padding: 5px; + margin: 10px; + } + + .info-card { + display: flex; + flex-direction: column; + text-align: left; + margin-left: 5px; + } + + .info-card p { + margin: 5px 0; + } \ No newline at end of file diff --git a/src/assets/components/Card/Card.jsx b/src/assets/components/Card/Card.jsx new file mode 100644 index 000000000..dda8bbac4 --- /dev/null +++ b/src/assets/components/Card/Card.jsx @@ -0,0 +1,22 @@ +import React from "react"; +import './Card.css'; + +function IdCard (props) { + const { lastName, firstName, gender, height, birth, picture } = props; + return ( +
+
+ {`${firstName} +
+
+

Last Name: {lastName}

+

First Name: {firstName}

+

Gender: {gender}

+

Height: {height} cm

+

Birth: {birth.toDateString()}

+
+
+ ); +}; + +export default IdCard; \ No newline at end of file diff --git a/src/assets/components/CreditCard/CreditCard.css b/src/assets/components/CreditCard/CreditCard.css new file mode 100644 index 000000000..2208dc22d --- /dev/null +++ b/src/assets/components/CreditCard/CreditCard.css @@ -0,0 +1,44 @@ +.credit-card { + width: 300px; + height: 180px; + border-radius: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .card-logo { + width: 60px; + margin-bottom: 10px; + margin-left: 220px; + } + + .card-number { + font-size: 30px; + } + + .card-info { + display: flex; + flex-direction: column; + } + + .card-info-row { + display: flex; + justify-content: space-between; + margin-bottom: 5px; + } + + .info-label { + font-weight: bold; + } + + .info-value { + font-style: italic; + } + + .credit-card-container { + display: flex; + margin: 20px; +} diff --git a/src/assets/components/CreditCard/CreditCard.jsx b/src/assets/components/CreditCard/CreditCard.jsx new file mode 100644 index 000000000..89cc58053 --- /dev/null +++ b/src/assets/components/CreditCard/CreditCard.jsx @@ -0,0 +1,46 @@ +import React from 'react'; +import './CreditCard.css'; +import visaLogo from '../../images/visa.png'; +import masterCardLogo from '../../images/master-card.svg'; + +function CreditCard({ + type, + number, + expirationMonth, + expirationYear, + bank, + owner, + bgColor, + color, +}) { + const cardLogo = type === 'Visa' ? visaLogo : masterCardLogo; + const lastFourDigits = number.slice(-4); + + return ( +
+
+ Card Logo +
•••• •••• •••• {lastFourDigits}
+
+
+ Expires + + {expirationMonth.toString().padStart(2, '0')}/{expirationYear.toString().slice(-2)} + +
+
+ Bank + {bank} +
+
+ Owner + {owner} +
+
+
+
+ ); +} + +export default CreditCard; + diff --git a/src/assets/components/DiverCard/DriverCard.css b/src/assets/components/DiverCard/DriverCard.css new file mode 100644 index 000000000..992c9473e --- /dev/null +++ b/src/assets/components/DiverCard/DriverCard.css @@ -0,0 +1,29 @@ +.driver-card { + display: flex; + padding: 5px; + margin: 10px; + background-color: rgb(111, 111, 236); + color: white; + border-radius: 10px; + width: 500px; + align-items: center; +} + +.info-driver { + display: flex; + flex-direction: column; + text-align: left; + margin-left: 5px; +} + +.info-driver p { + margin: 5px 0; +} + +.driver-card img { + margin-left: 100px; + padding: 10px; + width: 100px; + height: 100px; + border-radius: 100%; +} \ No newline at end of file diff --git a/src/assets/components/DiverCard/DriverCard.jsx b/src/assets/components/DiverCard/DriverCard.jsx new file mode 100644 index 000000000..d0f78950f --- /dev/null +++ b/src/assets/components/DiverCard/DriverCard.jsx @@ -0,0 +1,34 @@ +import React from 'react'; +import './DriverCard.css'; + +const DriverCard = (props) => { + const { name, rating, img, car } = props; + const value = Math.round(rating); + const stars = []; + + for (let i = 0; i < 5; i++) { + if (i < value) { + stars.push('★'); + } else { + stars.push('☆'); + } + } + + return ( +
+ {name} +
+

{name}

+
+ {stars.map((star, index) => ( + {star} + ))} +
+

{car.model} - {car.licensePlate}

+
+
+ ); +}; + +export default DriverCard; + diff --git a/src/assets/components/Greetings/Greetings.css b/src/assets/components/Greetings/Greetings.css new file mode 100644 index 000000000..78e6f5367 --- /dev/null +++ b/src/assets/components/Greetings/Greetings.css @@ -0,0 +1,7 @@ +.text-box { + display: flex; + border: 3px solid black; + padding: 5px; + margin: 10px; + } + \ No newline at end of file diff --git a/src/assets/components/Greetings/Greetings.jsx b/src/assets/components/Greetings/Greetings.jsx new file mode 100644 index 000000000..a51516d6f --- /dev/null +++ b/src/assets/components/Greetings/Greetings.jsx @@ -0,0 +1,32 @@ +import React from "react"; +import './Greetings.css'; + +function Greetings (props) { + let greeting = ""; + const { lang, children } = props; + switch (lang) { + case "de": + greeting = "Hallo"; + break; + case "en": + greeting = "Hello"; + break; + case "es": + greeting = "Hola"; + break; + case "fr": + greeting = "Bonjour"; + break; + default: + greeting = "Sorry, I don't know your language"; + } + + return ( + +
+

{greeting} {children}

+
+ ) +} + +export default Greetings; \ No newline at end of file diff --git a/src/assets/components/Random/Random.jsx b/src/assets/components/Random/Random.jsx new file mode 100644 index 000000000..6b6ba2c44 --- /dev/null +++ b/src/assets/components/Random/Random.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import '../Greetings/Greetings.css' +function Random ({ min, max }) { + const randomNum = Math.floor(Math.random() * (max - min + 1)) + min; + return ( +
+

Random Number between {min} and {max} is {randomNum}

+
+ ); +} + +export default Random; diff --git a/src/assets/components/Rating/Rating.jsx b/src/assets/components/Rating/Rating.jsx new file mode 100644 index 000000000..b3eaea717 --- /dev/null +++ b/src/assets/components/Rating/Rating.jsx @@ -0,0 +1,24 @@ +import React from 'react'; + +function Rating({ children }) { + const value = Math.round(children); + const stars = []; + + for (let i = 0; i < 5; i++) { + if (i < value) { + stars.push('★'); + } else { + stars.push('☆'); + } + } + + return ( +
+ {stars.map((star, index) => ( + {star} + ))} +
+ ); +} + +export default Rating;