The HTML code defines the structure of the “Multiple Meme Generator” page. It uses the basic structure of an HTML5 document, starting with an initial html tag with a !DOCTYPE html declaration and a language attribute of "en" (for English). Here are the details of the structure:
Why Choose the Multiple Meme Generator?
1. HTML Structure
Head Section (<head>):
- Meta tags ensure proper character encoding and responsive design.
- The
titletag names the page “Multiple Meme Generator” browser tab. - The
styletag contains CSS that controls the layout and visual style of the page.
Body Section (<body>):
- The
<h1>tag is used to display the page title. - A short
<p>tag provides instructions for the user. - Forms (
<form>) allow users to input meme text and choose a template. - A
<div>with the id MemContainer serves as the area where the generated memes will be displayed.
2. CSS Styling
<style> tag create a clean and attractive layout for the meme generator:
- The body has a soft background color (
antiquewhite), centered text, and padding around the content. - Input fields and selection dropdowns have padding and font size for readability. They also have maximum width for responsiveness.
- When the event is clicked, the blue background of the button with white text becomes darker.
- The
.meme-containerclass arranges meme images generated usingflexboxin a flexible layout. This ensures that memes are displayed in a clean grid format. - The memes themselves have a border, rounded corners, and a subtle shadow that makes them stand out.
3. JavaScript Functionality
The core functionality of the meme generator is handled by the Myfunction() JavaScript function. This is how it works:
Function initialization:
- When the user submits the form, the
onSubmitevent calls theMyfunction()function. - It first collects the text entered by the user in the input fields (
FirstTextandBottomText), then encodes the text to ensure that it can be safely used in a URL. - It collects selected meme templates using the
multipleattribute of the<select>element, allowing the user to select multiple templates at once.
Meme Generation:
- If no template is selected, an alert prompts the user to select at least one template.
- For each selected meme template, the function creates a URL using the
apimeme.comservice that includes the template name and the user’s text. - It creates an
<img>element for each meme, sets thesrcto the generated meme URL and displays the image. If the image fails to load, it sets an error message.
Displaying Memes:
The generated memes are added to the memeContainer div, and the function ensures that the container is cleared before adding new memes.
Full HTML, CSS, and JavaScript Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Meme Generator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: antiquewhite;
}
input, select {
margin: 10px 0;
padding: 10px;
font-size: 16px;
width: 80%;
max-width: 400px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
.meme-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.meme-container img {
max-width: 300px;
height: auto;
border: 2px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<h1>Multiple Meme Generator</h1>
<p>Enter the text for your memes and select templates:</p>
<form id="Formmeme" onsubmit="return Myfunction()">
<input type="text" id="firsttext" placeholder="Top text" required /> <br>
<input type="text" id="bottomText" placeholder="Bottom text" required /> <br>
<select id="memeTemplates" multiple size="5" required>
<option value="1950s-Middle-Finger">1950s Middle Finger</option>
<option value="10-Guy">10 Guy</option>
<option value="One-Does-Not-Simply">One Does Not Simply</option>
<option value="Distracted-Boyfriend">Distracted Boyfriend</option>
<option value="Grumpy-Cat">Grumpy Cat</option>
</select> <br>
<button type="submit">Generate Memes</button>
</form>
<div class="meme-container" id="memeContainer"></div>
<script>
function Myfunction() {
const firsttext = encodeURIComponent(document.getElementById('firsttext').value);
const bottomText = encodeURIComponent(document.getElementById('bottomText').value);
const selectedTemplates = Array.from(document.getElementById('memeTemplates').selectedOptions).map(option => option.value);
const memeContainer = document.getElementById('memeContainer');
memeContainer.innerHTML = "";
if (selectedTemplates.length === 0) {
alert("Please select at least one meme template!");
return false;
}
selectedTemplates.forEach(template => {
const memeUrl = `https://apimeme.com/meme?meme=${template}&top=${firsttext}&bottom=${bottomText}`;
const img = document.createElement('img');
img.src = memeUrl;
img.alt = `Meme: ${template}`;
img.onerror = () => {
img.src = "";
img.alt = `Failed to load ${template}`;
};
memeContainer.appendChild(img);
});
return false;
}
</script>
</body>
</html>
Key Points to Note:
- Flexibility: The user can select from multiple meme templates, giving them the ability to create multiple memes at once.
- Responsiveness: The forms and meme images are styled to be responsive, so they adjust to different screen sizes.
- Error Handling: If the meme image fails to load, the error is handled gracefully by changing the image source and displaying an error message.
Conclusion
“Multiple Meme Generator” is a fun and interactive web page that empowers users to create personalized memes with custom text. Through a simple form, users can input their desired top and bottom text, select from a variety of popular meme templates, and instantly create memes that reflect their creativity.
This project demonstrates how HTML, CSS, and JavaScript can be combined to create user-friendly, dynamic web applications. The clean design ensures that users can navigate the page easily, while the flexibility to choose multiple templates at once enhances the overall user experience. The use of APIs, such as those from apimeme.com, simplifies the process of creating memes, removing the need for complex image processing.
