From 054dde7138a73f8c4bb2f420cdec460cfb742937 Mon Sep 17 00:00:00 2001 From: natekhchan Date: Mon, 26 Aug 2024 12:00:45 -0700 Subject: [PATCH] done --- .../images => public/img}/dice-empty.png | Bin {src/assets/images => public/img}/dice1.png | Bin {src/assets/images => public/img}/dice2.png | Bin {src/assets/images => public/img}/dice3.png | Bin {src/assets/images => public/img}/dice4.png | Bin {src/assets/images => public/img}/dice5.png | Bin {src/assets/images => public/img}/dice6.png | Bin public/img/mastercard.png | Bin 0 -> 11305 bytes public/img/visa.png | Bin 0 -> 6242 bytes src/App.css | 15 ++ src/App.js | 160 +++++++++++++++--- src/components/BoxColor.css | 20 +++ src/components/BoxColor.js | 36 ++++ src/components/Carousel.css | 26 +++ src/components/Carousel.js | 23 +++ src/components/ClickablePicture.js | 20 +++ src/components/CreditCard.css | 44 +++++ src/components/CreditCard.js | 47 +++++ src/components/Dice.js | 28 +++ src/components/DriverCard.css | 40 +++++ src/components/DriverCard.js | 18 ++ src/components/Greetings.css | 7 + src/components/Greetings.js | 25 +++ src/components/IdCard.css | 24 +++ src/components/IdCard.js | 24 +++ src/components/LikeButton.css | 13 ++ src/components/LikeButton.js | 26 +++ src/components/NumbersTable.css | 25 +++ src/components/NumbersTable.js | 21 +++ src/components/RGBColorPicker.js | 73 ++++++++ src/components/Random.css | 8 + src/components/Random.js | 18 ++ src/components/Rating.css | 5 + src/components/Rating.js | 18 ++ src/components/SingleColorPicker.js | 46 +++++ 35 files changed, 787 insertions(+), 23 deletions(-) rename {src/assets/images => public/img}/dice-empty.png (100%) rename {src/assets/images => public/img}/dice1.png (100%) rename {src/assets/images => public/img}/dice2.png (100%) rename {src/assets/images => public/img}/dice3.png (100%) rename {src/assets/images => public/img}/dice4.png (100%) rename {src/assets/images => public/img}/dice5.png (100%) rename {src/assets/images => public/img}/dice6.png (100%) create mode 100644 public/img/mastercard.png create mode 100644 public/img/visa.png create mode 100644 src/components/BoxColor.css create mode 100644 src/components/BoxColor.js create mode 100644 src/components/Carousel.css create mode 100644 src/components/Carousel.js create mode 100644 src/components/ClickablePicture.js create mode 100644 src/components/CreditCard.css create mode 100644 src/components/CreditCard.js create mode 100644 src/components/Dice.js create mode 100644 src/components/DriverCard.css create mode 100644 src/components/DriverCard.js create mode 100644 src/components/Greetings.css create mode 100644 src/components/Greetings.js create mode 100644 src/components/IdCard.css create mode 100644 src/components/IdCard.js create mode 100644 src/components/LikeButton.css create mode 100644 src/components/LikeButton.js create mode 100644 src/components/NumbersTable.css create mode 100644 src/components/NumbersTable.js create mode 100644 src/components/RGBColorPicker.js create mode 100644 src/components/Random.css create mode 100644 src/components/Random.js create mode 100644 src/components/Rating.css create mode 100644 src/components/Rating.js create mode 100644 src/components/SingleColorPicker.js diff --git a/src/assets/images/dice-empty.png b/public/img/dice-empty.png similarity index 100% rename from src/assets/images/dice-empty.png rename to public/img/dice-empty.png diff --git a/src/assets/images/dice1.png b/public/img/dice1.png similarity index 100% rename from src/assets/images/dice1.png rename to public/img/dice1.png diff --git a/src/assets/images/dice2.png b/public/img/dice2.png similarity index 100% rename from src/assets/images/dice2.png rename to public/img/dice2.png diff --git a/src/assets/images/dice3.png b/public/img/dice3.png similarity index 100% rename from src/assets/images/dice3.png rename to public/img/dice3.png diff --git a/src/assets/images/dice4.png b/public/img/dice4.png similarity index 100% rename from src/assets/images/dice4.png rename to public/img/dice4.png diff --git a/src/assets/images/dice5.png b/public/img/dice5.png similarity index 100% rename from src/assets/images/dice5.png rename to public/img/dice5.png diff --git a/src/assets/images/dice6.png b/public/img/dice6.png similarity index 100% rename from src/assets/images/dice6.png rename to public/img/dice6.png diff --git a/public/img/mastercard.png b/public/img/mastercard.png new file mode 100644 index 0000000000000000000000000000000000000000..8f5ddb040a31e9b745a139aa2bf8310efef4a43a GIT binary patch literal 11305 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 literal 0 HcmV?d00001 diff --git a/public/img/visa.png b/public/img/visa.png new file mode 100644 index 0000000000000000000000000000000000000000..3bac7e329c3f5141ca6af299353c6fa72bc4bf56 GIT binary patch literal 6242 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 literal 0 HcmV?d00001 diff --git a/src/App.css b/src/App.css index 74b5e05..5edb228 100644 --- a/src/App.css +++ b/src/App.css @@ -36,3 +36,18 @@ transform: rotate(360deg); } } + +.credit-card-container { + display: flex; + justify-content: center; /* Center the cards horizontally */ + gap: 20px; /* Optional: Add space between the cards */ + margin-top: 20px; /* Optional: Add some space above the card container */ +} + +.driver-cards { + text-align: center; +} + +.rgb-color-picker-container { + text-align: center; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..8bf6afe 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,139 @@ -import logo from './logo.svg'; -import './App.css'; + 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'; + import LikeButton from './components/LikeButton'; + import ClickablePicture from './components/ClickablePicture'; + import maxence from './assets/images/maxence.png'; + import maxenceGlasses from './assets/images/maxence-glasses.png'; + import Dice from './components/Dice'; + import Carousel from './components/Carousel'; + import NumbersTable from './components/NumbersTable'; + import RGBColorPicker from './components/RGBColorPicker'; // Import the RGBColorPicker -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); -} -export default App; + function App() { + return ( +
+
+ + +
+
+ Ludwig + François + + + + +
+
+ + + +
+
+ 0 + 1.49 + 1.5 + 3 + 4 + 5 +
+
+ + + +
+
+ + +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+
+
+ ); + } + + export default App; diff --git a/src/components/BoxColor.css b/src/components/BoxColor.css new file mode 100644 index 0000000..3aa3494 --- /dev/null +++ b/src/components/BoxColor.css @@ -0,0 +1,20 @@ +.box-color { + width: 80%; /* Adjust width as needed */ + height: 150px; /* Adjust height as needed */ + display: flex; + align-items: center; + flex-direction: column; /* Stack text vertically */ + justify-content: center; + color: white; + font-family: Arial, sans-serif; + border: 2px solid black; /* Optional: border to define the box */ + margin-bottom: 20px; + margin-left: 10px; + } + + .box-color p { + margin: 0; + font-size: 30px; + /* Optional: adjust spacing between lines */ + line-height: 1.5; + } \ No newline at end of file diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js new file mode 100644 index 0000000..b14b379 --- /dev/null +++ b/src/components/BoxColor.js @@ -0,0 +1,36 @@ +import React from 'react'; +import './BoxColor.css'; + +// Function to convert RGB to Hex +const rgbToHex = (r, g, b) => { + const toHex = (num) => { + const hex = num.toString(16); + return hex.length === 1 ? '0' + hex : hex; + }; + return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toLowerCase(); + }; + +const BoxColor = ({ r, g, b }) => { + // Ensure the values are within the valid range + const clampedR = Math.max(0, Math.min(255, r)); + const clampedG = Math.max(0, Math.min(255, g)); + const clampedB = Math.max(0, Math.min(255, b)); + + // Create the RGB color string + const rgbColor = `rgb(${clampedR}, ${clampedG}, ${clampedB})`; + + // Create the Hex color string + const hexColor = rgbToHex(clampedR, clampedG, clampedB); + + // Determine text color based on the RGB value + const textColor = (clampedR === 128 && clampedG === 255 && clampedB === 0) ? 'black' : 'white'; + + return ( +
+

