hi guys Welcome to our Channel today we have our another guest tutor nitin shorab from Ton
Snowmar and in this tutorial he will teach us about how to create a random Mimi Generator
using a html CSS and JavaScript he is a very talented web developer mostly he creates HTML
CSS JavaScript tutorials for beginners he has some amazing projects on his channel so
don't forget to check out his channel for more projects like this now let's enjoy the project
hello everyone and also known as tonsumar developer of gulper.i .in online multi
multio game if you haven't played it yet open your browser and enjoy it and in today's video we are
going to dive into the world of web development and explore how to create a meme generator using
HTML CSS and JavaScript but before we get started I just wanted to take a moment to thank Tech to
etc for having me as a guest tutor on their channel it's a great privilege to share my
knowledge and expertise with such a wonderful community of learners so without further Ado
let's jump into today's topic that is creating a meal generator using HTML CSS and JavaScript
let's have an overview of this project here you can see the web page and now we are gonna explore
the elements of this page so here we are having a generate mean button and when we click on this
it triggers the JavaScript to generate a new me here you can see a new name is displayed over
here and we are gonna fetch these means by an API that lets us get names from different subreddits
and at the bottom you can see the author's name by whom the meme is created hope you understood
this project so now grab your favorite core editor and let's get coding so right here I have created
this folder called meme generator and I have just opened this 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 as index.html
and let's create another file and I will name it as style.css and let's also create a main.js file
all right let's start with the HTML file so in vs code you have a shortcut where you can just
press exclamation and press Tab and you will have this basic HTML5 code so right now let's link our
CSS file over here so I will just type link and press Tab and here I will just type style.css
and I will also link the Javascript file over here so I will just slide script cologne SRC and
press Tab and in the SRC I will type main.js so now 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 to create a button and we will give it to class of generate mean button and here
we will have a text of generate me and after that we will have a title of the me so let's
create an H2 and we will give it the class of mean title and we will add a loading text here
now let's create an image tag for the me so in the SRC we will get the link of the
generated mean and then lastly we will have division of the class of meme author
so that's basically with the HTML let's go to our CSS and let's start styling this so before
that let's open this in our browser so I have this extension called live server installed in vs code
so once we install this you can just right click over here and click on open with light server
now let's go to style.css file and first of all let's target the meme generator division
this division right here so let's type dot beam generator and we will set the
font family to Roberto and sand serif and we will also text align everything to Center
right now let's add a default type to the mean image so let's
type meme generator image and we will give it a height of 430 pixels
and I will also set object with 2 cover so that it has a correct aspect ratio
so 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 mean BTN and let's add a padding of 8 pixels top and
bottom and 20 pixels left and right so let's set the border to none and we will add some border
to left and the right so let's type border left and let's set it to 4 pixels solid dark gray and
also for the border right we will type 4 pixels solid dark gray and we will also set a margin
of 24 pixels top and bottom and 0 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 4G and let's set the background color to white
and we will 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 will just type main generator generate meme button alone hover and when we hover 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 will also set the Border left to 8 pixels solid dark gray and
let's just duplicate this and here I will just type border right and we will also add letter
spacing so let's type letter spacing of three pixels and here we will also add a transition
so that we will have a smooth animation so let's type transition of all to 400 milliseconds ease
and now we have this hover effect for the button
so now for the me monitor we will just add a little bit of margin so let's type
mean generator dot me Martha and let's add a margin of 8 pixels and that's it
for CSS and styling 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 are gonna use for the meme generator now this is
the GitHub page for the mean 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'll get a random mean and this is the response that we will get so we will get the
post link and then we will get the subreddit from which the name is uh generated and then we will
get the title and URL and all those things over here and you can also get these preview images
and if this calls down we can see that we can also specify how many names you want to have
and below this we can also specify this subreddit I mean if you know the name of
the subreddit that you want to get the memes from that you can just add that
after this link so here we can see we are getting printing of means from this API
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 mean title and the meme
image and also the meme author so let's reference all of these so let's type const generate mean
button equals document dot query selector and then let's type meme generator dot generate mean
button then we have the meme image so let's type const me image equals document dot query selector
meme generator Ing and then we have the mean title so let's type const mean title
equals document dot query selector mean generator mean title and then lastly we
have the meme author so let's type const meme author equals document dot query selector meme
generator meme author right now let's add an image listener to this generate button so
let's type generate mean button dot add event listener and let's listen for the click event
and when we click on the generate main button we will call a function called generate me so
let's type generate me and we will create that function right now so let's type cons generate me
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 it's paste
it over here you can add the name of any separated you want here over here
now 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
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 will just name it data and let's create an error function
and here I will just call a function called update details
and we will create that function in a minute so let's type update details
and in this we need to pass some value so we will pass the URL of the image
so let's type data which is a 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 that's why we have this data dot URL and we
also need to get the title so let's type data dot 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 type data dot author and let me just arrange this so here we have
that then and we have this response and then we will have this then over here
right now let's create this function called update details so let's type const update details
and here we will just have this mean Mage dot set attribute now here you
have to set the SRC attribute so if we go back to the index.html file here we
can see we have this image tag and in that we have the SRC attribute so let's type SRC
and here in this function we also need to get all these parameters so for the URL I will just give
it a name of URL and for the title I'll just give it a name of title and then we have the author
so right here in the SRC I will just type URL and
then we will type mean title dot inner HTML equals title
HTML equals author and here I will just have a typo so we have to type URL
right now let's go back to our website and let's click on this generate dream button
so here we can see we have this mean and we have the title we have the image and also the author's
name displayed over here now for the author we also have to type mean by so let's go back to
our JavaScript and here for the author I will just add it inside a bat tick and here I will
just type meaning by and here I will just add dollar symbol and curly braces for this variable
now the last thing we will do is we will generate this mean when the page loads so let's go back to
our JavaScript and here I will just call this function called generate me so other just type
generate mean and now let's go back to our website so here we can see we have this meme
generated when the page loads and if I click on this generate mean button we have this new mean
generated over here and that's it for this video you can get the source code of this project and
the API link from the description below so thanks for watching and I will see you in the next one