From 97e04b31391c2533ff94743d0fa04229aa127e4c Mon Sep 17 00:00:00 2001
From: PIYUSH956 <piyushjaiswal956@gmail.cm>
Date: Mon, 3 Oct 2022 23:14:46 +0530
Subject: [PATCH 1/4] Ability to change width and orientation

---
 src/components/Meme.js | 45 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/components/Meme.js b/src/components/Meme.js
index 6b34300..ad35040 100644
--- a/src/components/Meme.js
+++ b/src/components/Meme.js
@@ -5,7 +5,6 @@ export default function Meme() {
 	const api_url = "https://api.imgflip.com/get_memes";
 	//this is to store all the meme's url returned by the api
 	const [allMemes, setAllMemes] = useState([]);
-
 	//this function run only once on component load
 	//when this component is mounted on page
 	//it makes call to the api
@@ -21,6 +20,8 @@ export default function Meme() {
 		topText: "",
 		bottomText: "",
 		url: "",
+		width:"",
+		rotate:"",
 	});
 
 	function getRandomMeme() {
@@ -45,7 +46,8 @@ export default function Meme() {
 		setMeme({
 			topText: "",
 			bottomText: "",
-			url: ""
+			url: "",
+			width:"",
 		});
 	}
 
@@ -63,6 +65,22 @@ export default function Meme() {
 		}));
 	}
 
+	function widthChange(event) {
+		setMeme((prevMeme) => ({
+			...prevMeme,
+			width: event.target.value
+		}));
+		console.log(event.target.value);
+	}
+
+	function rotateChange(event) {
+		setMeme((prevMeme) => ({
+			...prevMeme,
+			rotate: event.target.value,
+		}));
+		console.log(event.target.value);
+	}
+
 	// this is for uploading the image from the PC
 	function uploadImage(event){
 		let fileURL = event.target.files[0];
@@ -100,6 +118,25 @@ export default function Meme() {
 					name="bottomText"
 					onChange={handleInput2Change}
 				/>
+
+                <input
+					className="form__text"
+					type="number"
+					value={meme.width}
+					placeholder="Width"
+					name="width"
+					onChange={widthChange}
+				/>
+
+                <input
+					className="form__text"
+					type="text"
+					value={meme.rotate}
+					placeholder="rotate"
+					name="rotate"
+					onChange={rotateChange}
+				/>
+
 				<button className="form__button" onClick={getRandomMeme}>
 					Generate Meme
 				</button>
@@ -113,8 +150,8 @@ export default function Meme() {
 			</div>
 			<div className="meme">
 				{meme.url && <img className="meme__image" src={meme.url} alt="meme"/>}
-				{meme.url && <h2 className="meme__text">{meme.topText}</h2>}
-				{meme.url && <h2 className="meme__text">{meme.bottomText}</h2>}
+				{meme.url && <h2 className="meme__text" style={{fontSize:meme.width , transform: "rotate("+meme.rotate+"deg)"}}>{meme.topText}</h2>}
+				{meme.url && <h2 className="meme__text" style={{fontSize:meme.width , transform: "rotate("+meme.rotate+"deg)"}}>{meme.bottomText}</h2>}
 			</div>
 		</div>
 	);

From e310e741041f53749bd7f84dab1afa4cf54e69e2 Mon Sep 17 00:00:00 2001
From: Piyush Jaiswal <55656203+PIYUSH956@users.noreply.github.com>
Date: Tue, 4 Oct 2022 01:24:08 +0530
Subject: [PATCH 2/4] Update Meme.js

Correct the class name
---
 src/components/Meme.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Meme.js b/src/components/Meme.js
index 767cb9b..df0cfd8 100644
--- a/src/components/Meme.js
+++ b/src/components/Meme.js
@@ -139,8 +139,8 @@ export default function Meme() {
 			</div>
 			<div className="meme">
 				{meme.url && <img className="meme__image" src={meme.url} alt="meme"/>
-				{meme.url && <h2 className="meme__text" style={{fontSize:meme.width , transform: "rotate("+meme.rotate+"deg)"}} top>{meme.topText}</h2>}
-				{meme.url && <h2 className="meme__text" style={{fontSize:meme.width , transform: "rotate("+meme.rotate+"deg)"}} bottom>{meme.bottomText}</h2>}
+				{meme.url && <h2 className="meme__text top" style={{fontSize:meme.width , transform: "rotate("+meme.rotate+"deg)"}} >{meme.topText}</h2>}
+				{meme.url && <h2 className="meme__text bottom" style={{fontSize:meme.width , transform: "rotate("+meme.rotate+"deg)"}} >{meme.bottomText}</h2>}
 			</div>
 		</div>
 	);

From a77a0da0aa15deaad9b51efe5dbfb7bc36717f8c Mon Sep 17 00:00:00 2001
From: PIYUSH956 <piyushjaiswal956@gmail.cm>
Date: Tue, 4 Oct 2022 02:11:54 +0530
Subject: [PATCH 3/4] Rotated In Center

---
 src/components/Meme.js | 79 ++++++++++++++++++++++++++++++++++--------
 src/custom.css         | 16 +++++++++
 2 files changed, 80 insertions(+), 15 deletions(-)
 create mode 100644 src/custom.css

diff --git a/src/components/Meme.js b/src/components/Meme.js
index e8bcc98..bad11dc 100644
--- a/src/components/Meme.js
+++ b/src/components/Meme.js
@@ -1,11 +1,11 @@
 import React from "react";
 import { useState, useEffect } from "react";
+import  '../custom.css';
 
 export default function Meme() {
 	const api_url = "https://api.imgflip.com/get_memes";
 	//this is to store all the meme's url returned by the api
 	const [allMemes, setAllMemes] = useState([]);
-
 	//this function run only once on component load
 	//when this component is mounted on page
 	//it makes call to the api
@@ -13,10 +13,7 @@ export default function Meme() {
 	useEffect(function () {
 		fetch(api_url)
 			.then((data) => data.json())
-			.then((data) => setAllMemes(data.data.memes))
-			.catch((err) => 
-				document.write("<center> <h3>Engine can't understand this code , it's invalid. please check code and reload page </h3> </center> ")			
-			);
+			.then((data) => setAllMemes(data.data.memes));
 	}, []);
 
 	//this state stores information about the current meme
@@ -24,6 +21,8 @@ export default function Meme() {
 		topText: "",
 		bottomText: "",
 		url: "",
+		width:"",
+		rotate:"",
 	});
 
 	function getRandomMeme() {
@@ -34,22 +33,53 @@ export default function Meme() {
 		}));
 	}
 
+	//this is for handling the input
+	function handleChange(event) {
+		const { name, value } = event.target;
+		setMeme((prevMeme) => ({
+			...prevMeme,
+			[name]: value,
+		}));
+	}
+
 	//this is for handling the reset functionality
 	function handleReset() {
 		setMeme({
 			topText: "",
 			bottomText: "",
-			url: ""
+			url: "",
+			width:"",
 		});
 	}
 
 	//this is to handle input change
-	function handleInputChange(event) {
-		const {name, value} = event.target;
+	function handleInput1Change(event) {
 		setMeme( (prevMeme) => ({
 			...prevMeme,
-			[name]: value
-		}) );
+			topText: event.target.value
+		}));
+	}
+	function handleInput2Change(event) {
+		setMeme( (prevMeme) => ({
+			...prevMeme,
+			bottomText: event.target.value
+		}));
+	}
+
+	function widthChange(event) {
+		setMeme((prevMeme) => ({
+			...prevMeme,
+			width: event.target.value
+		}));
+		console.log(event.target.value);
+	}
+
+	function rotateChange(event) {
+		setMeme((prevMeme) => ({
+			...prevMeme,
+			rotate: event.target.value,
+		}));
+		console.log(event.target.value);
 	}
 
 	// this is for uploading the image from the PC
