Avdhesh-Varshney · Avdhesh-Varshney · Jun 19, 2024 · Jun 18, 2024
diff --git a/Vanilla-JS-Projects/Intermediate/Meme-Generator/README.md b/Vanilla-JS-Projects/Intermediate/Meme-Generator/README.md
@@ -0,0 +1,47 @@
+<h1 align='center'><b>💥 Meme Generator 💥</b></h1>
+
+<h3 align='center'>Tech Stack Used 🎮 🎮</h3>
+
+<div align='center'>
+
+![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+
+</div>
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+## Description 📃
+
+<div>
+    <p>
+        This website generates random memes. It fetches the meme from an API and displays it on the screen along with a description, image and the name of the author. The website is fully responsive and works on all devices.
+    </p>
+</div>
+
+## How to run it? 🕹️
+
+- Fork this repository.
+- Clone the forked repository.
+- Open index.html in your web browser.
+
+## Screenshots 📸
+
+![i](screenshot.webp)
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<h4 align='center'>Developed By <b><i>Parna Roy Chowdhury</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/parna-roy-chowdhury-756331256/'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/ParnaRoyChowdhury777'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/Vanilla-JS-Projects/Intermediate/Meme-Generator/favicon.ico b/Vanilla-JS-Projects/Intermediate/Meme-Generator/favicon.ico
diff --git a/Vanilla-JS-Projects/Intermediate/Meme-Generator/index.html b/Vanilla-JS-Projects/Intermediate/Meme-Generator/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meme Pool</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+</head>
+
+<body>
+
+    <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>
+
+    <footer>
+        <div class="footer-content">Made with <i class='bx bxs-heart' style='color:#eb147d' ></i> by <a href="https://github.com/ParnaRoyChowdhury777" target="_blank">PRC</a></div>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Vanilla-JS-Projects/Intermediate/Meme-Generator/screenshot.webp b/Vanilla-JS-Projects/Intermediate/Meme-Generator/screenshot.webp
diff --git a/Vanilla-JS-Projects/Intermediate/Meme-Generator/script.js b/Vanilla-JS-Projects/Intermediate/Meme-Generator/script.js
@@ -0,0 +1,24 @@
+const btn = document.querySelector(".generate-meme-btn");
+const memeImage = document.querySelector(".meme-generator img");
+const memeTitle = document.querySelector(".meme-title");
+const memeAuthor = document.querySelector(".meme-author");
+
+const updataDetails = (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) => {
+        updataDetails(data.url, data.title, data.author);
+    });
+};
+
+btn.addEventListener("click", generateMeme);
+
+generateMeme();
diff --git a/Vanilla-JS-Projects/Intermediate/Meme-Generator/style.css b/Vanilla-JS-Projects/Intermediate/Meme-Generator/style.css
@@ -0,0 +1,87 @@
+@import url('https://fonts.googleapis.com/css2?family=Agbalumo&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    outline: none;
+    box-sizing: border-box;
+    font-family: Agbalumo;
+    color: rgb(169 53 92);
+    overflow: hidden;
+}
+
+body{
+    background-image: linear-gradient(to top, #d299c2 0%, #fef9d7 100%);
+    height: 100vh;
+}
+
+.meme-generator{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 1rem;
+    margin-top: 1rem;
+}
+
+.generate-meme-btn{
+    margin-top: 20px;
+    padding: 0px 20px;
+    text-transform: uppercase;
+    font-size: 19px;
+    width: 200px;
+    height: 40px;
+    color: rgb(156, 5, 106);
+    font-weight: 700;
+    border: 1px solid rgb(156, 5, 106);
+    border-radius: 20px;
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+    background-image: linear-gradient(120deg, transparent, rgb(236, 141, 157), transparent);
+}
+
+
+.generate-meme-btn:hover{
+    box-shadow: 0px 0px 30px rgb(236, 141, 157);
+    transition: 0.2s;
+}
+
+
+.meme-title{
+    margin: 2rem;
+}
+
+.meme-generator img{
+    height: 60vh;
+}
+
+.meme-author{
+    padding-top: 10px;
+    font-size: 20px;
+}
+
+footer{
+    text-align: center;
+    font-size: larger;
+}
+
+footer a{
+    text-decoration: none;
+}
+
+@media (max-width: 600px) {
+    .generate-meme-btn {
+        font-size: 14px;
+        width: 80%;
+    }
+
+    .meme-generator img{
+        height: 50vh;
+        width: 91vw;
+    }
+
+    .meme-title {
+        font-size: 18px;
+    }
+}
diff --git a/database/vanilla.json b/database/vanilla.json
@@ -113,5 +113,10 @@
 		"tag":"Basic",
 		"title":"Virtual-Piano",
 		"description":"Virtual Piano enables users to play a digital piano with adjustable volumes, providing a customizable and interactive musical experience."
+	},
+	{
+		"tag":"Intermediate",
+		"title":"Meme-Generator",
+		"description":"This is a simple project which generates random memes along with an image and the name of the author just by one click of a button."
 	}
 ]