diff --git a/src/App.css b/src/App.css index 74b5e05..0b8a610 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,196 @@ .App { text-align: center; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } -.App-logo { - height: 40vmin; - pointer-events: none; +.idCard-container{ + width: 600px; + height: 150px; + border: 1px solid black; + display: flex; + padding: 10px; + gap: 50px; + margin-top: 10px; + margin-left: 10px; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } + +.idCard-container img { + height: 150px; } -.App-header { - background-color: #282c34; - min-height: 100vh; +.idCard-container .text{ + text-align: left; display: flex; flex-direction: column; - align-items: center; + gap: 10px; +} + +.greeting-container { + width: 600px; + height: fit-content; + border: 1px solid black; + margin-top: 10px; + margin-left: 10px; +} + +.random-container{ + width: 600px; + height: fit-content; + border: 1px solid black; + margin-top: 10px; +} + + +.box-container{ + margin-top: 10px; + color: white; + text-align: center; + font-size: 1.5rem; +} + +.creditCard-container { + margin-top: 10px; + border-radius: 10px; + display: flex; + flex-direction: column; + padding: 15px; +} + +.card-logo { + align-self: flex-end; +} + +.logo-img { + width: 60px; + height: 30px; +} + +.card-number { + font-size: 2rem; + margin-top: 10px; + margin-bottom: 20px; +} + +.card-info { + font-size: 0.95rem; + align-self: flex-start; +} + +.expiry { + margin-right: 40px; +} + +.card-info .name { + margin-left: -30px; + font-size: 1.05rem; +} + +.rating-container { + font-size: 2rem; +} + + +.driver-card { + margin-top: 10px; + border-radius: 10px; + display: flex; + width: 700px; + height: 150px; + background-color: #365AB1; justify-content: center; - font-size: calc(10px + 2vmin); + align-items: center; + color: white; + gap: 10px; +} + +.driver-img img { + width: 100px; + height: 100px; + border-radius: 50%; +} + +.driver-info { + display: flex; + flex-direction: column; + text-align: left; +} + +.driver-info h1 { + font-size: 1.5rem; + margin-bottom: 5px; +} + +.driver-info p { + margin-top: 5px; +} + + +.like-button { + width: 170px; + height: 70px; + margin-top: 10px; + border: none; + border-radius: 10px; color: white; } -.App-link { - color: #61dafb; +.dice-img { + margin-top: 20px; + width: 300px; + height: 300px; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.carousel-container { + display: flex; + align-items: center; + justify-content: space-between; + gap: 30px; + margin: 20px; } + + +.numbers-table { + margin-top: 21px; + justify-content: center; + display: grid; + grid-template-columns: repeat(5, 52px); + grid-template-rows: repeat(3, 52px); + gap: 0px; +} + +.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; +} + +.single-color-picker, +.result-box { + display: flex; + align-items: center; + margin-bottom: 10px; +} + +.color-box { + width: 50px; + height: 50px; + border: 1px solid black; + margin-right: 10px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..fe64a6d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,147 @@ -import logo from './logo.svg'; 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 Ratings from './components/Ratings'; +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 + Riyaz + Santiago + + + + + + + + + + + + + 0 + + 1.49 + + 1.5 + + 3 + + 4 + + 5 + + + + + + + + + + + + + + + + + + + + +
+ + ); } diff --git a/src/assets/images/mastercard.png b/src/assets/images/mastercard.png new file mode 100644 index 0000000..dc923d0 Binary files /dev/null and b/src/assets/images/mastercard.png differ diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js new file mode 100644 index 0000000..77ef2aa --- /dev/null +++ b/src/components/BoxColor.js @@ -0,0 +1,25 @@ +import React from "react"; + +function BoxColor(props){ + let color = 'rgb(${props.r},${props.g},${props.b})'; + const componentToHex= (c)=>{ + const hex = c.toString(16); + return hex.length === 1 ? "0" + hex : hex; + +}; + +const rgbToHex = (r,g,b)=>{ + return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); +} + +console.log(rgbToHex(props.r,props.g,props.b)); +return( +
+

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

+

{rgbToHex(props.r,props.g,props.b)}

+
+ +); +} + +export default BoxColor; diff --git a/src/components/Carousel.js b/src/components/Carousel.js new file mode 100644 index 0000000..abf74d3 --- /dev/null +++ b/src/components/Carousel.js @@ -0,0 +1,25 @@ +import React from "react"; +import { useState } from "react"; + +function Carousel(props) { + const [currentSlide, setCurrentSlide] = useState(0); + + const leftHandler = () => { + setCurrentSlide((prevSlide) => prevSlide === 0 ? props.images.length - 1 : prevSlide - 1); + } + + const rightHandler = () => { + setCurrentSlide((prevSlide) => (prevSlide + 1) % props.images.length); + } + return ( +
+ +
+ +
+ +
+ ) +} + +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..8d8439f --- /dev/null +++ b/src/components/ClickablePicture.js @@ -0,0 +1,20 @@ +import React from "react"; +import { useState } from "react"; +import maxence from "../assets/images/maxence.png"; +import maxenceglasses from "../assets/images/maxence-glasses.png"; + + +function ClickablePicture(props) { + const [isClicked, setIsClicked] = useState(false); + + const handleClick = () => { + setIsClicked(!isClicked); + } + return ( +
+ maxence +
+ ) +} + +export default ClickablePicture; \ No newline at end of file diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js new file mode 100644 index 0000000..2d8d017 --- /dev/null +++ b/src/components/CreditCard.js @@ -0,0 +1,27 @@ +import React from "react"; +import visa from '../assets/images/visa.png'; +import mCard from '../assets/images/mastercard.png'; + +function CreditCard(props) { + let cardSrc = (props.type === "Visa") ? visa : mCard; + return ( +
+
+ {props.type} +
+
+
•••• •••• •••• {props.number.slice(-4)}
+
+
+ + Expires {props.expirationMonth}/{props.expirationYear % 100} + {props.bank} +

+ + {props.owner} +
+
+ ) +} + +export default CreditCard; \ No newline at end of file diff --git a/src/components/Dice.js b/src/components/Dice.js new file mode 100644 index 0000000..92aa84f --- /dev/null +++ b/src/components/Dice.js @@ -0,0 +1,29 @@ +import React from "react"; +import { useState } from "react"; +import diceEmpty from "../assets/images/dice-empty.png"; +import dice1 from "../assets/images/dice1.png"; +import dice2 from "../assets/images/dice2.png"; +import dice3 from "../assets/images/dice3.png"; +import dice4 from "../assets/images/dice4.png"; +import dice5 from "../assets/images/dice5.png"; +import dice6 from "../assets/images/dice6.png"; + +function Dice() { + const diceImages = [diceEmpty, dice1, dice2, dice3, dice4, dice5, dice6]; + const randomNumber = Math.floor(Math.random() * 6) + 1; + const [dice, setDice] = useState(diceImages[randomNumber]); + + const handleClick = () => { + setTimeout(() => { + setDice(diceImages[Math.floor(Math.random() * 6) + 1]); + }, 1000); + setDice(diceEmpty); + } + return ( +
+ Dice +
+ ) +} + +export default Dice; \ No newline at end of file diff --git a/src/components/DriverCard.js b/src/components/DriverCard.js new file mode 100644 index 0000000..5f884b7 --- /dev/null +++ b/src/components/DriverCard.js @@ -0,0 +1,19 @@ +import React from "react"; +import Ratings from "./Ratings"; + +function DriverCard(props) { + return ( +
+
+ {props.name} +
+
+

{props.name}

+ {props.rating} +

{props.car.model} - {props.car.licensePlate}

+
+
+ ) +} + +export default DriverCard; \ No newline at end of file diff --git a/src/components/Greetings.js b/src/components/Greetings.js new file mode 100644 index 0000000..e78452e --- /dev/null +++ b/src/components/Greetings.js @@ -0,0 +1,23 @@ +import React from "react"; + +function Greetings(props){ + const languageHello={ + en: "Hello", + fr: "Bonjour", + es: "Hola", + de: "Hallo", + it: "Ciao", + pl: "Salam" + } + + + return ( +
+

{languageHello[props.lang]} {props.children}

+
+ + + ); +} + +export default Greetings; \ No newline at end of file diff --git a/src/components/Idcard.js b/src/components/Idcard.js new file mode 100644 index 0000000..6962dd1 --- /dev/null +++ b/src/components/Idcard.js @@ -0,0 +1,19 @@ +import React from "react"; + +function Idcard(props){ + return( +
+ profile +
+
First Name:{props.firstName}
+
Last Name:{props.lastName}
+
Gender:{props.gender}
+
Height:{props.height / 100}m
+
Birthdate:{props.birth.toDateString()}
+
+
+ + ); +} + +export default Idcard; \ No newline at end of file diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js new file mode 100644 index 0000000..99261a2 --- /dev/null +++ b/src/components/LikeButton.js @@ -0,0 +1,19 @@ +import React from "react"; +import { useState } from "react"; + +function LikeButton() { + const [likes, setLikes] = useState(0); + const colors = ['purple', 'blue', 'green', 'yellow', 'orange', 'red']; + const [color, setColor] = useState('blue'); + + const handleClick = () => { + setLikes(likes + 1); + setColor(colors[Math.floor(Math.random() * colors.length)]); + console.log(color) + } + return ( + + ) +} + +export default LikeButton; \ No newline at end of file diff --git a/src/components/NumbersTable.js b/src/components/NumbersTable.js new file mode 100644 index 0000000..84e6e92 --- /dev/null +++ b/src/components/NumbersTable.js @@ -0,0 +1,19 @@ +import React from "react"; + +function 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..e69de29 diff --git a/src/components/Random.js b/src/components/Random.js new file mode 100644 index 0000000..15e4450 --- /dev/null +++ b/src/components/Random.js @@ -0,0 +1,11 @@ +import React from "react"; + +function Random(props){ + return( +
+

Random Value between {props.min} and {props.max} = {Math.floor(Math.random() * (props.max - props.min))+ props.min}

+
+ ); +} + +export default Random; \ No newline at end of file diff --git a/src/components/Ratings.js b/src/components/Ratings.js new file mode 100644 index 0000000..846c058 --- /dev/null +++ b/src/components/Ratings.js @@ -0,0 +1,11 @@ +import React from "react"; + +function Ratings(props) { + const roundedRatings = Math.floor(props.children); + const stars = "★".repeat(roundedRatings) + "☆".repeat(5 - roundedRatings); + return ( +
{stars}
+ ) +} + +export default Ratings; \ No newline at end of file diff --git a/src/components/SingleColorPicker.js b/src/components/SingleColorPicker.js new file mode 100644 index 0000000..1a69ca6 --- /dev/null +++ b/src/components/SingleColorPicker.js @@ -0,0 +1,16 @@ +import React from "react"; + +function SingleColorPicker(props) { + const handleInputChange = (e) => { + props.onChange(e.target.value); + } + return ( +
+
+ + +
+ ) +} + +export default SingleColorPicker; \ No newline at end of file