Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a memes app. To build this app, we need HTML, CSS and Javascript.
We use the meme API to fetch and display the data. You can find the link to the API here.
This is an intermediate-level javascript project. You need basic javascript knowledge and fetch() to build this project. If you are looking for more such projects to improve your javascript skills. You can check out this playlist here. This playlist here consists of a bunch of javascript apps build using API.
Video Tutorial:
If you would like to learn by watching a video tutorial rather than reading the blog post you should check out the video below. Also subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us look at the project folder structure. We create a project folder called – ‘Memes App’. Inside this folder, we have three files – index.html, style.css and script.js. These files are the HTML document, the stylesheet and the script file.
HTML:
We start with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Memes Generator</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<img src="demo-meme.jpg" alt="meme" id="meme" />
<h3 id="title">hahaha!</h3>
<button id="get-meme-btn">Get Meme</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
We style the app with CSS. Next, copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-image: url("app-background.png");
background-size: 3.12em;
}
.container {
width: 80%;
max-width: 37.5em;
padding: 3em 1.5em;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.6em;
box-shadow: 0 1.4em 3em rgba(20, 16, 39, 0.3);
}
.container img {
display: block;
height: 25em;
max-width: 80%;
margin: 0 auto 1em auto;
}
.container h3 {
display: block;
font-size: 1em;
margin: 0.5em auto 2em auto;
width: 70%;
font-weight: 400;
text-align: center;
text-transform: capitalize;
color: #737081;
letter-spacing: 0.03em;
}
.container button {
display: block;
margin: 0 auto;
font-size: 1.2em;
padding: 0.8em 2em;
border-radius: 2em;
background-color: #7f5eff;
border: none;
outline: none;
color: #ffffff;
cursor: pointer;
}
@media screen and (max-width: 600px) {
.container {
font-size: 14px;
}
}
Javascript:
Finally, we implement the functionality of this app using Javascript. Once again, copy the code below and paste it into your script file. We do this in the following steps:
Create Initial References
Create an array of subreddits of your choice
Function To Get Random Meme
Choose a random subreddit from the subreddits array
Fetch data from the API
Display meme image and title only after the image loads
Call the getMeme() on button click and window load
let meme = document.getElementById("meme");
let title = document.getElementById("title");
let getMemeBtn = document.getElementById("get-meme-btn");
//API URL
let url = " https://meme-api.herokuapp.com/gimme/";
//Array of subreddits of your choice
let subreddits = ["catmemes", "wholesomemes", "dogmemes", "me_irl"];
//Function To Get Random Meme
let getMeme = () => {
//Choose a random subreddit from the subreddits array
let randomSubreddit =
subreddits[Math.floor(Math.random() * subreddits.length)];
//Fetch data from the api
fetch(url + randomSubreddit)
.then((resp) => resp.json())
.then((data) => {
let memeImg = new Image();
//Display meme image and title only after the image loads
memeImg.onload = () => {
meme.src = data.url;
title.innerHTML = data.title;
};
memeImg.src = data.url;
});
};
//Call the getMeme() on button click and on window load
getMemeBtn.addEventListener("click", getMeme);
window.addEventListener("load", getMeme);
That’s it for this tutorial. If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below.
Also if you have any queries, suggestions or feedback comment below. Happy coding!
noice