From 6386a0a73020b60e042662907d829bec43147392 Mon Sep 17 00:00:00 2001 From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:25:10 +0530 Subject: [PATCH 01/10] Update App.js --- src/App.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 76 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 3784575..e553735 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,13 @@ 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 LikeButton from "./components/LikeButton"; +import ClickablePicture from "./components/ClickablePicture"; +import Dice from "./components/Dice"; function App() { return (
@@ -18,6 +25,74 @@ function App() { Learn React + + + + Ludwig + + François + + + + + + + + + + + + + + + + + +
); } From 78297bc418dd3b79251e937b49a8210d42dcee0d Mon Sep 17 00:00:00 2001 From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:25:55 +0530 Subject: [PATCH 02/10] Create Boxcolour.js --- src/Components/Boxcolour.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/Components/Boxcolour.js diff --git a/src/Components/Boxcolour.js b/src/Components/Boxcolour.js new file mode 100644 index 0000000..acf7516 --- /dev/null +++ b/src/Components/Boxcolour.js @@ -0,0 +1,17 @@ +import React from 'react' + +const BoxColor = ({r,g,b}) => { + const divStyle ={ + backgroundColor:`rgb(${r},${g},${b})`, + height:'40px', + border:'1px solid black' + } + return ( +
+

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

+ +
+ ) +} + +export default BoxColor From cfe2e676ff4ade4f17057458c8e1a1c66223d268 Mon Sep 17 00:00:00 2001 From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:26:26 +0530 Subject: [PATCH 03/10] Create Clickpic.js --- src/Components/Clickpic.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/Components/Clickpic.js diff --git a/src/Components/Clickpic.js b/src/Components/Clickpic.js new file mode 100644 index 0000000..60cc6ae --- /dev/null +++ b/src/Components/Clickpic.js @@ -0,0 +1,26 @@ +import React, { useState } from 'react' + + +const ClickablePicture = (props) => { + const [image, setImage] = useState(true); + + function handleClick(){ + setImage(!image); + } + + return ( +
+ {image ? image:image clicked } + +
+ + ) +} + +export default ClickablePicture From 04e5097d232de359ecaa96f267853affa44fb38a Mon Sep 17 00:00:00 2001 From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:26:51 +0530 Subject: [PATCH 04/10] Create CC.js --- src/Components/CC.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/Components/CC.js diff --git a/src/Components/CC.js b/src/Components/CC.js new file mode 100644 index 0000000..6071a50 --- /dev/null +++ b/src/Components/CC.js @@ -0,0 +1,30 @@ +import React from 'react' + +const CreditCard = (props) => { + const num = 'XXXX XXXX XXXX ' + const divstyle ={ + backgroundColor:`${props.bgColor}`, + color:`${props.color}`, + display:'flex', + flexDirection: 'column', + borderRadius: '10px', + justifyContent: 'space-around', + width:'300px', + height:'130px', + alignItems:'center' + + + } + return ( +
+ {props.type} +
{num}{props.number.substr(-4)}
+
Expires {props.expirationMonth}/{props.expirationYear}
+
{props.bank}
+
{props.owner}
+ +
+ ) +} + +export default CreditCard From 4eef3486bbb0d5fd4e71730e7ec6301603ba2f69 Mon Sep 17 00:00:00 2001 From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:27:13 +0530 Subject: [PATCH 05/10] Create dice.js --- src/Components/dice.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/Components/dice.js diff --git a/src/Components/dice.js b/src/Components/dice.js new file mode 100644 index 0000000..b655920 --- /dev/null +++ b/src/Components/dice.js @@ -0,0 +1,22 @@ +import React, { useState } from 'react' +import dice3 from '../assets/images/dice3.png' +import dice_em from '../assets/images/dice-empty.png' +import dice6 from '../assets/images/dice6.png' + +const Dice = () => { + const [dice, setDice] = useState(dice3); + + function handleClick(){ + setDice(dice_em) + setTimeout(()=>{ + setDice(dice6) + },1000) + } + return ( +
+ +
+ ) +} + +export default Dice From cea8bffc982dcf8ec3759b3fe0b43d22fdef87a2 Mon Sep 17 00:00:00 2001 From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:27:57 +0530 Subject: [PATCH 06/10] Create Greetings.js --- src/Components/Greetings.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/Components/Greetings.js diff --git a/src/Components/Greetings.js b/src/Components/Greetings.js new file mode 100644 index 0000000..faea370 --- /dev/null +++ b/src/Components/Greetings.js @@ -0,0 +1,25 @@ +mport React from "react"; + +const Greetings = (props) => { + + + return ( +
+

+ {" "} + {props.lang === "de" + ? "Hallo" + : props.lang === "en" + ? "Hello" + : props.lang === "fr" + ? "Bonjour" + : props.lang === "es" + ? "Hii" + : ""}{" "} + {props.children} +

+
+ ); +}; + +export default Greetings; From d7c320dea1a538ff13f373c339f6ad4e058e029e Mon Sep 17 00:00:00 2001 From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:28:25 +0530 Subject: [PATCH 07/10] Create IDCrad.css --- src/Components/IDCrad.css | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/Components/IDCrad.css diff --git a/src/Components/IDCrad.css b/src/Components/IDCrad.css new file mode 100644 index 0000000..553a15e --- /dev/null +++ b/src/Components/IDCrad.css @@ -0,0 +1,10 @@ +.card{ + display: flex; + align-items: flex-start; + margin: 5px; + border: 1px solid black; +} +.details{ + margin-left: 5px; + margin-top: 0; +} From d8f61c86631b2d8cb059f5a809fd6cfffac2f8c3 Mon Sep 17 00:00:00 2001 From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:28:54 +0530 Subject: [PATCH 08/10] Create IDCard.js --- src/Components/IDCard.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/Components/IDCard.js diff --git a/src/Components/IDCard.js b/src/Components/IDCard.js new file mode 100644 index 0000000..f2c3f76 --- /dev/null +++ b/src/Components/IDCard.js @@ -0,0 +1,26 @@ +import React from 'react' +import '../components/IDcard.css' + +const IDcard = ({firstName,lastName,gender,picture,height,birth}) => { + + return ( +
+
+ + +
+
+
First Name: {firstName}
+
Last Name: {lastName}
+
Gender: {gender}
+
Height: {height}
+
Birth: {birth.toLocaleDateString()}
+ + +
+ +
+ ) +} + +export default IDcard From 05cfa20fd64aa9204f3d461fa04079f6b891962d Mon Sep 17 00:00:00 2001 From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:29:26 +0530 Subject: [PATCH 09/10] Create Likebutton.js --- src/Components/Likebutton.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/Components/Likebutton.js diff --git a/src/Components/Likebutton.js b/src/Components/Likebutton.js new file mode 100644 index 0000000..a05962e --- /dev/null +++ b/src/Components/Likebutton.js @@ -0,0 +1,30 @@ + +import React, { useState } from 'react' + +const LikeButton = () => { + + const colors = ['purple','blue','green','yellow','orange','red'] + const[likes, setLikes] = useState(0); + const[bgcolor, setBgColor] = useState(colors[0]) + + let randomColor = Math.floor(Math.random()*(1+5)+1) ; + + + const handleLikes=()=>{ + setLikes((s)=> s+1); + setBgColor((c)=>{ + c = colors[randomColor]; + return c; + }) + + } + + + return ( +
+ +
+ ) +} + +export default LikeButton From 2fc801a52ed070b1f005cd71db91d0eb4da49994 Mon Sep 17 00:00:00 2001 From: sai preetham ravula <160527233+VSPR1@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:29:54 +0530 Subject: [PATCH 10/10] Create Rand.js --- src/Components/Rand.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/Components/Rand.js diff --git a/src/Components/Rand.js b/src/Components/Rand.js new file mode 100644 index 0000000..7489c5b --- /dev/null +++ b/src/Components/Rand.js @@ -0,0 +1,12 @@ + +import React from 'react' + +const Random = ({min,max}) => { + return ( +
+

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

+
+ ) +} + +export default Random