@@ -79,7 +109,7 @@ export default function Meme() {
 					value={meme.topText}
 					placeholder="text1"
 					name="topText"
-					onChange={handleInputChange}
+					onChange={handleInput1Change}
 					/>
 				<input
 					className="form__text"
@@ -87,12 +117,31 @@ export default function Meme() {
 					value={meme.bottomText}
 					placeholder="text2"
 					name="bottomText"
-					onChange={handleInputChange}
+					onChange={handleInput2Change}
 				/>
+
+                <input
+					className="form__text"
+					type="number"
+					value={meme.width}
+					placeholder="Width"
+					name="width"
+					onChange={widthChange}
+				/>
+
+                <input
+					className="form__text"
+					type="text"
+					value={meme.rotate}
+					placeholder="rotate"
+					name="rotate"
+					onChange={rotateChange}
+				/>
+
 				<button className="form__button" onClick={getRandomMeme}>
 					Generate Meme
 				</button>
-				<label htmlFor="image-upload" className="form__button upload_image__button">
+				<label for="image-upload" className="form__button upload_image__button">
 					Upload Meme Image
 				</label>
 				<input accept="image/*" id="image-upload" type="file" onChange={uploadImage} />
@@ -102,8 +151,8 @@ export default function Meme() {
 			</div>
 			<div className="meme">
 				{meme.url && <img className="meme__image" src={meme.url} alt="meme"/>}
-				{meme.url && <h2 className="meme__text top">{meme.topText}</h2>}
-				{meme.url && <h2 className="meme__text bottom">{meme.bottomText}</h2>}
+				{meme.url && <p className="meme__text top" style={{fontSize:meme.width , transform: "translateX(50%) translateY(50%) rotate("+meme.rotate+"deg)"}}>{meme.topText}</p>}
+				{meme.url && <p className="meme__text bottom" style={{fontSize:meme.width , transform: "translateX(50%) translateY(50%) rotate("+meme.rotate+"deg)"}}>{meme.bottomText}</p>}
 			</div>
 		</div>
 	);
diff --git a/src/custom.css b/src/custom.css
new file mode 100644
index 0000000..7179926
--- /dev/null
+++ b/src/custom.css
@@ -0,0 +1,16 @@
+.main{
+    margin: 3%;
+    position: relative;
+}
+
+.first-txt {
+    position: absolute;
+    top: 17px;
+    left: 50px;
+}
+
+.second-txt {
+    position: absolute;
+    bottom: 20px;
+    left: 10px;
+}
\ No newline at end of file

From aa1559e90faad391f6f8494aec6418a8d8ac2f95 Mon Sep 17 00:00:00 2001
From: PIYUSH956 <piyushjaiswal956@gmail.cm>
Date: Tue, 4 Oct 2022 03:16:27 +0530
Subject: [PATCH 4/4] Rotate both text differently

---
 src/components/Meme.js | 50 ++++++++++++++++++++++++++++--------------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/components/Meme.js b/src/components/Meme.js
index 2aa3178..e4bdb12 100644
--- a/src/components/Meme.js
+++ b/src/components/Meme.js
@@ -21,7 +21,8 @@ export default function Meme() {
 		bottomText: "",
 		url: "",
 		width:"",
-		rotate:"",
+		rotateTop:"",
+		rotateBottom:""
 	});
 
 	function getRandomMeme() {
@@ -73,26 +74,28 @@ export default function Meme() {
 		console.log(event.target.value);
 	}
 
-	function rotateChange(event) {
+
+
+	function widthChange(event) {
 		setMeme((prevMeme) => ({
 			...prevMeme,
-			rotate: event.target.value,
+			width: event.target.value
 		}));
 		console.log(event.target.value);
 	}
 
-	function widthChange(event) {
+	function rotateTopChange(event) {
 		setMeme((prevMeme) => ({
 			...prevMeme,
-			width: event.target.value
+			rotateTop: event.target.value,
 		}));
 		console.log(event.target.value);
 	}
 
-	function rotateChange(event) {
+	function rotateBottomChange(event) {
 		setMeme((prevMeme) => ({
 			...prevMeme,
-			rotate: event.target.value,
+			rotateBottom: event.target.value,
 		}));
 		console.log(event.target.value);
 	}
@@ -126,6 +129,17 @@ export default function Meme() {
 					name="topText"
 					onChange={handleInput1Change}
 					/>
+
+                <input
+					className="form__text"
+					type="text"
+					value={meme.rotateTop}
+					placeholder="rotate"
+					name="rotate"
+					onChange={rotateTopChange}
+				/>	
+
+
 				<input
 					className="form__text"
 					type="text"
@@ -135,6 +149,15 @@ export default function Meme() {
 					onChange={handleInput2Change}
 				/>
 
+                <input
+					className="form__text"
+					type="text"
+					value={meme.rotateBottom}
+					placeholder="rotate"
+					name="rotate"
+					onChange={rotateBottomChange}
+				/>	
+
                 <input
 					className="form__text"
 					type="number"
@@ -144,14 +167,7 @@ export default function Meme() {
 					onChange={widthChange}
 				/>
 
-                <input
-					className="form__text"
-					type="text"
-					value={meme.rotate}
-					placeholder="rotate"
-					name="rotate"
-					onChange={rotateChange}
-				/>
+  
 
 				<button className="form__button" onClick={getRandomMeme}>
 					Generate Meme
@@ -166,8 +182,8 @@ export default function Meme() {
 			</div>
 			<div className="meme">
 				{meme.url && <img className="meme__image" src={meme.url} alt="meme"/>}
-				{meme.url && <p className="meme__text top" style={{fontSize:meme.width , transform: "translateX(50%) translateY(50%) rotate("+meme.rotate+"deg)"}}>{meme.topText}</p>}
-				{meme.url && <p className="meme__text bottom" style={{fontSize:meme.width , transform: "translateX(50%) translateY(50%) rotate("+meme.rotate+"deg)"}}>{meme.bottomText}</p>}
+				{meme.url && <p className="meme__text top" style={{width:meme.width , transform: "translateX(50%) translateY(50%) rotate("+meme.rotateTop+"deg)"}}>{meme.topText}</p>}
+				{meme.url && <p className="meme__text bottom" style={{width:meme.width , transform: "translateX(50%) translateY(50%) rotate("+meme.rotateBottom+"deg)"}}>{meme.bottomText}</p>}
 			</div>
 		</div>
 	);