create account

Memes generator with Javascript by tykee

View this thread on: hive.blogpeakd.comecency.com
· @tykee ·
$3.81
Memes generator with Javascript
![](https://images.ecency.com/DQmVCY7eLv4awQhuRb1dCBVbCjUX1X7hpz1PpcYyV2NFhjy/d_1.png)



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

https://youtu.be/6q5QR7b-yMM

<sub>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</sub>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 296 others
properties (23)
authortykee
permlinkmemes-generator-with-javascript
categoryhive-150329
json_metadata{"image":["https://images.ecency.com/DQmVCY7eLv4awQhuRb1dCBVbCjUX1X7hpz1PpcYyV2NFhjy/d_1.png"],"tags":["hive-150329","neoxian","cent","vyb","stem","programming","hive-engine"],"description":"","app":"ecency/3.0.31-vision","format":"markdown+html","image_ratios":[1.5005861664712778]}
created2023-05-23 22:40:33
last_update2023-05-23 22:40:33
depth0
children2
last_payout2023-05-30 22:40:33
cashout_time1969-12-31 23:59:59
total_payout_value1.933 HBD
curator_payout_value1.873 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,968
author_reputation232,935,449,922,164
root_title"Memes generator with Javascript "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id123,771,427
net_rshares8,116,628,906,993
author_curate_reward""
vote details (360)
@stemsocial ·
re-tykee-memes-generator-with-javascript-20230524t021014127z
<div class='text-justify'> <div class='pull-left'>
 <img src='https://stem.openhive.network/images/stemsocialsupport7.png'> </div>

Thanks for your contribution to the <a href='/trending/hive-196387'>STEMsocial community</a>. Feel free to join us on <a href='https://discord.gg/9c7pKVD'>discord</a> 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.&nbsp;<br />&nbsp;<br />
</div>
properties (22)
authorstemsocial
permlinkre-tykee-memes-generator-with-javascript-20230524t021014127z
categoryhive-150329
json_metadata{"app":"STEMsocial"}
created2023-05-24 02:10:12
last_update2023-05-24 02:10:12
depth1
children1
last_payout2023-05-31 02:10:12
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length565
author_reputation22,460,334,324,555
root_title"Memes generator with Javascript "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id123,776,210
net_rshares0
@tykee ·
Thank you!
properties (22)
authortykee
permlinkre-stemsocial-2023524t93718130z
categoryhive-150329
json_metadata{"tags":["ecency"],"app":"ecency/3.0.31-vision","format":"markdown+html"}
created2023-05-24 08:37:21
last_update2023-05-24 08:37:21
depth2
children0
last_payout2023-05-31 08:37:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length10
author_reputation232,935,449,922,164
root_title"Memes generator with Javascript "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id123,782,741
net_rshares0