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