Memes generator with Javascript
I was conversing with a friend today and I asked him the reasons people invest in memescoin. Then I said, including myself. I don’t really invest in them, I just wait for the pump and move my money. This post isn't about memecoins, it is about memes. I was playing with public memes api. I started with https://ronreiter-meme-generator.p.rapidapi.com/meme/ and I got the API key, but they were still asking me to pay. I had to search for a free API and I found one. https://meme-api.com/gimme/wholesomememes This works pretty simple, and I built a memes generator with HTML, CSS and JavaScript. So, without further ado, let's build.
The HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Memes Generators</title>
</head>
<body>
<div class="meme-container">
<button class="meme-btn">Generate Memes</button>
<h2 class="meme-name">Searching...</h2>
<h3 class="meme-owner"></h3>
<img src="" alt="">
</div>
<script src="main.js"></script>
</body>
</html>
CSS
.meme-container {
text-align: center;
}
.meme-container img {
height: 380px;
object-fit: cover;
}
.meme-container .meme-btn {
padding: 8px 20px;
border: none;
border: 2px solid #a37127;
margin: 24px 0;
font-size: 20px;
color: #101f1f;
background: #fff;
cursor: pointer;
}
.meme-container .meme-btn:hover {
background: #101f1f;
color: #fff;
}
Javascript
The JavaScript is pretty straightforward. I selected the HTML elements with the classes with querySelector and fetched the memes from the API with the JavaScript fetch method. Then I fetched only the link of the image, the title and the creator of the meme and display them on the uDisplay
function in the code below.
const generateMemeBtn = document.querySelector('.meme-btn')
const memeImage = document.querySelector("img");
const memeTitle = document.querySelector(".meme-name");
const memeOwner = document.querySelector(".meme-owner");
const uDisplay = (url, title, author) => {
memeImage.setAttribute('src', url);
memeTitle.innerHTML = title;
memeOwner.innerHTML = `Creator: ${author}`
}
const generateMeme = () => {
fetch('https://meme-api.com/gimme/wholesomememes')
.then((res => res.json()))
.then(data => {
console.log(data)
uDisplay(data.url, data.title, data.author);
})
}
generateMemeBtn.addEventListener("click", generateMeme);
generateMeme();
The result
Michael B, A.K.A Tykee, I am a software developer, writer and blockchain enthusiast. I write about finance, programming, tech and lifestyle. My contents are my opinions
Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!
Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).
You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.
Thank you!