Skip to content

Commit 4c14e71

Browse files
tajulafreentajulafreen
committed
Add the project
1 parent dda4df5 commit 4c14e71

File tree

3 files changed

+123
-0
lines changed

3 files changed

+123
-0
lines changed

‎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: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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+
}
52+

0 commit comments

Comments
 (0)