Skip to content

50Projects-HTML-CSS-JavaScript : Meme generator #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 21, 2024
Merged

50Projects-HTML-CSS-JavaScript : Meme generator #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c14e71
Add the project
tajulafreen Dec 21, 2024
2c21a83
solve linter error
tajulafreen Dec 21, 2024
71fd4e7
update with description and demo link
tajulafreen Dec 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
24 changes: 24 additions & 0 deletions Source-Code/MemeGenerator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
47 changes: 47 additions & 0 deletions Source-Code/MemeGenerator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
51 changes: 51 additions & 0 deletions Source-Code/MemeGenerator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}