From 8ba0a8ebc98e29d994d9c467e57da4ffaf7f16f1 Mon Sep 17 00:00:00 2001 From: Sahil Date: Tue, 4 Jun 2024 13:14:39 +0530 Subject: [PATCH 1/2] done --- package-lock.json | 2 +- package.json | 2 +- src/App.js | 150 +++++++++++++++++-- src/assets/images/mastercard.png | Bin 0 -> 22691 bytes src/components/BoxColor/BoxColor.css | 10 ++ src/components/BoxColor/BoxColor.jsx | 15 ++ src/components/Carousel/Carousel.css | 12 ++ src/components/Carousel/Carousel.jsx | 26 ++++ src/components/Clickable.jsx | 14 ++ src/components/CreditCard/CreditCard.css | 16 ++ src/components/CreditCard/CreditCard.jsx | 23 +++ src/components/Dice.jsx | 46 ++++++ src/components/DriverCard/DriverCard.css | 17 +++ src/components/DriverCard/DriverCard.jsx | 18 +++ src/components/Greetings/Greetings.css | 8 + src/components/Greetings/Greetings.jsx | 15 ++ src/components/Idcard/Idcard.css | 13 ++ src/components/Idcard/Idcard.jsx | 36 +++++ src/components/LikeButton/LikeButton.css | 7 + src/components/LikeButton/LikeButton.jsx | 15 ++ src/components/NumbersTable/NumbersTable.css | 12 ++ src/components/NumbersTable/NumbersTable.jsx | 16 ++ src/components/Random/Random.css | 8 + src/components/Random/Random.jsx | 10 ++ src/components/Rating/Rating.jsx | 18 +++ src/components/RgbColorPicker.jsx | 0 26 files changed, 492 insertions(+), 17 deletions(-) create mode 100644 src/assets/images/mastercard.png create mode 100644 src/components/BoxColor/BoxColor.css create mode 100644 src/components/BoxColor/BoxColor.jsx create mode 100644 src/components/Carousel/Carousel.css create mode 100644 src/components/Carousel/Carousel.jsx create mode 100644 src/components/Clickable.jsx create mode 100644 src/components/CreditCard/CreditCard.css create mode 100644 src/components/CreditCard/CreditCard.jsx create mode 100644 src/components/Dice.jsx create mode 100644 src/components/DriverCard/DriverCard.css create mode 100644 src/components/DriverCard/DriverCard.jsx create mode 100644 src/components/Greetings/Greetings.css create mode 100644 src/components/Greetings/Greetings.jsx create mode 100644 src/components/Idcard/Idcard.css create mode 100644 src/components/Idcard/Idcard.jsx create mode 100644 src/components/LikeButton/LikeButton.css create mode 100644 src/components/LikeButton/LikeButton.jsx create mode 100644 src/components/NumbersTable/NumbersTable.css create mode 100644 src/components/NumbersTable/NumbersTable.jsx create mode 100644 src/components/Random/Random.css create mode 100644 src/components/Random/Random.jsx create mode 100644 src/components/Rating/Rating.jsx create mode 100644 src/components/RgbColorPicker.jsx 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..7f37293 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,143 @@ -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'; 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 0000000000000000000000000000000000000000..d1016241981b7209282339e91572ed7bb29f9b44 GIT binary patch literal 22691 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 literal 0 HcmV?d00001 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..e69de29 From 42066759043740e73d2ad046bedc2d07869a0448 Mon Sep 17 00:00:00 2001 From: Sahil Date: Tue, 4 Jun 2024 13:14:46 +0530 Subject: [PATCH 2/2] done --- src/App.js | 3 +- src/components/RgbColorPicker.jsx | 53 +++++++++++++++++++++++++++++++ src/components/SingleColor.jsx | 9 ++++++ 3 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 src/components/SingleColor.jsx diff --git a/src/App.js b/src/App.js index 7f37293..58cddd0 100644 --- a/src/App.js +++ b/src/App.js @@ -16,6 +16,7 @@ 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 (
@@ -137,7 +138,7 @@ images={[ /> - +
); } diff --git a/src/components/RgbColorPicker.jsx b/src/components/RgbColorPicker.jsx index e69de29..df8855b 100644 --- a/src/components/RgbColorPicker.jsx +++ 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