diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index 207a70e..d1f485c 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -4,6 +4,7 @@ Here's to the crazy ones:
Divyansh Upadhyay
Lovedeep singh kamal
+Ayomide Adedeji
Neeraj Chatterjee
Harsh Narayan
Manish Sheela
diff --git a/public/index.css b/public/index.css
index 8ea237c..532be0e 100644
--- a/public/index.css
+++ b/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;
}
diff --git a/src/components/Meme.js b/src/components/Meme.js
index e8bcc98..d4fea57 100644
--- a/src/components/Meme.js
+++ b/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("
Engine can't understand this code , it's invalid. please check code and reload page
")
+ .catch((err) =>
+ document.write(
+ " Engine can't understand this code , it's invalid. please check code and reload page
"
+ )
);
}, []);
@@ -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}
- />
+ />
Generate Meme
-