diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..2ba986f --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/src/App.css b/src/App.css index 74b5e05..6ff410f 100644 --- a/src/App.css +++ b/src/App.css @@ -36,3 +36,10 @@ transform: rotate(360deg); } } +*{ + margin: 0; + padding:0; +} +body{ + padding: 5px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..1ace24c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,21 @@ import logo from './logo.svg'; import './App.css'; +import IdCard from '//components/Idcard'; +import Greeting from './components/Greetings'; +import Random from './components/Random'; +import BoxColor from './components/BoxColor'; +import Rating from './components/Rating'; +import CreditCard from './components/CreditCard'; +import DriverCard from './components/DriverCard'; +import LikeButton from './components/LikeButton'; +import Clickable from './components/Clickable'; +import Dice from './components/Dice'; +import Caraousel from './components/Carousel'; +import Table from './components/Table' +import RGBColorPicker from './components/RgbColorPicker'; +//importing images +import img from "./assets/images/maxence.png"; +import imgClicked from "./assets/images/maxence-glasses.png"; function App() { return ( @@ -18,8 +34,131 @@ function App() { Learn React - + {/* */} + + + + + +Ludwig + +François + + + + + + + + + + + + + + + + +0 + +1.49 + +1.5 + +3 + +4 + +5 + + + + + + + + + + + + + + + + + ); } -export default App; +export default App; \ No newline at end of file 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.css b/src/components/BoxColor.css new file mode 100644 index 0000000..e864e62 --- /dev/null +++ b/src/components/BoxColor.css @@ -0,0 +1,9 @@ +.cbox{ + margin:10px; + padding:30px; + text-align: center; + border:2px solid #000000; + height: 100px; + font-weight:500; + font-size: xx-large; +} \ No newline at end of file diff --git a/src/components/BoxColor.jsx b/src/components/BoxColor.jsx new file mode 100644 index 0000000..5a01aeb --- /dev/null +++ b/src/components/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.css b/src/components/Carousel.css new file mode 100644 index 0000000..f9c52cf --- /dev/null +++ b/src/components/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.jsx b/src/components/Carousel.jsx new file mode 100644 index 0000000..9234843 --- /dev/null +++ b/src/components/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.css b/src/components/CreditCard.css new file mode 100644 index 0000000..025abb2 --- /dev/null +++ b/src/components/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.jsx b/src/components/CreditCard.jsx new file mode 100644 index 0000000..8e31fdf --- /dev/null +++ b/src/components/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.css b/src/components/DriverCard.css new file mode 100644 index 0000000..f5e3333 --- /dev/null +++ b/src/components/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.jsx b/src/components/DriverCard.jsx new file mode 100644 index 0000000..f3cbdd5 --- /dev/null +++ b/src/components/DriverCard.jsx @@ -0,0 +1,18 @@ +import './DriverCard.css' +import Rating from './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.jsx b/src/components/Greetings.jsx new file mode 100644 index 0000000..11715ce --- /dev/null +++ b/src/components/Greetings.jsx @@ -0,0 +1,15 @@ +import "./Idcard.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.css b/src/components/Idcard.css new file mode 100644 index 0000000..b0f6572 --- /dev/null +++ b/src/components/Idcard.css @@ -0,0 +1,19 @@ +.idcard{ + padding: 5px; + display: flex; + gap: 5px; + border: 2px solid black; + +} + + +/* greeting css + */ + + .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/Idcard.jsx b/src/components/Idcard.jsx new file mode 100644 index 0000000..8b90bdf --- /dev/null +++ b/src/components/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.css b/src/components/LikeButton.css new file mode 100644 index 0000000..c57263c --- /dev/null +++ b/src/components/LikeButton.css @@ -0,0 +1,7 @@ +.btn{ + padding:10px 15px; + font-size: 25px; + margin:20px; + border:5px outset grey; + border-radius: 10px; +} diff --git a/src/components/LikeButton.jsx b/src/components/LikeButton.jsx new file mode 100644 index 0000000..4fa18cc --- /dev/null +++ b/src/components/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/Random.css b/src/components/Random.css new file mode 100644 index 0000000..ad9b95e --- /dev/null +++ b/src/components/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.jsx b/src/components/Random.jsx new file mode 100644 index 0000000..efcad97 --- /dev/null +++ b/src/components/Random.jsx @@ -0,0 +1,10 @@ +import './Random.css' +function Random(props) +{ + let s='=>' + return
+ Random value between {props.min} ans {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.jsx b/src/components/Rating.jsx new file mode 100644 index 0000000..7b10cd7 --- /dev/null +++ b/src/components/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 diff --git a/src/components/Table.css b/src/components/Table.css new file mode 100644 index 0000000..a40e293 --- /dev/null +++ b/src/components/Table.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/Table.jsx b/src/components/Table.jsx new file mode 100644 index 0000000..93f7add --- /dev/null +++ b/src/components/Table.jsx @@ -0,0 +1,16 @@ +import './Table.css' +function Table(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 Table \ No newline at end of file