diff --git a/Vanilla-JS-Projects/Intermediate/Meme-Generator/README.md b/Vanilla-JS-Projects/Intermediate/Meme-Generator/README.md new file mode 100644 index 00000000..83d4570e --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/Meme-Generator/README.md @@ -0,0 +1,47 @@ +

đŸ’Ĩ Meme Generator đŸ’Ĩ

+ +

Tech Stack Used 🎮 🎮

+ +
+ +![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) + +
+ +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + +## Description 📃 + +
+

+ 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. +

+
+ +## 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) + +

Developed By Parna Roy Chowdhury đŸ‘Ļ

+

+ + + + + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

diff --git a/Vanilla-JS-Projects/Intermediate/Meme-Generator/favicon.ico b/Vanilla-JS-Projects/Intermediate/Meme-Generator/favicon.ico new file mode 100644 index 00000000..b618cdae Binary files /dev/null and b/Vanilla-JS-Projects/Intermediate/Meme-Generator/favicon.ico differ diff --git a/Vanilla-JS-Projects/Intermediate/Meme-Generator/index.html b/Vanilla-JS-Projects/Intermediate/Meme-Generator/index.html new file mode 100644 index 00000000..a41cef43 --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/Meme-Generator/index.html @@ -0,0 +1,28 @@ + + + + + + + Meme Pool + + + + + + + +
+ +

Loading...

+ +
+
+ + + + + + \ No newline at end of file diff --git a/Vanilla-JS-Projects/Intermediate/Meme-Generator/screenshot.webp b/Vanilla-JS-Projects/Intermediate/Meme-Generator/screenshot.webp new file mode 100644 index 00000000..3d2336b5 Binary files /dev/null and b/Vanilla-JS-Projects/Intermediate/Meme-Generator/screenshot.webp differ diff --git a/Vanilla-JS-Projects/Intermediate/Meme-Generator/script.js b/Vanilla-JS-Projects/Intermediate/Meme-Generator/script.js new file mode 100644 index 00000000..1b111dce --- /dev/null +++ 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(); \ No newline at end of file diff --git a/Vanilla-JS-Projects/Intermediate/Meme-Generator/style.css b/Vanilla-JS-Projects/Intermediate/Meme-Generator/style.css new file mode 100644 index 00000000..ccaf1055 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/database/vanilla.json b/database/vanilla.json index c04edc2d..d8179975 100644 --- 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." } ]