Skip to content

Commit 59293e7

Browse files
tajulafreentajulafreen
authored
Merge pull request #44 from tajulafreen/Meme_Generator
50Projects-HTML-CSS-JavaScript : Meme generator
2 parents dda4df5 + 71fd4e7 commit 59293e7

File tree

4 files changed

+133
-0
lines changed

4 files changed

+133
-0
lines changed

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -463,6 +463,17 @@ In order to run this project you need:
463463
</details>
464464
</li>
465465

466+
<li>
467+
<details>
468+
<summary>Meme Generator</summary>
469+
<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>
470+
<ul>
471+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/MemeGenerator/">Live Demo</a></li>
472+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/MemeGenerator">Source</a></li>
473+
</ul>
474+
</details>
475+
</li>
476+
466477
</ol>
467478

468479
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/MemeGenerator/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Meme Generator</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="meme-container">
11+
<h1>Random Meme Generator</h1>
12+
<div id="meme-box">
13+
<img id="meme-image" src="" alt="Random Meme" />
14+
</div>
15+
<div id="meme-buttons">
16+
<button id="new-meme">Get New Meme</button>
17+
<button id="download-meme">Download Meme</button>
18+
<button id="share-meme">Share Meme</button>
19+
</div>
20+
</div>
21+
22+
<script src="script.js"></script>
23+
</body>
24+
</html>

‎Source-Code/MemeGenerator/script.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const memeImage = document.getElementById('meme-image');
2+
const newMemeButton = document.getElementById('new-meme');
3+
const downloadMemeButton = document.getElementById('download-meme');
4+
const shareMemeButton = document.getElementById('share-meme');
5+
6+
// Fetch random meme from the API
7+
async function fetchMeme() {
8+
try {
9+
const response = await fetch('https://api.imgflip.com/get_memes');
10+
const data = await response.json();
11+
const { memes } = data.data;
12+
const randomMeme = memes[Math.floor(Math.random() * memes.length)];
13+
memeImage.src = randomMeme.url;
14+
} catch (error) {
15+
console.error('Error fetching meme:', error);
16+
}
17+
}
18+
19+
// Download the meme
20+
const downloadMeme = () => {
21+
const memeUrl = memeImage.src;
22+
if (memeUrl) {
23+
const a = document.createElement('a');
24+
a.href = memeUrl;
25+
a.download = 'meme.jpg';
26+
a.click();
27+
}
28+
};
29+
30+
// Share the meme
31+
const shareMeme = () => {
32+
const memeUrl = memeImage.src;
33+
if (memeUrl) {
34+
const shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(
35+
memeUrl,
36+
)}`;
37+
window.open(shareUrl, '_blank');
38+
}
39+
};
40+
41+
// Event listeners
42+
newMemeButton.addEventListener('click', fetchMeme);
43+
downloadMemeButton.addEventListener('click', downloadMeme);
44+
shareMemeButton.addEventListener('click', shareMeme);
45+
46+
// Load an initial meme on page load
47+
fetchMeme();

‎Source-Code/MemeGenerator/style.css

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/* styles.css */
2+
body {
3+
font-family: Arial, sans-serif;
4+
background-color: #f1f1f1;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
height: 100vh;
9+
margin: 0;
10+
}
11+
12+
.meme-container {
13+
text-align: center;
14+
background-color: #fff;
15+
padding: 20px;
16+
border-radius: 8px;
17+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
18+
width: 80%;
19+
max-width: 500px;
20+
}
21+
22+
h1 {
23+
color: #333;
24+
}
25+
26+
#meme-box img {
27+
width: 100%;
28+
height: auto;
29+
border-radius: 8px;
30+
margin: 20px 0;
31+
}
32+
33+
#meme-buttons button {
34+
background-color: #4caf50;
35+
color: white;
36+
padding: 10px 20px;
37+
margin: 10px;
38+
border: none;
39+
border-radius: 5px;
40+
cursor: pointer;
41+
transition: background-color 0.3s;
42+
}
43+
44+
#meme-buttons button:hover {
45+
background-color: #45a049;
46+
}
47+
48+
#meme-buttons button:disabled {
49+
background-color: #ccc;
50+
cursor: not-allowed;
51+
}

0 commit comments

Comments
 (0)