diff --git a/src/App.css b/src/App.css index 74b5e05..808cc83 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,6 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; +#ccards { display: flex; - flex-direction: column; - align-items: center; + flex-direction: row; justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + gap: 20px; } diff --git a/src/App.js b/src/App.js index 3784575..88738ba 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,125 @@ -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 Dice from "./components/Dice"; +import Carousel from "./components/Carousel"; +import NumbersTable from "./components/NumbersTable"; +import RGBColorPicker from "./components/RGBColorPicker"; function App() { return (
-
- logo -

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

- - Learn React - -
+ + + Ludwig + François + + + + +
+ + + + +
+ 0 + + 1.49 + + 1.5 + + 3 + + 4 + + 5 + + + + +
+ +
+ +
+ + +
); } diff --git a/src/assets/images/master-card-copy.svg b/src/assets/images/master-card-copy.svg new file mode 100644 index 0000000..c6fd813 --- /dev/null +++ b/src/assets/images/master-card-copy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/BoxColor.css b/src/components/BoxColor.css new file mode 100644 index 0000000..386fc8b --- /dev/null +++ b/src/components/BoxColor.css @@ -0,0 +1,12 @@ +#cbox { + border: 3px solid black; + padding: 40px; + font-size: 25px; + margin: 10px auto; + width: 50%; + color: #ffffff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js new file mode 100644 index 0000000..fa479ad --- /dev/null +++ b/src/components/BoxColor.js @@ -0,0 +1,15 @@ +import "./BoxColor.css"; + +function BoxColor({ r, g, b }) { + let rgbValue = `rgb(${r}, ${g}, ${b})`; + let hexValue = + "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join(""); + return ( +
+
{rgbValue}
+
{hexValue}
+
+ ); +} + +export default BoxColor; diff --git a/src/components/Carousel.css b/src/components/Carousel.css new file mode 100644 index 0000000..a5bbac7 --- /dev/null +++ b/src/components/Carousel.css @@ -0,0 +1,6 @@ +#carousel { + display: flex; + flex-direction: row; + justify-content: center; + margin: 10px; +} diff --git a/src/components/Carousel.js b/src/components/Carousel.js new file mode 100644 index 0000000..dd08995 --- /dev/null +++ b/src/components/Carousel.js @@ -0,0 +1,30 @@ +import { useState } from "react"; +import "./Carousel.css"; + +function Carousel({ images }) { + let imgArray = [...images]; + const [pic, setPic] = useState(0); + function handleLeftClick() { + if (pic === 0) { + setPic(imgArray.length - 1); + } else { + setPic(pic - 1); + } + } + function handleRightClick() { + if (pic === imgArray.length - 1) { + setPic(0); + } else { + setPic(pic + 1); + } + } + return ( + + ); +} + +export default Carousel; diff --git a/src/components/ClickablePicture.js b/src/components/ClickablePicture.js new file mode 100644 index 0000000..2337171 --- /dev/null +++ b/src/components/ClickablePicture.js @@ -0,0 +1,20 @@ +import { useState } from "react"; + +function ClickablePicture(props) { + const [glass, setGlass] = useState(false); + let pic = props.img.slice(props.img.lastIndexOf("/") + 1); + let picClicked = props.imgClicked.slice( + props.imgClicked.lastIndexOf("/") + 1 + ); + let source = glass ? picClicked : pic; + return ( + glasses setGlass(!glass)} + style={{ cursor: "pointer" }} + /> + ); +} + +export default ClickablePicture; diff --git a/src/components/CreditCard.css b/src/components/CreditCard.css new file mode 100644 index 0000000..2ecce22 --- /dev/null +++ b/src/components/CreditCard.css @@ -0,0 +1,26 @@ +#ccbox { + width: 250px; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 15px; + border-radius: 10px; + gap: 8px; +} + +#cnumber { + font-size: 30px; + align-self: center; +} + +#ccbox img { + align-self: flex-end; +} + +#cdetails { + font-size: 15px; +} + +#cdetails span { + margin-left: 15px; +} diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js new file mode 100644 index 0000000..b80244b --- /dev/null +++ b/src/components/CreditCard.js @@ -0,0 +1,43 @@ +import "./CreditCard.css"; +import logo from "../assets/images/visa.png"; +import icon from "../assets/images/master-card-copy.svg"; + +function CreditCard({ + type, + number, + expirationMonth, + expirationYear, + bank, + owner, + bgColor, + color, +}) { + let cardStyle = { background: bgColor, color: color }; + let month = expirationMonth.toString().padStart(2, "0"); + let year = expirationYear.toString().slice(-2); + let maskNumber = number.slice(-4).padStart(number.length, "•"); + let cardNumber = + maskNumber.slice(0, 4) + + " " + + maskNumber.slice(4, 8) + + " " + + maskNumber.slice(8, 12) + + " " + + maskNumber.slice(12, 16); + return ( +
+ {type} +
{cardNumber}
+
+
+ {" "} + Expires {month}/{year} + {bank} +
+
{owner}
+
+
+ ); +} + +export default CreditCard; diff --git a/src/components/Dice.js b/src/components/Dice.js new file mode 100644 index 0000000..3bc8db4 --- /dev/null +++ b/src/components/Dice.js @@ -0,0 +1,20 @@ +import { useState } from "react"; + +function Dice() { + let randomDice = Math.floor(Math.random() * 6) + 1; + const [dice, setDice] = useState(randomDice); + function handleClick() { + setDice("-empty"); + setTimeout(() => setDice(randomDice), 1000); + } + return ( + dice + ); +} + +export default Dice; diff --git a/src/components/DriverCard.css b/src/components/DriverCard.css new file mode 100644 index 0000000..cf43ac2 --- /dev/null +++ b/src/components/DriverCard.css @@ -0,0 +1,41 @@ +#dbox { + background-color: #455eb5; + color: #ffffff; + border-radius: 10px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 10px; + padding: 20px; + width: 50%; + margin: 10px auto; +} + +#dbox img { + width: 145px; + height: auto; + position: relative; + right: 23px; +} + +#dimg { + width: 100px; + height: 100px; + border-radius: 50%; + overflow: hidden; +} + +#dname { + font-size: 21px; + font-weight: 700; +} + +#drating { + font-size: 29px; +} + +#dcar { + font-weight: 300; + font-size: 16px; +} diff --git a/src/components/DriverCard.js b/src/components/DriverCard.js new file mode 100644 index 0000000..359c1bb --- /dev/null +++ b/src/components/DriverCard.js @@ -0,0 +1,21 @@ +import "./DriverCard.css"; + +function DriverCard({ name, rating, img, car }) { + let displayRating = "★".repeat(Math.round(rating)).padEnd(5, "☆"); + return ( +
+
+ Driver DP +
+
+
{name}
+
{displayRating}
+
+ {car.model} - {car.licensePlate} +
+
+
+ ); +} + +export default DriverCard; diff --git a/src/components/Greetings.css b/src/components/Greetings.css new file mode 100644 index 0000000..d213d1d --- /dev/null +++ b/src/components/Greetings.css @@ -0,0 +1,8 @@ +#gbox { + border: 3px solid black; + padding: 4px; + font-weight: 500; + font-size: 20px; + margin: 10px auto; + width: 50%; +} diff --git a/src/components/Greetings.js b/src/components/Greetings.js new file mode 100644 index 0000000..5ad0115 --- /dev/null +++ b/src/components/Greetings.js @@ -0,0 +1,19 @@ +import "./Greetings.css"; + +const langGreet = { + de: "Hallo", + es: "Hola", + fr: "Bonjour", + en: "Hello", +}; + +function Greetings({ lang, children }) { + let greet = langGreet[lang]; + return ( +
+ {greet} {children} +
+ ); +} + +export default Greetings; diff --git a/src/components/IdCard.css b/src/components/IdCard.css new file mode 100644 index 0000000..04d20fe --- /dev/null +++ b/src/components/IdCard.css @@ -0,0 +1,9 @@ +#card { + border: 2px solid black; + display: flex; + flex-direction: row; + gap: 4px; + padding: 4px; + margin: 10px auto; + width: 50%; +} diff --git a/src/components/IdCard.js b/src/components/IdCard.js new file mode 100644 index 0000000..06fb746 --- /dev/null +++ b/src/components/IdCard.js @@ -0,0 +1,35 @@ +import "./IdCard.css"; + +function IdCard({ lastName, firstName, gender, height, birth, picture }) { + let heightM = `${height / 100}m`; + let dob = birth.toDateString(); + return ( +
+ imae +
+
+ First Name + : {firstName} +
+
+ Last Name + : {lastName} +
+
+ Gender + : {gender} +
+
+ Height + : {heightM} +
+
+ Birth + : {dob} +
+
+
+ ); +} + +export default IdCard; diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js new file mode 100644 index 0000000..823219c --- /dev/null +++ b/src/components/LikeButton.js @@ -0,0 +1,26 @@ +import { useState } from "react"; + +const colors = ["purple", "blue", "green", "yellow", "orange", "red"]; +function LikeButton() { + const [count, setCount] = useState(0); + const [index, setIndex] = useState(0); + + function handleClick() { + setCount(count + 1); + setIndex((index + 1) % colors.length); + } + return ( + + ); +} + +export default LikeButton; diff --git a/src/components/NumbersTable.css b/src/components/NumbersTable.css new file mode 100644 index 0000000..2a9cfee --- /dev/null +++ b/src/components/NumbersTable.css @@ -0,0 +1,27 @@ +#table { + font-size: 35px; + font-weight: 500; + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; +} + +.white-box { + width: 100px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; + border: 3px solid black; +} + +.red-box { + background-color: #ff0000; + width: 100px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; + border: 3px solid black; +} diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js new file mode 100644 index 0000000..325b76a --- /dev/null +++ b/src/components/NumbersTable.js @@ -0,0 +1,15 @@ +import "./NumbersTable.css"; + +function NumbersTable({ limit }) { + let numOfBoxes = [...Array(limit).keys()].map((i) => i + 1); + let listBoxes = numOfBoxes.map((num) => ( +
+ {num} +
+ )); + return
{listBoxes}
; +} +export default NumbersTable; diff --git a/src/components/RGBColorPicker.css b/src/components/RGBColorPicker.css new file mode 100644 index 0000000..8d44fa1 --- /dev/null +++ b/src/components/RGBColorPicker.css @@ -0,0 +1,19 @@ +.rgb-box { + width: 50px; + height: 50px; + border: 3px solid black; +} + +#color-picker { + font-weight: 500; + font-size: 16px; + margin: 20px; +} + +.single-set { + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + margin-top: 10px; +} diff --git a/src/components/RGBColorPicker.js b/src/components/RGBColorPicker.js new file mode 100644 index 0000000..ea177aa --- /dev/null +++ b/src/components/RGBColorPicker.js @@ -0,0 +1,74 @@ +import { useState } from "react"; +import "./RGBColorPicker.css"; + +function RGBColorPicker() { + let [rValue, setRValue] = useState(255); + let [gValue, setGValue] = useState(255); + let [bValue, setBValue] = useState(255); + function handleRValue(e) { + setRValue(e.target.value); + } + function handleGValue(e) { + setGValue(e.target.value); + } + function handleBValue(e) { + setBValue(e.target.value); + } + return ( +
+
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
+
{`rgb(${rValue},${gValue},${bValue})`}
+
+
+ ); +} + +function SingleColorPicker({ color, value, onChange }) { + return ( +
+ + +
+ ); +} + +export default RGBColorPicker; diff --git a/src/components/Random.css b/src/components/Random.css new file mode 100644 index 0000000..6750312 --- /dev/null +++ b/src/components/Random.css @@ -0,0 +1,8 @@ +#rbox { + border: 3px solid black; + padding: 4px; + font-weight: 500; + font-size: 20px; + margin: 10px auto; + width: 50%; +} diff --git a/src/components/Random.js b/src/components/Random.js new file mode 100644 index 0000000..e270ab3 --- /dev/null +++ b/src/components/Random.js @@ -0,0 +1,12 @@ +import "./Random.css"; + +function Random({ min, max }) { + let randomNumber = Math.floor(Math.random() * (max - min)) + min; + return ( +
+ Random value between {min} and {max} {"=>"} {randomNumber}{" "} +
+ ); +} + +export default Random; diff --git a/src/components/Rating.js b/src/components/Rating.js new file mode 100644 index 0000000..bb64c39 --- /dev/null +++ b/src/components/Rating.js @@ -0,0 +1,9 @@ +function Rating({ children }) { + let rating = Math.round(Number(children)); + let displayRating = "★".repeat(rating).padEnd(5, "☆"); + return ( +
{displayRating}
+ ); +} + +export default Rating;