Add the project

tajulafreen · tajulafreen · commit 4c14e71e61f7 · 2024-12-22T02:27:59.000+05:30
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,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;
+  }
+  
