Merge pull request #44 from tajulafreen/Meme_Generator

tajulafreen · web-flow · commit 59293e759e03 · 2024-12-22T02:36:40.000+05:30
50Projects-HTML-CSS-JavaScript : Meme generator
diff --git a/README.md b/README.md
@@ -463,6 +463,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Meme Generator</summary>
+<p>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.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/MemeGenerator/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/MemeGenerator">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
diff --git a/Source-Code/MemeGenerator/index.html b/Source-Code/MemeGenerator/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Meme Generator</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="meme-container">
+    <h1>Random Meme Generator</h1>
+    <div id="meme-box">
+      <img id="meme-image" src="" alt="Random Meme" />
+    </div>
+    <div id="meme-buttons">
+      <button id="new-meme">Get New Meme</button>
+      <button id="download-meme">Download Meme</button>
+      <button id="share-meme">Share Meme</button>
+    </div>
+  </div>
+  
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Source-Code/MemeGenerator/script.js 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
@@ -0,0 +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;
+}

-Original file line number
+Diff line change
 details>
 li>
 +<li>
 +<details>
 +<summary>Meme Generatorsummary>
 +<p>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.p>
 +<ul>
 +<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/MemeGenerator/">Live Demoa>li>
 +<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/MemeGenerator">Sourcea>li>
 +ul>
 +details>
 +li>
++
 ol>
 <p align="right">(<a href="#readme-top">back to topa>)p>