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 -