In this article you will know How to Build a Meme Generator with JavaScript. I used html css javascript to create this Meme Generator. Earlier I have shared with you many types of JavaScript project tutorials.
This is a simple meme generator where you can show any website meme here through API link. It is made very simply. Where there is a generate button you will see a different meme each time you click on that button.
JavaScript Meme Generator
I used HTML to create this JavaScript Meme Generator, CSS for design and very little JavaScript for execution. Since we have used the API here, every time we refresh we can see new memes. Already I have seen how to make random joke generator.
Besides, I have shared more than 100 JavaScript tutorials with you. Hope you will like this project (Meme Generator Using JavaScript) like other designs.
As you can see from the preview button above it’s a simple design. First I created a box on the web page. Inside that box is first a small area where the memes can be seen. Then there is a small generate button. Each time you click on that button, a different image will be generated through the API link.
Build a Meme Generator with JavaScript
If you want to create this meme generator then follow the tutorial below. Here I have provided all the required information and source codes. If you know basic javascript then hopefully you will not have any difficulty in understanding this project (How To Create A Meme Generator).
Step 1 : HTML code for JavaScript Meme Generator
The basic structure of this project is created using the following HTML codes. Here first I created a box on the webpage. Inside the box is a small area that will act as a display. Where all memes can be generated and viewed. Then there is a generate button.
Copy the following html codes and paste them into your html file or folder.
<div class="container">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="meme" id="meme" data-lazy-src="demo-meme.jpg" /><noscript><img decoding="async" src="demo-meme.jpg" alt="meme" id="meme" /></noscript>
<h3 id="title">hahaha!</h3>
<button id="get-meme-btn">Get Meme</button>
</div>
Step 2: Design the Meme Generator with CSS
Now time to design it with some css. Here I have used very little css to design this JavaScript Meme Generator.
Here I have used CSS to design and add colors like mine. You can use css as you like.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-image: url("app-background.png");
background-size: 3.12em;
}
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 80%;
max-width: 500px;
padding: 2em 1em;
background-color: #ffffff;
border-radius: 0.6em;
box-shadow: 0 1.4em 3em rgba(20, 16, 39, 0.3);
}
.container img {
display: block;
height: 25em;
max-width: 80%;
margin: 0 auto 1em auto;
}
.container h3 {
display: block;
font-size: 1em;
text-align: center;
text-transform: capitalize;
color: #737081;
letter-spacing: 0.03em;
margin: 0.5em auto 2em auto;
width: 70%;
font-weight: 400;
}
.container button {
display: block;
background-color: #7f5eff;
border: none;
outline: none;
color: #ffffff;
cursor: pointer;
margin: 0 auto;
font-size: 1.2em;
padding: 0.8em 2em;
border-radius: 2em;
}
@media screen and (max-width: 600px) {
.container {
font-size: 14px;
}
}
Step 3: JavaScript Code for Meme Generator
Now it’s time to make this project(Build a Meme Generator with JavaScript) fully functional. Javascript is used here for execution. Below I have tried to give an explanation for each line.
If you have a basic idea about JavaScript then you will not have any difficulty in making this simple Meme Generator.
let meme = document.getElementById("meme");
let title = document.getElementById("title");
let getMemeBtn = document.getElementById("get-meme-btn");
//API URL
let url = " https://meme-api.herokuapp.com/gimme/";
//Array of subreddits of your choice
let subreddits = ["catmemes", "wholesomemes", "dogmemes", "me_irl"];
//Function To Get Random Meme
let getMeme = () => {
//Choose a random subreddit from the subreddits array
//Math.floor() function always rounds down and returns the largest integer less than or equal to a given number.
let randomSubreddit =
subreddits[Math.floor(Math.random() * subreddits.length)];
//Fetch data from the api
fetch(url + randomSubreddit)
.then((resp) => resp.json())
.then((data) => {
let memeImg = new Image();
//Display meme image and title only after the image loads
memeImg.onload = () => {
meme.src = data.url;
// innerHTML gets or sets the HTML or XML markup contained within the element
title.innerHTML = data.title;
};
memeImg.src = data.url;
});
};
//Call the getMeme() on button click and on window load
getMemeBtn.addEventListener("click", getMeme);
window.addEventListener("load", getMeme);
Hope you are able to create this Meme Generator HTML CSS using the codes above. I have created many other projects using JavaScript.