diff --git a/package-lock.json b/package-lock.json index da7f366..227e011 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-scripts": "5.0.1", + "react-scripts": "^5.0.1", "web-vitals": "^2.1.4" } }, diff --git a/package.json b/package.json index b8ce5c9..e45ae4c 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-scripts": "5.0.1", + "react-scripts": "^5.0.1", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index 3784575..58cddd0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,144 @@ -import logo from './logo.svg'; + import './App.css'; +import Idcard from './components/Idcard/Idcard'; +import Greetings from './components/Greetings/Greetings'; +import Random from './components/Random/Random'; +import BoxColor from './components/BoxColor/BoxColor'; +import CreditCard from './components/CreditCard/CreditCard'; +import Rating from './components/Rating/Rating'; +import DriverCard from './components/DriverCard/DriverCard'; +import LikeButton from './components/LikeButton/LikeButton'; +import Clickable from './components/Clickable'; + +import img from "./assets/images/maxence.png"; +import imgClicked from "./assets/images/maxence-glasses.png"; +import Dice from './components/Dice'; +import Carousel from './components/Carousel/Carousel'; +import NumbersTable from './components/NumbersTable/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/mastercard.png b/src/assets/images/mastercard.png new file mode 100644 index 0000000..d101624 Binary files /dev/null and b/src/assets/images/mastercard.png differ diff --git a/src/components/BoxColor/BoxColor.css b/src/components/BoxColor/BoxColor.css new file mode 100644 index 0000000..fb7000e --- /dev/null +++ b/src/components/BoxColor/BoxColor.css @@ -0,0 +1,10 @@ +.cbox{ + margin:10px; + padding:30px; + text-align: center; + border:2px solid #000000; + height: 100px; + font-weight:500; + font-size: xx-large; + display: flex; +} \ No newline at end of file diff --git a/src/components/BoxColor/BoxColor.jsx b/src/components/BoxColor/BoxColor.jsx new file mode 100644 index 0000000..5a01aeb --- /dev/null +++ b/src/components/BoxColor/BoxColor.jsx @@ -0,0 +1,15 @@ +import "./BoxColor.css" +function BoxColor(props) +{ + const toHex = (number) => { + let hex = number.toString(16); + return hex.length === 1 ? "0" + hex : hex; + }; + let color='#'+(toHex(props.r))+(toHex(props.g))+(toHex(props.b)) + return
+

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

+

{color}

