diff --git a/src/App.css b/src/App.css index 74b5e05..d650f5a 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,5 @@ -.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; - display: flex; - flex-direction: column; - align-items: center; - 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); - } -} +*{ + padding: 0; + margin: 0; + font-family: sans-serif; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..a82dcad 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,127 @@ -import logo from './logo.svg'; import './App.css'; - +import IdCard from './components/IdCard'; +import Greeting from './components/Greeting'; +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/Caraousel'; +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 (
-
- logo -

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

- - 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..6d76d32 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..e0dd034 --- /dev/null +++ b/src/components/BoxColor.css @@ -0,0 +1,6 @@ +.cbox{ + margin:10px; + padding:30px; + text-align: center; + border:2px solid black; +} \ No newline at end of file diff --git a/src/components/BoxColor.js b/src/components/BoxColor.js new file mode 100644 index 0000000..5d63676 --- /dev/null +++ b/src/components/BoxColor.js @@ -0,0 +1,16 @@ +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/Caraousel.css b/src/components/Caraousel.css new file mode 100644 index 0000000..ddd0530 --- /dev/null +++ b/src/components/Caraousel.css @@ -0,0 +1,12 @@ +caraousel{ + display:flex; + width:100%; + justify-content:center; + align-items:center; +} +.caraousel button{ + padding:10px 15px; +} +.caraousel img{ + margin:10px; +} \ No newline at end of file diff --git a/src/components/Caraousel.js b/src/components/Caraousel.js new file mode 100644 index 0000000..fc7ca6a --- /dev/null +++ b/src/components/Caraousel.js @@ -0,0 +1,27 @@ +import React from 'react'; +import './Caraousel.css' + +function Caraousel(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 Caraousel \ No newline at end of file diff --git a/src/components/Clickable.js b/src/components/Clickable.js new file mode 100644 index 0000000..914d995 --- /dev/null +++ b/src/components/Clickable.js @@ -0,0 +1,14 @@ +import React from 'react'; +function Clickable(props) +{ + const [img,putGlasses]=React.useState(props.img) + function glasses() + { + img === props.img ? putGlasses(props.imgClicked) : putGlasses(props.img); + } + 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..58cb1f4 --- /dev/null +++ b/src/components/CreditCard.css @@ -0,0 +1,14 @@ +.credit{ + width:300px; + height: 150px; + border-radius: 10px; + padding:18px; + margin:5px; + display: inline-block; +} +.credit > div{ + text-align: right; +} +.credit img{ + width:60px; +} \ No newline at end of file diff --git a/src/components/CreditCard.js b/src/components/CreditCard.js new file mode 100644 index 0000000..625d68f --- /dev/null +++ b/src/components/CreditCard.js @@ -0,0 +1,22 @@ +import './CreditCard.css' +import visa from '../assets/images/visa.png' +import master from '../assets/images/mastercard.png' +function CreditCard(props) +{ + const img = props.type === 'Visa' ? visa : master; + let mon=props.expirationMonth + let yr=props.expirationYear%100 + let ex='' + if(mon<10) + ex='0'+mon+'/'+yr + console.log(ex) + 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.js b/src/components/Dice.js new file mode 100644 index 0000000..a2fd328 --- /dev/null +++ b/src/components/Dice.js @@ -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(dice1) + 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..3eb763f --- /dev/null +++ b/src/components/DriverCard.css @@ -0,0 +1,17 @@ +.driver{ + display: flex; + width:500px; + border-radius: 10px; + background-color: dodgerblue; + justify-content: center; + align-items: center; + padding:5px; + 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.js b/src/components/DriverCard.js new file mode 100644 index 0000000..94fb8a9 --- /dev/null +++ b/src/components/DriverCard.js @@ -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/Greeting.css b/src/components/Greeting.css new file mode 100644 index 0000000..d065e84 --- /dev/null +++ b/src/components/Greeting.css @@ -0,0 +1,8 @@ +span{ + font-size: 18px; +} +.greet{ + margin: 10px; + padding: 10px; + border:2px solid black; +} \ No newline at end of file diff --git a/src/components/Greeting.js b/src/components/Greeting.js new file mode 100644 index 0000000..c22d16d --- /dev/null +++ b/src/components/Greeting.js @@ -0,0 +1,23 @@ +import './Greeting.css' + +function Greeting(props) +{ + let sayHello='' + switch (props.lang) { + case 'de': + sayHello= `Hallo`; + break; + case 'fr': + sayHello = `Bonjour`; + break; + default: + sayHello = `Hello`; + } + return ( +
+ {sayHello} {props.children}! +
+ ); +} + +export default Greeting \ No newline at end of file diff --git a/src/components/IdCard.css b/src/components/IdCard.css new file mode 100644 index 0000000..e329d9c --- /dev/null +++ b/src/components/IdCard.css @@ -0,0 +1,12 @@ +.card{ + display: flex; + justify-content: flex-start; + margin: 10px; + padding: 10px; + border:2px solid black; +} +span{ + font-size: 15px; + display: block; + margin-left: 5px; +} \ No newline at end of file diff --git a/src/components/IdCard.js b/src/components/IdCard.js new file mode 100644 index 0000000..78ac1ce --- /dev/null +++ b/src/components/IdCard.js @@ -0,0 +1,20 @@ +import './IdCard.css'; +function IdCard(props) +{ + return ( +
+
+ profile_pic +
+
+ First Name: {props.firstName} + Last Name: {props.lastName} + Gender: {props.gender} + Height: {props.height} + Birth: {props.birth} +
+
+ ) +} + +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..1888174 --- /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; +} \ No newline at end of file diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js new file mode 100644 index 0000000..3fc6013 --- /dev/null +++ b/src/components/LikeButton.js @@ -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/RGBColorPicker.js b/src/components/RGBColorPicker.js new file mode 100644 index 0000000..08d12a5 --- /dev/null +++ b/src/components/RGBColorPicker.js @@ -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 [rValue, setRValue]=React.useState(255) + const [gValue, setGValue]=React.useState(150) + const [bValue, setBValue]=React.useState(20) + // const [bValue, setBValue]=React.useState(0) + 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/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.js b/src/components/Random.js new file mode 100644 index 0000000..bb526d5 --- /dev/null +++ b/src/components/Random.js @@ -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.js b/src/components/Rating.js new file mode 100644 index 0000000..ca37f80 --- /dev/null +++ b/src/components/Rating.js @@ -0,0 +1,20 @@ +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/SingleColor.js b/src/components/SingleColor.js new file mode 100644 index 0000000..c52f6c1 --- /dev/null +++ b/src/components/SingleColor.js @@ -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..b44f729 --- /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: rgb(255, 64, 0); +} \ No newline at end of file diff --git a/src/components/Table.js b/src/components/Table.js new file mode 100644 index 0000000..7a44e0a --- /dev/null +++ b/src/components/Table.js @@ -0,0 +1,17 @@ +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; + } + console.log(divs) + return
{divs}
; +} +export default Table \ No newline at end of file