Save Meme: Added the download button

CONTRIBUTORS.md

@@ -4,6 +4,7 @@ Here's to the crazy ones:
 
 <a href="https://github.com/DuP-491"><sub><b>Divyansh Upadhyay</b></sub></a>
 <a href="https://github.com/dev-lovedeep"><sub><b>Lovedeep singh kamal</b></sub></a>
+<a href="https://github.com/DiamonndAde"><sub><b>Ayomide Adedeji</b></sub></a>
 <a href="https://github.com/NeerajChatterjee"><sub><b>Neeraj Chatterjee</b></sub></a>
 <a href="https://github.com/harshN-17"><sub><b>Harsh Narayan</b></sub></a>
 <a href="https://github.com/ManishSheela"><sub><b>Manish Sheela</b></sub></a>

public/index.css

@@ -50,6 +50,21 @@
     cursor: pointer;
 }
 
+/* For the download button */
+
+a{
+    width: 100%;
+    display: block;
+    text-align: center;
+    margin-top: 10px;
+    padding: 10px
+}
+
+a, a:hover, a:focus, a:active {
+      text-decoration: none;
+      color: inherit;
+ }
+
 .meme {
     position: relative;
 }

src/components/Meme.js

@@ -14,8 +14,10 @@ export default function Meme() {
 		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> ")			
+			.catch((err) =>
+				document.write(
+					"<center> <h3>Engine can't understand this code , it's invalid. please check code and reload page </h3> </center> "
+				)
 			);
 	}, []);
 
@@ -39,34 +41,62 @@ export default function Meme() {
 		setMeme({
 			topText: "",
 			bottomText: "",
-			url: ""
+			url: "",
 		});
 	}
 
 	//this is to handle input change
 	function handleInputChange(event) {
-		const {name, value} = event.target;
-		setMeme( (prevMeme) => ({
+		const { name, value } = event.target;
+		setMeme((prevMeme) => ({
 			...prevMeme,
-			[name]: value
-		}) );
+			[name]: value,
+		}));
+	}
+
+	// This function is for downloading the image
+	function download(e) {
+		e.preventDefault();
+		console.log(e.target.href);
+		fetch(e.target.href, {
+			method: "GET",
+			headers: {},
+		})
+			.then((response) => {
+				response.arrayBuffer().then(function (buffer) {
+					const url = window.URL.createObjectURL(new Blob([buffer]));
+					const link = document.createElement("a");
+					link.href = url;
+					link.setAttribute("download", "image.png"); //or any other extension
+					document.body.appendChild(link);
+					link.click();
+				});
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	}
 
 	// this is for uploading the image from the PC
-	function uploadImage(event){
+	function uploadImage(event) {
 		let fileURL = event.target.files[0];
 		console.log(event.target.files[0].type);
 		// accepts image in the form of PNG/JPG/JPEG
-		if (event.target.files[0].type === "image/png" || event.target.files[0].type === "image/jpg" || event.target.files[0].type === "image/jpeg"){
+		if (
+			event.target.files[0].type === "image/png" ||
+			event.target.files[0].type === "image/jpg" ||
+			event.target.files[0].type === "image/jpeg"
+		) {
 			setMeme((prev) => ({
 				...prev,
-				url: URL.createObjectURL(fileURL)
-			}))
+				url: URL.createObjectURL(fileURL),
+			}));
 			event.target.value = null;
-		}
-		else{
+		} else {
 			// Alert is shown when there is incorrect file chosen
-			alert("Please upload the image in the correct format (PNG/JPEG/JPG)!")
+			alert(
+				"Please upload the image in the correct format (PNG/JPEG/JPG)!"
+			);
 		}
 	}
 
@@ -80,7 +110,7 @@ export default function Meme() {
 					placeholder="text1"
 					name="topText"
 					onChange={handleInputChange}
-					/>
+				/>
 				<input
 					className="form__text"
 					type="text"
@@ -92,18 +122,44 @@ export default function Meme() {
 				<button className="form__button" onClick={getRandomMeme}>
 					Generate Meme
 				</button>
-				<label htmlFor="image-upload" className="form__button upload_image__button">
+				<label
+					htmlFor="image-upload"
+					className="form__button upload_image__button"
+				>
 					Upload Meme Image
 				</label>
-				<input accept="image/*" id="image-upload" type="file" onChange={uploadImage} />
+				<input
+					accept="image/*"
+					id="image-upload"
+					type="file"
+					onChange={uploadImage}
+				/>
 				<button className="form__button" onClick={handleReset}>
 					Reset Meme
 				</button>
 			</div>
 			<div className="meme">
-				{meme.url && <img className="meme__image" src={meme.url} alt="meme"/>}
+				{meme.url && (
+					<div>
+						<img
+							className="meme__image"
+							src={meme.url}
+							alt="meme"
+						/>
+						<a
+							className="form__button"
+							href={meme.url}
+							download
+							onClick={(e) => download(e)}
+						>
+							Download Meme
+						</a>
+					</div>
+				)}
 				{meme.url && <h2 className="meme__text top">{meme.topText}</h2>}
-				{meme.url && <h2 className="meme__text bottom">{meme.bottomText}</h2>}
+				{meme.url && (
+					<h2 className="meme__text bottom">{meme.bottomText}</h2>
+				)}
 			</div>
 		</div>
 	);