The Meme Generatpr

Meme Generator In Java Script

Hello Coder! Welcome To The Codewaksh Blog. In This Blog, We Learn How To Write A Program Of Meme Generator By Using Html and Css, Javascript. We Make Meme Generator for web site.

I Hope You Enjoy Our Blog So Let’s Start With A  Html , css and javscruipt For Meme Generator.

OverView of Project

Compatible Browers: Chrome, Edge, Firefox, Opera, Safari, etc
Responsive: Yes

How to make Pre Loading Animation using HTML, CSS?

HTML

 <div class="container">
    <h2 class="title">Meme Maker</h2>
    <img src="#" alt="Meme Imager" id="imager"  />
    <p id="meme-title">Meme Title</p>
    <button id="mbtn">Click It</button>
  </div>

Explanation of Above Code <3,

• The code starts with a container div.
• Inside the container, there is an image and text that says "Meme Maker."
• The text has a class of title.
• There is also another paragraph inside the container that has an id of meme-title.
• Then it creates a button inside the paragraph with p class called mbtn.
• The code is meant to create a button that will generate an image with the text "Meme Title" on it.

CSS

*{
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: url(hero.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.container{
  background-color: #fff;
  padding: 30px;
  border-radius: 4px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
.container .title{
  font-size: 3rem;
  letter-spacing: 1px;
}
.container #imager{
  width: 250px;
  border-radius: 10px;
  background-size: cover;
}
.container #meme-title{
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .5px;
}
.container #mbtn{
  height: 30px;
  width: 70%;
  border-radius: 5px;
  border: none;
  outline: none;
  background-color: rgb(255, 179, 0);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 1px;
  cursor: pointer;
}

Explanation of Above Code <3,

In this CSS we give style all the elements and give proper padding, color, margin and better looks. Also we have import the google font in CSS.

copy all the CSS code and paste all these into your CSS file.

Css is All is you'r mind Do make sure do you'r best in css file <3

Java Script

let url = 'https://api.imgflip.com/get_memes'
let btn = document.getElementById('mbtn')
fetch(url).then((response) => response.json())
.then((data)=>{
  btn.addEventListener('click', ()=>{
    let memeTitle = document.getElementById('meme-title')
    let memeimg = document.getElementById('imager')
    let meme = data.data;
    let memess = meme.memes;
    let randommeme = memess[Math.floor(Math.random() * memess.length)];
    memeTitle.innerHTML = randommeme.name;
    memeimg.src = randommeme.url;
    console.log(randommeme)
});
});

Explanation of Above Code <3,

• The code starts by creating an object called fetch.
• This object is used to make a request to the url, which in this case is https://api.imgflip.com/get_memes and then parse the response into data that can be used for further programming purposes.
• The code then creates two variables: btn and memeTitle, which are both created with document.getElementById().
• The first thing that happens after the code creates these variables is it adds an event listener on btn so when it's clicked, a function will execute which will create a new variable called randommeme and assign it to memess[Math.floor(Math.random() * memess.length)].
• Then the code sets memeTitle's innerHTML property with randommeme's name property from its properties list of properties (name).
• Next, the src property of img element gets set with randommeme's url property from its properties list of properties (url).
• Lastly, console logs out what was assigned to randommeme as well as how many memes were found in memess
• The code will fetch the URL of a random meme from imgflip.com and then update the title of the element with that meme's name to "Random Meme" and its image to the URL of that meme.

You can also add your mind java script as per your sure.

Thank You!

Learn how to create a meme generator using HTML, CSS, Javascript. in this article. Please leave a comment if we made a mistake or there was any confusion so we can respond or make learning easier for you.