Random Meme Generator Using HTML CSS JavaScript

Random Meme Generator Using HTML CSS JavaScript

Introduction:

Hello friends, you all are welcome to today’s new blog post. Today we have created a beautiful project for you which is Random Meme Generator Using HTML CSS JavaScript. In this we have created a button and a box to generate memes in which the memes will be generated. This project is going to be very amazing and implementing it is also quite easy. If you have a little knowledge of coding, then you can create such projects very easily.

Explanation :

First of all we are going to create the structure of our project with the help of HTML in which we are going to add buttons and some text.

  • HTML Important Code:
    • <!DOCTYPE html>: This is the most important element of HTML, it shows that this code is HTML.
    • <html lang=”en” >: With the help of this HTML tag we can change our language.
  • Head Section:
    • <meta>: The most important thing in the head section is the meta link, with the help of which we can make our project responsive in which there are different types of meta links.
    • <title>: If we want to add the title of our project then that is also in the head section.
  • Body Section:
  •  <div class=”meme-generator”>: We have first created a main container for our meme box in which we will add the button and the meme box.
  • <button>: We have created a button to generate memes, on clicking which the meme will be generated.
  • <h2>: We have also added a heading to our project in which we have added the text “Loading”.
  • <img>: For meme images we have used one image tag which will generate different memes.

CSS Styling:

  • meme-generator: I am going to design a box in which I have added the font family, placed the text in the center, made the background color black and also used border radious.
  • img: After this we have set our meme image in which we have kept the height 430px and covered the object fit.
  • generate-meme-btn: In the meme generate button we have used padding and also used bubble and we have also used transition in it.
  • hover: We have also added hover effect to the button in which we have added border.

JavaScript:

  • First of all, we have created a selector with the help of JavaScript code, which will control the HTML code: const generateMemeBtn = document.querySelector
  • const memeImage: We have also connected image title with the help of JavaScript which will update according to the meme.
  • updateDetails: We have also created a document in JavaScript in which we have set the update details which will automatically update the details.

Index.html:

   <div class="meme-generator">
	  <button class="generate-meme-btn">Generate Meme</button>
	  <h2 class="meme-title">Loading...</h2>

	  <img src="" alt="" />
	  <div class="meme-author"></div>
	</div>

Style.css:

.meme-generator {
	font-family: "Roboto", sans-serif;
	text-align: center;
  background-color: black;
  color: white;
  border-radius: 20px;
}

.meme-generator img {
  height: 430px;
  object-fit: cover;
}

.meme-generator .generate-meme-btn {
  padding: 8px 20px;
  border: none;
  border-left: 5px solid white; 
  border-right: 5px solid white;
  border-top: 5px solid white;
  border-bottom: 5px solid white;
  margin: 20px 0;
  font-size: 20px;
  color: #ffffff;
  background: #800000;
  cursor: pointer;
  transition: all 2sec ease;
  border-radius: 20px;
}

.memegenerator .generate-meme-btn:hover {
  padding: 40px 36px;
  border-left: 8px solid #222;
  border-right: 8px solid #222;
  letter-spacing: 3px;
}

.meme-generator .meme-author {
  margin: 20px;
  font-family: Roboto, sans-serif;
  color: white;
}

Script.js:

const generateMemeBtn = document.querySelector(
  ".meme-generator .generate-meme-btn"
);
const memeImage = document.querySelector(".meme-generator img");
const memeTitle = document.querySelector(".meme-generator .meme-title");
const memeAuthor = document.querySelector(".meme-generator .meme-author");

const updateDetails = (url, title, author) => {
  memeImage.setAttribute("src", url);
  memeTitle.innerHTML = title;
  memeAuthor.innerHTML = `Meme by: ${author}`;
};

const generateMeme = () => {
  fetch("https://meme-api.com/gimme/wholesomememes")
    .then((response) => response.json())
    .then((data) => {
      updateDetails(data.url, data.title, data.author);
    });
};

generateMemeBtn.addEventListener("click", generateMeme);

generateMeme();

Tags: