diff --git a/src/assets/images/master-card.svg b/public/master-card.svg similarity index 100% rename from src/assets/images/master-card.svg rename to public/master-card.svg diff --git a/src/assets/images/visa.png b/public/visa.png similarity index 100% rename from src/assets/images/visa.png rename to public/visa.png diff --git a/src/App.css b/src/App.css index e69de29b..d67619e3 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,100 @@ +h1 { + margin: 10px; + padding: 5px; + display: flex; + justify-content: center; + border: 2px solid black; +} + +.id-card { + display: flex; + gap: 10px; + align-items: start; + border: 2px solid black; + margin: 10px; + padding: 5px; + line-height: 0.4rem; +} + +.greetings { + border: 2px solid black; + margin: 10px; + padding: 5px; + font-size: 1.3rem; +} + +.random { + border: 2px solid black; + margin: 10px; + padding: 5px; + font-size: 1.3rem; +} + +.box-color { + margin: 10px; + padding: 5px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0; + border: 2px solid black; +} + +.credit-card { + border-radius: 15px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + width: 30vw; + height: 25vh; + margin: 10px; + padding: 20px; +} + +.credit-card p { + margin: 0; +} + +.credit-card-row { + display: flex; +} + +.star-container { + margin: 10px; +} + +.rating { + --star-size: 30px; + --star-color: royalblue; /* Empty star color */ + --star-background: white; /* Filled star color */ + + display: block; + font-size: var(--star-size); + line-height: 1; +} + +.rating::before { + content: '★★★★★'; + letter-spacing: 3px; + -webkit-text-stroke: 2px white; + background: linear-gradient(90deg, + var(--star-background) var(--percent), + var(--star-color) var(--percent) + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.driver-card { + margin: 10px; + padding: 10px; + background-color: royalblue; + color: white; + border-radius: 20px; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 98d0f49a..b36fa09e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,107 @@ import "./App.css"; +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"; function App() { return (

LAB | React Training

+ + + + + Ludwig + François + + + + + + + +
+ + + + + +
+ +
+ 0 + 1.49 + 1.5 + 3 + 4 + 5 +
+ + + + +
); } diff --git a/src/components/ CreditCard.jsx b/src/components/ CreditCard.jsx new file mode 100644 index 00000000..88755eca --- /dev/null +++ b/src/components/ CreditCard.jsx @@ -0,0 +1,22 @@ +function CreditCard ({type, number, expirationMonth, expirationYear, bank, owner, + bgColor, color +}) { + const typeImages = { + "Visa": "../../public/visa.png", + "Master Card": "../../public/master-card.svg" + } + + return ( +
+ credit card logo +

•••• •••• •••• {number.slice(12)}

+
+

Expires {expirationMonth}/{expirationYear} {bank}

+

{owner}

+
+
+ ) +} + +export default CreditCard; \ No newline at end of file diff --git a/src/components/BoxColor.jsx b/src/components/BoxColor.jsx new file mode 100644 index 00000000..5d6243cd --- /dev/null +++ b/src/components/BoxColor.jsx @@ -0,0 +1,12 @@ +function BoxColor ({r, g, b}) { + const toHex = (c) => c.toString(16).padStart(2, '0'); + + return ( +
+

rgb({r}, {g}, {b})

+

#{toHex(r)}{toHex(g)}{toHex(b)}

+
+ ) +} + +export default BoxColor; \ No newline at end of file diff --git a/src/components/DriverCard.jsx b/src/components/DriverCard.jsx new file mode 100644 index 00000000..4194b195 --- /dev/null +++ b/src/components/DriverCard.jsx @@ -0,0 +1,17 @@ +import Rating from "./Rating"; + +function DriverCard ({name, rating, img, car}) { + return ( +
+ Driver profile picture +
+

{name}

+ {rating} +

{car.model} - {car.licensePlate}

+
+
+ ) +} + +export default DriverCard; \ No newline at end of file diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx new file mode 100644 index 00000000..9acd9f96 --- /dev/null +++ b/src/components/Greetings.jsx @@ -0,0 +1,14 @@ +function Greetings ({lang, children}) { + const helloString = { + de: "Hallo", + en: "Hello", + es: "Hola", + fr: "Bonjour" + } + + return ( +
{helloString[lang]} {children}
+ ) +} + +export default Greetings; \ No newline at end of file diff --git a/src/components/IdCard.jsx b/src/components/IdCard.jsx new file mode 100644 index 00000000..b9303bdc --- /dev/null +++ b/src/components/IdCard.jsx @@ -0,0 +1,21 @@ +function IdCard ({lastName, firstName, gender, + height, birth, picture}) { + + return ( +
+
+ +
+ +
+

First name: {firstName}

+

Last name: {lastName}

+

Gender: {gender}

+

Height: {height}

+

Birth: {birth.toDateString()}

+
+
+ ) +} + +export default IdCard; \ No newline at end of file diff --git a/src/components/Random.jsx b/src/components/Random.jsx new file mode 100644 index 00000000..61be8066 --- /dev/null +++ b/src/components/Random.jsx @@ -0,0 +1,9 @@ +function Random ({min, max}) { + const randNumber = Math.floor(Math.random() * max + min); + + return ( +
Random value between {min} and {max} ⇒ {randNumber}
+ ) +} + +export default Random; \ No newline at end of file diff --git a/src/components/Rating.jsx b/src/components/Rating.jsx new file mode 100644 index 00000000..e07ed6c3 --- /dev/null +++ b/src/components/Rating.jsx @@ -0,0 +1,12 @@ +function Rating ({children}) { + const ratingValue = parseFloat(children); + const percentage = (ratingValue / 5) * 100; + + return ( +
+ +
+ ) +} + +export default Rating; \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e8..3e3b6a19 100644 --- a/src/index.css +++ b/src/index.css @@ -10,4 +10,4 @@ body { code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; -} +} \ No newline at end of file