From 4c14e71e61f78a808aee1261badff779aa690e93 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:27:59 +0530 Subject: [PATCH 1/3] Add the project --- Source-Code/MemeGenerator/index.html | 24 +++++++++++++ Source-Code/MemeGenerator/script.js | 47 +++++++++++++++++++++++++ Source-Code/MemeGenerator/style.css | 52 ++++++++++++++++++++++++++++ 3 files changed, 123 insertions(+) create mode 100644 Source-Code/MemeGenerator/index.html create mode 100644 Source-Code/MemeGenerator/script.js create mode 100644 Source-Code/MemeGenerator/style.css diff --git a/Source-Code/MemeGenerator/index.html b/Source-Code/MemeGenerator/index.html new file mode 100644 index 0000000..241acb9 --- /dev/null +++ b/Source-Code/MemeGenerator/index.html @@ -0,0 +1,24 @@ + + + + + + Meme Generator + + + +
+

Random Meme Generator

+
+ Random Meme +
+
+ + + +
+
+ + + + diff --git a/Source-Code/MemeGenerator/script.js b/Source-Code/MemeGenerator/script.js new file mode 100644 index 0000000..b505ede --- /dev/null +++ b/Source-Code/MemeGenerator/script.js @@ -0,0 +1,47 @@ +const memeImage = document.getElementById('meme-image'); +const newMemeButton = document.getElementById('new-meme'); +const downloadMemeButton = document.getElementById('download-meme'); +const shareMemeButton = document.getElementById('share-meme'); + +// Fetch random meme from the API +async function fetchMeme() { + try { + const response = await fetch('https://api.imgflip.com/get_memes'); + const data = await response.json(); + const { memes } = data.data; + const randomMeme = memes[Math.floor(Math.random() * memes.length)]; + memeImage.src = randomMeme.url; + } catch (error) { + console.error('Error fetching meme:', error); + } +} + +// Download the meme +const downloadMeme = () => { + const memeUrl = memeImage.src; + if (memeUrl) { + const a = document.createElement('a'); + a.href = memeUrl; + a.download = 'meme.jpg'; + a.click(); + } +}; + +// Share the meme +const shareMeme = () => { + const memeUrl = memeImage.src; + if (memeUrl) { + const shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent( + memeUrl, + )}`; + window.open(shareUrl, '_blank'); + } +}; + +// Event listeners +newMemeButton.addEventListener('click', fetchMeme); +downloadMemeButton.addEventListener('click', downloadMeme); +shareMemeButton.addEventListener('click', shareMeme); + +// Load an initial meme on page load +fetchMeme(); diff --git a/Source-Code/MemeGenerator/style.css b/Source-Code/MemeGenerator/style.css new file mode 100644 index 0000000..99a578d --- /dev/null +++ b/Source-Code/MemeGenerator/style.css @@ -0,0 +1,52 @@ +/* styles.css */ +body { + font-family: Arial, sans-serif; + background-color: #f1f1f1; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + } + + .meme-container { + text-align: center; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 80%; + max-width: 500px; + } + + h1 { + color: #333; + } + + #meme-box img { + width: 100%; + height: auto; + border-radius: 8px; + margin: 20px 0; + } + + #meme-buttons button { + background-color: #4CAF50; + color: white; + padding: 10px 20px; + margin: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; + } + + #meme-buttons button:hover { + background-color: #45a049; + } + + #meme-buttons button:disabled { + background-color: #ccc; + cursor: not-allowed; + } + \ No newline at end of file From 2c21a8317b3b6e285d30cf615882b6b2089d6a19 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:28:25 +0530 Subject: [PATCH 2/3] solve linter error --- Source-Code/MemeGenerator/style.css | 99 ++++++++++++++--------------- 1 file changed, 49 insertions(+), 50 deletions(-) diff --git a/Source-Code/MemeGenerator/style.css b/Source-Code/MemeGenerator/style.css index 99a578d..921ae3a 100644 --- a/Source-Code/MemeGenerator/style.css +++ b/Source-Code/MemeGenerator/style.css @@ -1,52 +1,51 @@ /* styles.css */ body { - font-family: Arial, sans-serif; - background-color: #f1f1f1; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; - } - - .meme-container { - text-align: center; - background-color: #fff; - padding: 20px; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 80%; - max-width: 500px; - } - - h1 { - color: #333; - } - - #meme-box img { - width: 100%; - height: auto; - border-radius: 8px; - margin: 20px 0; - } - - #meme-buttons button { - background-color: #4CAF50; - color: white; - padding: 10px 20px; - margin: 10px; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; - } - - #meme-buttons button:hover { - background-color: #45a049; - } - - #meme-buttons button:disabled { - background-color: #ccc; - cursor: not-allowed; - } - \ No newline at end of file + font-family: Arial, sans-serif; + background-color: #f1f1f1; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.meme-container { + text-align: center; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 80%; + max-width: 500px; +} + +h1 { + color: #333; +} + +#meme-box img { + width: 100%; + height: auto; + border-radius: 8px; + margin: 20px 0; +} + +#meme-buttons button { + background-color: #4caf50; + color: white; + padding: 10px 20px; + margin: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +#meme-buttons button:hover { + background-color: #45a049; +} + +#meme-buttons button:disabled { + background-color: #ccc; + cursor: not-allowed; +} From 71fd4e7b25d4b797611c56252f3b857907afb3b4 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:31:18 +0530 Subject: [PATCH 3/3] update with description and demo link --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 76da17e..cda8db1 100644 --- a/README.md +++ b/README.md @@ -463,6 +463,17 @@ In order to run this project you need: +
  • +
    +Meme Generator +

    A fun and interactive Meme Generator app built using HTML, CSS, and JavaScript. This app fetches random memes from an API and displays them for the user to enjoy. It also provides options for users to download the meme or share it on social media.

    + +
    +
    • +

    (back to top)