This meme displayed over here and we also have the author of the meme displayed over here and then we have this button called generate meme and if i click on that and.
Now we can see we have another meme displayed over here and in this way whenever you click on this generate meme button you will have a new meme displayed over here and we will fetch.
These memes using an api that lets us get memes from different subreddits so let's get started .
Right here i have created this folder called meme generator and i just opened it with vs code so let's go ahead and start by creating the necessary files so let's create a.
New file and let's name it index.html and let's create another file and i'll just name it style.css and let's also create a main.js file all right let's start with the.
Here so i'll just type link and press tab and in the edit i'll just type style or css and let's link the javascript file over here so i'll just type script call in.
Src and press tab and in the src i will start main.js right let's start by creating a division to contain everything so let's give it a class of meme generator.
And in that the first thing we will do is create a button and we'll give the class of generate meme button and here we will have a text of generate meme.
And after that we will have the title of the meme so let's create an edge too and we'll give the class of meme title and for now let's just type loading right now let's create an img tag for.
The meme so in the src we will get the link of the generated meme and then lastly we will have a division of the class of meme author so that's basically it with the html now.
Let's go to our css and let's start Wesdigital
Styling this before that let's open this in our browser so i have this extension called live server installed in vs code so once you install that you can just.Right click over here in the html and click on open with live server right now let's go to style.css file and first of all let's target the meme generator division.
So this division right here so let's type dot meme generator and we'll set the font family to roboto and sensative and we'll also text align everything to.
The center right now let's add a default height to the meme image so let's start meme generator img.
And we'll give it a height of 430 pixels and i will also set object fit to cover so that it has the correct aspect ratio right now let's style the button so let's type meme generator and for the.
Button we have a class of generate meme button so let's type generate meme btn and let's add a padding of 8 pixels top and bottom and 20 pixels left and right.
And let's set the border to none and we will add some border to the left and the right so let's tap border left and let's set it to 4 pixels.
Solid dark gray and even for border right we'll type 4 pixels solid dark gray and we'll also set a margin of 24 pixels top and bottom and zero for left and right.
And let's set the font size to 20 pixels and let's set the color of the text to f6 4d 4d and let's set the background color to.
White
And we'll also set the cursor to pointer so when you hover this we need to have the pointer so let's type cursor pointer.Right now let's add a hover effect so here i'll just type meme generator generate meme button colon hover and when we hover over this we will have a padding of 8 pixels top and bottom and.
For left and right we will have a padding of 36 pixels and we'll also set the border left to 8 pixels solid dark gray and let's just duplicate.
This and here i'll just type border right and we'll also add letter spacing so let's type letter spacing of three pixels and here we'll also add a transition so.
That we'll have smooth animation so let's start transition of all to 400 milliseconds is and now if you hover over this we have this.
Horror effect right now for the meme author we'll just add a little bit of margin so let's type meme generator meme author.
And let's add a margin of 8 pixels right that's it with the css now let's go to our main.js file and let's add the javascript now first of all let me show you the api.
That we're going to use for the meme generator now this is the github page of the meme generator api so if we scroll down we can see that we have some instructions on how to use.
This so this is the link of the api so if we just go to this link we will get a random meme and this is the response that we will get so we will get the post link and then we'll get the subreddit.
From which the meme is generated and then we'll get the title and the url and all of these things over here and you will also get these preview images.
And if you scroll down we can see that we can also specify how many memes we want to have and if we scroll down we can also specify the subreddit so if you know the name of a subreddit that you.
Want to get the memes from then you can just add that after this link so here we can see we are getting from this subreddit right here wholesome memes all right so now let's go back to.
Our javascript file and first of all let's reference some of the elements from the html so we need to reference the generate meme button we.
Need to reference the meme title and the image and also the meme author so let's reference all of these so let's tap const generate meme button equals.
Document.queryselector and let's type meme generator generate meme button then we have the meme image solid step const.
Meme image equals document.queryselector meme generator img and then we have the meme title so let's type const meme title.
Equals document.queryselector meme generator meme title and then lastly we have the meme author so let's tap const.
Meme author equals document.queryselector meme generator meme author right now let's add an image listener to.
This generate meme button so let's type generate meme button dot add event listener and let's listen for the click event and when we click on the generate meme.
Button we will call a function called generate meme so let's type generate meme and we'll create that function right now so let's tap const generate meme.
And here we will use the fetch api to get the response from the api so let's type fetch and here we will add the link of the api so let's go back to our github page.
And let's copy this link from here and let's paste it over here you can add the name of any subreddit over here all right after that let's type dot then.
And here we will get the response in json format so let's type response you can name this anything you want and we will create an error function and let's type response.
Dot json and after that we will have one more then and here we will extract the data from this response so i'll just name it data.
And let's create an error function and here i'll just call a function called update details and we'll create that function in a minute so let's type update details.
And in this we need to pass some values so we'll pass the url of the image so let's tab data which is the data that we get over here.
And dot url so if you go back to the github page we can see that we are getting this url so you have to add the same keyword so here we have url so that's why we have data.
Dot url and we also need to get the title so let's type data.title here we can see for the title we have this title and then we need to have the author so for the author we have this.
Keyword author so let's tap data dot author and let me just arrange this so here we have that then here we have the response and then we'll.