{rgbColor}

+

{hexColor}

+
+ ); +}; + +export default BoxColor; \ No newline at end of file diff --git a/src/components/Carousel.css b/src/components/Carousel.css new file mode 100644 index 0000000..6dd70ec --- /dev/null +++ b/src/components/Carousel.css @@ -0,0 +1,26 @@ +.carousel { + display: flex; + align-items: center; + justify-content: center; + position: relative; + } + + .carousel-image { + width: 300px; + height: 200px; + object-fit: cover; + margin: 0 10px; + } + + .carousel-button { + background-color: #007bff; + color: white; + border: none; + padding: 10px; + cursor: pointer; + } + + .carousel-button:hover { + background-color: #0056b3; + } + \ No newline at end of file diff --git a/src/components/Carousel.js b/src/components/Carousel.js new file mode 100644 index 0000000..bae1914 --- /dev/null +++ b/src/components/Carousel.js @@ -0,0 +1,23 @@ +import React, { useState } from 'react'; + +const Carousel = ({ images }) => { + const [currentIndex, setCurrentIndex] = useState(0); + + const goToPrevious = () => { + setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length); + }; + + const goToNext = () => { + setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); + }; + + return ( +
+ + carousel + +
+ ); +}; + +export default Carousel; \ No newline at end of file diff --git a/src/components/ClickablePicture.js b/src/components/ClickablePicture.js new file mode 100644 index 0000000..310eb38 --- /dev/null +++ b/src/components/ClickablePicture.js @@ -0,0 +1,20 @@ +import React, { useState } from 'react'; + +const ClickablePicture = ({ img, imgClicked }) => { + const [isClicked, setIsClicked] = useState(false); + + const handleClick = () => { + setIsClicked(!isClicked); + }; + + return ( + Clickable + ); +}; + +export default ClickablePicture; diff --git a/src/components/CreditCard.css b/src/components/CreditCard.css new file mode 100644 index 0000000..5467358 --- /dev/null +++ b/src/components/CreditCard.css @@ -0,0 +1,44 @@ +.credit-card { + width: 300px; + height: 130px; + border-radius: 10px; + padding: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + font-family: Arial, sans-serif; + margin: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.card-logo { + display: flex; + justify-content: flex-end; +} + +.card-logo img { + margin-top: -15px; + width: 50px; + height: auto; +} + +.card-number { + font-size: 30px; + letter-spacing: 2px; + margin-top: -28px; +} + +.card-info { + font-size: 14px; + text-align: left; +} + +.bank { + margin-left: 30px; +} + +.owner { + display: flex; + margin-top: 20px; /* Optional: Adjust the spacing above the owner text */ + font-size: 14px; +} \ No newline at end of file diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js new file mode 100644 index 0000000..7042f09 --- /dev/null +++ b/src/components/CreditCard.js @@ -0,0 +1,47 @@ +import React from 'react'; +import './CreditCard.css'; + +const CreditCard = ({ + type, + number, + expirationMonth, + expirationYear, + bank, + owner, + bgColor, + color, +}) => { + // Format the credit card number to show only the last 4 digits + const lastFourDigits = number.slice(-4); + + // Format the expiration month to always be two digits (e.g., '03' for March) + const formattedMonth = expirationMonth.toString().padStart(2, '0'); + + // Determine the credit card type logo + const cardLogo = type === 'Visa' ? '/img/visa.png' : '/img/mastercard.png'; + + return ( +
+
+ {`${type} +
+
+

•••• •••• •••• {lastFourDigits}

+
+
+ + Expires {formattedMonth}/{expirationYear} + + + {bank} + + +
+ {owner} + +
+
+ ); +}; + +export default CreditCard; diff --git a/src/components/Dice.js b/src/components/Dice.js new file mode 100644 index 0000000..1b5f604 --- /dev/null +++ b/src/components/Dice.js @@ -0,0 +1,28 @@ +import React, { useState } from 'react'; + +const Dice = () => { + // State to keep track of the current dice image + const [diceImage, setDiceImage] = useState('/img/dice3.png'); + + const rollDice = () => { + // Set the dice to the empty image + setDiceImage('/img/dice-empty.png'); + + // After 1 second, change the image to a random dice image + setTimeout(() => { + const randomDiceValue = Math.floor(Math.random() * 6) + 1; + setDiceImage(`/img/dice${randomDiceValue}.png`); + }, 1000); + }; + + return ( + dice + ); +}; + +export default Dice; diff --git a/src/components/DriverCard.css b/src/components/DriverCard.css new file mode 100644 index 0000000..9024aa1 --- /dev/null +++ b/src/components/DriverCard.css @@ -0,0 +1,40 @@ +.driver-card { + display: flex; + align-items: center; + justify-content: flex-start; /* Keeps items in their natural flow */ + background-color: #455eb5; + color: white; + border-radius: 10px; + padding: 20px; + width: 700px; + margin: 20px auto; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding-left: 400px; + } + + .driver-img { + width: 100px; + height: 100px; + border-radius: 50%; + object-fit: cover; + margin-right: 20px; + } + + .driver-info { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; /* Vertically centers the text within the info section */ + } + + .driver-info h2 { + margin: 0; + font-size: 24px; + text-align: left; + } + + .driver-info p { + margin: -5px 0 0; + font-size: 16px; + text-align: left; + } \ No newline at end of file diff --git a/src/components/DriverCard.js b/src/components/DriverCard.js new file mode 100644 index 0000000..63e0e6c --- /dev/null +++ b/src/components/DriverCard.js @@ -0,0 +1,18 @@ +import React from 'react'; +import './DriverCard.css'; +import Rating from './Rating'; + +const DriverCard = ({ name, rating, img, car }) => { + return ( +
+ {name} +
+

{name}

+ {rating} {/* Pass the prop to indicate it's within DriverCard */} +

{car.model} - {car.licensePlate}

+
+
+ ); +}; + +export default DriverCard; \ No newline at end of file diff --git a/src/components/Greetings.css b/src/components/Greetings.css new file mode 100644 index 0000000..1201755 --- /dev/null +++ b/src/components/Greetings.css @@ -0,0 +1,7 @@ +.greetings { + font-size: 35px; + text-align: left; + border: 2px solid black; + margin: 10px 10px; + padding: 6px 4px; +} \ No newline at end of file diff --git a/src/components/Greetings.js b/src/components/Greetings.js new file mode 100644 index 0000000..4ff426a --- /dev/null +++ b/src/components/Greetings.js @@ -0,0 +1,25 @@ +import React from 'react'; +import './Greetings.css'; + +function Greetings(props) { + const { lang, children } = props; + + // Map language codes to greetings + const greetings = { + de: 'Hallo', + en: 'Hello', + es: 'Hola', + fr: 'Bonjour', + }; + + // Get the appropriate greeting based on the lang prop + const greetingText = greetings[lang] || 'Hello'; // Default to 'Hello' if lang is not recognized + + return ( +
+ {greetingText} {children} +
+ ); +} + +export default Greetings; \ No newline at end of file diff --git a/src/components/IdCard.css b/src/components/IdCard.css new file mode 100644 index 0000000..baa07bc --- /dev/null +++ b/src/components/IdCard.css @@ -0,0 +1,24 @@ +.id-card { + display: flex; + align-items: center; + border: 2px solid black; + padding: 3px 7px; + margin: 10px 10px; +} + +.id-card img { + margin-right: 20px; + padding-top: 5px; + padding-bottom: 5px; +} + +.id-card-details { + margin-top: -30px; /* Apply the negative margin to the container */ +} + +.id-card-details p { + margin-left: -15px; + text-align: left; + line-height: 5px; + font-weight:500 +} \ No newline at end of file diff --git a/src/components/IdCard.js b/src/components/IdCard.js new file mode 100644 index 0000000..bc88353 --- /dev/null +++ b/src/components/IdCard.js @@ -0,0 +1,24 @@ +import React from 'react'; +import './IdCard.css'; + +function IdCard(props) { + const { lastName, firstName, gender, height, birth, picture } = props; + + // Format the birth date without timezone restrictions and remove commas + let formattedBirthDate = birth.toDateString().replace(/,/g, ''); // Format and remove commas + + return ( +
+ {`${firstName} +
+

First name: {firstName}

+

Last name: {lastName}

+

Gender: {gender}

+

Height: {(height / 100).toFixed(2)} m

+

Birth: {formattedBirthDate}

+
+
+ ); +} + +export default IdCard; \ No newline at end of file diff --git a/src/components/LikeButton.css b/src/components/LikeButton.css new file mode 100644 index 0000000..b211b54 --- /dev/null +++ b/src/components/LikeButton.css @@ -0,0 +1,13 @@ +.like-button { + padding: 10px 20px; + margin-right: 10px; + font-size: 18px; + color: white; + border: none; + cursor: pointer; + transition: background-color 0.3s ease; + } + + .like-button:hover { + opacity: 0.8; + } \ No newline at end of file diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js new file mode 100644 index 0000000..89406b6 --- /dev/null +++ b/src/components/LikeButton.js @@ -0,0 +1,26 @@ +import React, { useState } from 'react'; +import './LikeButton.css'; + +const LikeButton = () => { + const [likes, setLikes] = useState(0); + const [colorIndex, setColorIndex] = useState(0); + + const colors = ['purple', 'blue', 'green', 'yellow', 'orange', 'red']; + + const handleClick = () => { + setLikes(likes + 1); + setColorIndex((colorIndex + 1) % colors.length); + }; + + return ( + + ); +}; + +export default LikeButton; \ No newline at end of file diff --git a/src/components/NumbersTable.css b/src/components/NumbersTable.css new file mode 100644 index 0000000..bd1c98d --- /dev/null +++ b/src/components/NumbersTable.css @@ -0,0 +1,25 @@ +.numbers-table { + display: grid; + grid-template-columns: repeat(5, 52px); /* 5 columns */ + grid-template-rows: repeat(3, 52px); /* 3 rows */ + gap: 0px; /* Space between numbers */ +} + +.number { + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + border: 2px solid black; + font-size: 18px; + font-weight: 500; +} + +.even { + background-color: red; +} + +.odd { + color: black; +} \ No newline at end of file diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js new file mode 100644 index 0000000..e3c9bb7 --- /dev/null +++ b/src/components/NumbersTable.js @@ -0,0 +1,21 @@ +import React from 'react'; +import './NumbersTable.css'; // Make sure to create and import this CSS file + +const NumbersTable = ({ limit }) => { + const numbers = Array.from({ length: limit }, (_, i) => i + 1); + + return ( +
+ {numbers.map((number) => ( +
+ {number} +
+ ))} +
+ ); +}; + +export default NumbersTable; \ No newline at end of file diff --git a/src/components/RGBColorPicker.js b/src/components/RGBColorPicker.js new file mode 100644 index 0000000..d47351d --- /dev/null +++ b/src/components/RGBColorPicker.js @@ -0,0 +1,73 @@ +import React, { useState } from 'react'; +import SingleColorPicker from './SingleColorPicker'; + +const RGBColorPicker = () => { + const [rValue, setRValue] = useState(0); + const [gValue, setGValue] = useState(0); + const [bValue, setBValue] = useState(0); + + return ( +
+
+ setRValue(Number(value))} + /> + setGValue(Number(value))} + /> + setBValue(Number(value))} + /> +
+ +
+
+
+ rgb({rValue},{gValue},{bValue}) +
+
+
+ ); +}; + +const styles = { + container: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + paddingTop: '100px', + }, + pickersContainer: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + marginBottom: '20px', + }, + colorAndText: { + display: 'flex', + alignItems: 'center', + }, +}; + +export default RGBColorPicker; \ No newline at end of file diff --git a/src/components/Random.css b/src/components/Random.css new file mode 100644 index 0000000..a16655a --- /dev/null +++ b/src/components/Random.css @@ -0,0 +1,8 @@ +.random +{ + font-size: 35px; + text-align: left; + border: 2px solid black; + margin: 10px 10px; + padding: 6px 4px; +} diff --git a/src/components/Random.js b/src/components/Random.js new file mode 100644 index 0000000..9a1f537 --- /dev/null +++ b/src/components/Random.js @@ -0,0 +1,18 @@ +import React from 'react'; +import './Rating.css'; + +const Rating = ({ children, isDriverCard }) => { + const roundedRating = Math.round(children); + const stars = '★'.repeat(roundedRating) + '☆'.repeat(5 - roundedRating); + + const textColor = isDriverCard ? 'white' : 'black'; // Conditionally set the text color + const textAlign = isDriverCard ? 'left' : 'center'; // Conditionally set the text-align + + return ( +
+ {stars} +
+ ); +}; + +export default Rating; \ No newline at end of file diff --git a/src/components/Rating.css b/src/components/Rating.css new file mode 100644 index 0000000..45bbe5f --- /dev/null +++ b/src/components/Rating.css @@ -0,0 +1,5 @@ +.rating { + font-size: 24px; /* Adjust the size of the stars */ + color: black; /* Color for the filled stars */ + } + diff --git a/src/components/Rating.js b/src/components/Rating.js new file mode 100644 index 0000000..b590053 --- /dev/null +++ b/src/components/Rating.js @@ -0,0 +1,18 @@ +import React from 'react'; +import './Rating.css'; + +const Rating = ({ children, isDriverCard }) => { + const roundedRating = Math.round(children); + const stars = '★'.repeat(roundedRating) + '☆'.repeat(5 - roundedRating); + + const textColor = isDriverCard ? 'white' : 'black'; // Conditionally set the text color + const textAlign = isDriverCard ? 'left' : 'center'; // Conditionally set the text-align + + return ( +
+ {stars} +
+ ); +}; + +export default Rating; \ No newline at end of file diff --git a/src/components/SingleColorPicker.js b/src/components/SingleColorPicker.js new file mode 100644 index 0000000..5554bb8 --- /dev/null +++ b/src/components/SingleColorPicker.js @@ -0,0 +1,46 @@ +import React from 'react'; + +const SingleColorPicker = ({ color, value, onChange }) => { + const handleInputChange = (e) => { + onChange(e.target.value); + }; + + const getColorLabel = (color) => { + switch (color) { + case 'r': + return 'R:'; + case 'g': + return 'G:'; + case 'b': + return 'B:'; + default: + return ''; + } + }; + + return ( +
+
+ + +
+ ); +}; + +export default SingleColorPicker;