+
+} + +export default BoxColor \ No newline at end of file diff --git a/src/components/Carousel/Carousel.css b/src/components/Carousel/Carousel.css new file mode 100644 index 0000000..f9c52cf --- /dev/null +++ b/src/components/Carousel/Carousel.css @@ -0,0 +1,12 @@ +.carousel{ + display:flex; + width:100%; + justify-content:center; + align-items:center; +} +.carousel button{ + padding:10px 15px; +} +.carousel img{ + margin:10px; +} \ No newline at end of file diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx new file mode 100644 index 0000000..9234843 --- /dev/null +++ b/src/components/Carousel/Carousel.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import './Carousel.css' + +function Carousel(props) +{ + let arr=props.images + let len=arr.length + const[img_num , setImg]=React.useState(2) + function left() + { + if(img_num===0) + setImg(len-1) + else + setImg((img_num-1)%len) + } + function right() + { + setImg((img_num+1)%len) + } + return
+ + pic + +
+} +export default Carousel \ No newline at end of file diff --git a/src/components/Clickable.jsx b/src/components/Clickable.jsx new file mode 100644 index 0000000..bf7f58e --- /dev/null +++ b/src/components/Clickable.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +function Clickable(props) +{ + const [img,putGlasses]=React.useState(props.img) + function glasses() + { + putGlasses(props.imgClicked) + } + return
+ pic +
+} + +export default Clickable \ No newline at end of file diff --git a/src/components/CreditCard/CreditCard.css b/src/components/CreditCard/CreditCard.css new file mode 100644 index 0000000..025abb2 --- /dev/null +++ b/src/components/CreditCard/CreditCard.css @@ -0,0 +1,16 @@ +.credit{ + width:300px; + border-radius: 10px; + padding:18px; + height: 150px; + + margin:5px; + display: inline-block; +} +.credit > div{ + text-align: right; +} +.credit img{ + width:50px; + +} \ No newline at end of file diff --git a/src/components/CreditCard/CreditCard.jsx b/src/components/CreditCard/CreditCard.jsx new file mode 100644 index 0000000..db4bbdf --- /dev/null +++ b/src/components/CreditCard/CreditCard.jsx @@ -0,0 +1,23 @@ +import './CreditCard.css' +import visa from '../../assets/images/visa.png' +import mastercard from '../../assets/images/mastercard.png' +function CreditCard(props) +{ + const img = props.type === 'Visa' ? visa : mastercard; + let mon=props.expirationMonth + let yr=props.expirationYear%100 + let ex='' + if(mon<10) + ex='0'+mon+'/'+yr + + return
+
+ pic +
+

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

+

Expires {ex} {props.bank}

+

{props.owner}

+
; +} + +export default CreditCard; \ No newline at end of file diff --git a/src/components/Dice.jsx b/src/components/Dice.jsx new file mode 100644 index 0000000..83e9f58 --- /dev/null +++ b/src/components/Dice.jsx @@ -0,0 +1,46 @@ +import dice0 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' + +import React from 'react'; + +function Dice() +{ + const [img, throwDice]=React.useState(dice0) + setInterval(change,1000) + function change() + { + let n=parseInt(Math.random()*6) + switch(n) + { + case 0: + throwDice(dice0) + break; + case 1: + throwDice(dice1) + break; + case 2: + throwDice(dice2) + break; + case 3: + throwDice(dice3) + break; + case 4: + throwDice(dice4) + break; + case 5: + throwDice(dice5) + break; + default : + throwDice(dice6) + break; + } + } + return
dice
+} + +export default Dice \ No newline at end of file diff --git a/src/components/DriverCard/DriverCard.css b/src/components/DriverCard/DriverCard.css new file mode 100644 index 0000000..f5e3333 --- /dev/null +++ b/src/components/DriverCard/DriverCard.css @@ -0,0 +1,17 @@ +.driver{ + display: flex; + width:100%; + border-radius: 10px; + background-color: rgb(68, 118, 255); + justify-content: center; + align-items: center; + padding:25px; + margin:10px; + color: white; +} +.driver img{ + width:100px; + height:100px; + border-radius: 50%; + margin-right: 15px; +} \ No newline at end of file diff --git a/src/components/DriverCard/DriverCard.jsx b/src/components/DriverCard/DriverCard.jsx new file mode 100644 index 0000000..8f81962 --- /dev/null +++ b/src/components/DriverCard/DriverCard.jsx @@ -0,0 +1,18 @@ +import './DriverCard.css' +import Rating from '../Rating/Rating'; +function DriverCard(props) +{ +return
+
+ pic +
+
+

{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/Greetings.css b/src/components/Greetings/Greetings.css new file mode 100644 index 0000000..73d261b --- /dev/null +++ b/src/components/Greetings/Greetings.css @@ -0,0 +1,8 @@ + + .greeting{ + border: 2px solid black; + font-size: 30px; + font-weight: 500; + margin: 10px; + padding: 5px; + } \ No newline at end of file diff --git a/src/components/Greetings/Greetings.jsx b/src/components/Greetings/Greetings.jsx new file mode 100644 index 0000000..2adfeb0 --- /dev/null +++ b/src/components/Greetings/Greetings.jsx @@ -0,0 +1,15 @@ +import "./Greetings.css"; +const Greetings = (props) => { + let text; + if(props.lang === "de"){ + text = "Hallo"; + } else if(props.lang === "fr" || props.lang === "es"){ + text = "Bonjour"; + } + return( + <> +

{text} {props.children}

+ + ); +}; +export default Greetings; \ No newline at end of file diff --git a/src/components/Idcard/Idcard.css b/src/components/Idcard/Idcard.css new file mode 100644 index 0000000..619d830 --- /dev/null +++ b/src/components/Idcard/Idcard.css @@ -0,0 +1,13 @@ +.idcard{ + padding: 5px; + display: flex; + gap: 5px; + border: 2px solid black; + +} + +.text-right{ + text-align: justify; +} + + diff --git a/src/components/Idcard/Idcard.jsx b/src/components/Idcard/Idcard.jsx new file mode 100644 index 0000000..9cdf369 --- /dev/null +++ b/src/components/Idcard/Idcard.jsx @@ -0,0 +1,36 @@ +import React from 'react'; +import "./Idcard.css" + +const Idcard = (props) => { + + + return ( + <> +
+
+ an +
+
+

+ First Name: {props.firstName} +

+

+ Last Name: {props.lastName} +

+

+ Height : {props.height} +

+

+ Gender : {props.gender} +

+ +

+ Birth : {props.birth.toString().slice(0,15)} +

+
+
+ + ); +}; + +export default Idcard; \ No newline at end of file diff --git a/src/components/LikeButton/LikeButton.css b/src/components/LikeButton/LikeButton.css new file mode 100644 index 0000000..1888174 --- /dev/null +++ b/src/components/LikeButton/LikeButton.css @@ -0,0 +1,7 @@ +.btn{ + padding:10px 15px; + font-size: 25px; + margin:20px; + border:5px outset grey; + border-radius: 10px; +} \ No newline at end of file diff --git a/src/components/LikeButton/LikeButton.jsx b/src/components/LikeButton/LikeButton.jsx new file mode 100644 index 0000000..4fa18cc --- /dev/null +++ b/src/components/LikeButton/LikeButton.jsx @@ -0,0 +1,15 @@ +import './LikeButton.css' +import React from 'react'; + +let colors=['purple','blue','green','yellow','orange','red'] +function LikeButton(props) +{ + const [likes,setlikes]=React.useState(0) + function tap() + { + setlikes(likes+1) + } + return +} + +export default LikeButton; \ No newline at end of file diff --git a/src/components/NumbersTable/NumbersTable.css b/src/components/NumbersTable/NumbersTable.css new file mode 100644 index 0000000..a40e293 --- /dev/null +++ b/src/components/NumbersTable/NumbersTable.css @@ -0,0 +1,12 @@ +.even, .odd{ + width:50px; + height:50px; + font-size: 20px; + border:1px solid black; + display:inline-flex; + justify-content: center; + align-items: center; +} +.even{ + background-color: brown; +} \ No newline at end of file diff --git a/src/components/NumbersTable/NumbersTable.jsx b/src/components/NumbersTable/NumbersTable.jsx new file mode 100644 index 0000000..ebde40f --- /dev/null +++ b/src/components/NumbersTable/NumbersTable.jsx @@ -0,0 +1,16 @@ +import './NumbersTable.css' +function NumbersTable(props) +{ + const divs=[] + let i=1; + while(i<=props.limit) + { + if(i%2===0) + divs.push(
{i}
) + else + divs.push(
{i}
) + ++i; + } + return
{divs}
; +} +export default NumbersTable \ No newline at end of file diff --git a/src/components/Random/Random.css b/src/components/Random/Random.css new file mode 100644 index 0000000..ad9b95e --- /dev/null +++ b/src/components/Random/Random.css @@ -0,0 +1,8 @@ +span{ + font-size: 18px; +} +.rnd{ + margin: 10px; + padding: 10px; + border:2px solid black; +} \ No newline at end of file diff --git a/src/components/Random/Random.jsx b/src/components/Random/Random.jsx new file mode 100644 index 0000000..ced0604 --- /dev/null +++ b/src/components/Random/Random.jsx @@ -0,0 +1,10 @@ +import './Random.css' +function Random(props) +{ + let s='=>' + return
+ Random value between {props.min} and {props.max} {s} {props.min+parseInt(Math.random()*(props.max-props.min+1))} +
; +} + +export default Random; \ No newline at end of file diff --git a/src/components/Rating/Rating.jsx b/src/components/Rating/Rating.jsx new file mode 100644 index 0000000..7b10cd7 --- /dev/null +++ b/src/components/Rating/Rating.jsx @@ -0,0 +1,18 @@ +function Rating(props) +{ + let rate=Math.round(props.children) + let s='' + let i=1 + while(i<=rate){ + s+='★' + ++i; + } + while(i<=5){ + s+='☆' + i++; + } + return
+

{s}

+
+} +export default Rating \ No newline at end of file diff --git a/src/components/RgbColorPicker.jsx b/src/components/RgbColorPicker.jsx new file mode 100644 index 0000000..df8855b --- /dev/null +++ b/src/components/RgbColorPicker.jsx @@ -0,0 +1,53 @@ +import SingleColor from "./SingleColor" +import React from 'react'; + +function RGBColorPicker() +{ + const bxStyle={ + width:'50px', + height:'50px', + display:'inline-block', + border:'1px solid black', + } + const container={ + display:'flex', + width:'200px', + padding:'15px 20px', + alignItems:'center', + } + const [rValue, setRValue]=React.useState(220) + const [gValue, setGValue]=React.useState(150) + const [bValue, setBValue]=React.useState(20) + return
+
+
+ { setRValue(value) } } + /> +
+
+
+ { setGValue(value) } } + /> +
+
+
+ { setBValue(value) } } + /> +
+
+
+ rgb({rValue},{gValue},{bValue}) +
+
+} + +export default RGBColorPicker \ No newline at end of file diff --git a/src/components/SingleColor.jsx b/src/components/SingleColor.jsx new file mode 100644 index 0000000..c52f6c1 --- /dev/null +++ b/src/components/SingleColor.jsx @@ -0,0 +1,9 @@ +function SingleColor(props) +{ + return
+ + props.onChange(parseInt(event.target.value, 10))} /> +
+} + +export default SingleColor \ No newline at end of file