Memes generator with Javascript

12 months ago

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}

hive-150329 neoxian cent vyb stem programming hive-engine