Meme generator: a covid project

The button for the meme generator

Heading down the pub, eventually one will make friends with the virus.

I was lucky. I had three days of hibernation and came out feeling okay; even if the sense of smell is slow to return.

A strange symptom was the intense desire to code. As a UX Researcher, there’s not much call for sinking into to codes anymore. But binging Seinfeld had run it’s course. There was no other option. I’m going to have to build me a meme generator.

Meme Generator

A meme generated at https://hamsall.github.io/meme-generator/

Check it out and see if it makes you chuckle.

How it works

For anyone curious about the tech, it’s 70 lines of JavaScript and a HTML Boilerplate. There are three main bits.

//fetch Memes
async function fetchMemeList() {
// Fetch a random meme from the API
const response = await fetch(“https://api.imgflip.com/get_memes");
const data = await response.json();
if (response.ok) {
// Update array
memeList.push(data);
memeListLength = memeList[0].data.memes.length + 1;
} else {
quote.textContent = “An error occured”;
console.log(data);
}
} 

This basically grabs a bunch of meme images from a database and whacks them in an array for the meme-generator. Think of it like meme fuel.

This is referred to as AJAX (Asynchronous JavaScript And XML). It’s an umbrella term for network requests in Javascript. XML isn’t the only type of data returned. It’s just in the name because of its ancient origins in code history.

//fetch Quotes
async function fetchQuoteList() {
// Fetch a random quote from the API
const response = await fetch(“https://api.quotable.io/quotes?tags=inspirational&limit=75");
const data = await response.json();
if (response.ok) {
// Update array
quotesList.push(data);
quoteListLength = quotesList[0].results.length + 1;
} else {
quote.textContent = “An error occured”;
console.log(data);
}
}

This does the same thing. Only instead of grabbing memes, it grabs inspirational quotes.

I got inspirational quotes in the first run through they made me chuckle. No idea why. I should probably ask a comedian.

// generate meme
function generateMeme(){
document.querySelector(‘section’).appendChild(text);
var label = document.querySelector(‘section > p’);
while (label.hasChildNodes()) {
label.removeChild(label.firstChild);
};
let randomInt = Math.floor(Math.random() * memeListLength);
randomMeme = memeList[0].data.memes[randomInt];
let randomIntQuote = Math.floor(Math.random() * quoteListLength);
randomQuote = quotesList[0].results[randomIntQuote].content;
console.log(“a meme!”);
console.log(randomMeme.name);
console.log(randomQuote);
img.src = randomMeme.url;
var textNode = document.createTextNode(randomQuote);
text.appendChild(textNode);
document.querySelector(‘section’).appendChild(img);
}

This part slaps the text and image together through the DOM. It’s randomised so you’ll get different combos every time.

I get around 1 in every 10 making me chuckle. And I’m not saying it cured covid, but it did make me feel a bit better.

Check it out and see if you chuckle. I’m keen to keep tinkering with it so leave a clap or some feedback.