diff --git a/public/MemeGenerator/index.html b/public/MemeGenerator/index.html new file mode 100644 index 00000000..f66d2588 --- /dev/null +++ b/public/MemeGenerator/index.html @@ -0,0 +1,24 @@ + + + + + + Meme Generator + + + + + + + +
+

Meme Generator

+ +
+

Loading...

+ Meme Image +

+
+
+ + diff --git a/public/MemeGenerator/script.js b/public/MemeGenerator/script.js new file mode 100644 index 00000000..83692b0a --- /dev/null +++ b/public/MemeGenerator/script.js @@ -0,0 +1,32 @@ +const generateBtn = document.querySelector('.generate-button'); +const memeTitle = document.querySelector('.meme-title'); +const memeImage = document.querySelector('.meme-image'); +const authorOutput = document.querySelector('.author'); + +function getMeme() { + // Add "Loading..." effect + memeTitle.innerText = "Loading..."; + memeImage.src = ""; + authorOutput.innerText = ""; + + fetch('https://meme-api.com/gimme/wholesomememes') + .then((res) => res.json()) + .then((data) => { + const { author, title, url } = data; + memeTitle.innerText = title; + memeImage.src = url; + authorOutput.innerText = `Meme by: ${author}`; + }) + .catch((err) => { + memeTitle.innerText = "Oops! Something went wrong 😅"; + console.error(err); + }); +} + +// Initial meme +getMeme(); + +// Button click +generateBtn.addEventListener('click', () => { + getMeme(); +}); diff --git a/public/MemeGenerator/style.css b/public/MemeGenerator/style.css new file mode 100644 index 00000000..26da6814 --- /dev/null +++ b/public/MemeGenerator/style.css @@ -0,0 +1,105 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: 'Nunito', sans-serif; + text-align: center; + background: linear-gradient(to right, #74ebd5, #ACB6E5); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + width: 100%; + max-width: 500px; + padding: 20px; +} + +/* Heading */ +h1 { + color: #2c3e50; + margin-bottom: 20px; +} + +/* Button */ +.generate-button { + border: none; + font: inherit; + padding: 14px 20px; + background: linear-gradient(to right, #ff6b6b, #f06595); + color: white; + width: 100%; + border-radius: 10px; + cursor: pointer; + font-size: 18px; + transition: all 0.3s ease; + box-shadow: 0px 5px 15px rgba(0,0,0,0.2); + margin-bottom: 20px; +} + +.generate-button:hover { + transform: scale(1.05); + box-shadow: 0px 8px 20px rgba(0,0,0,0.3); +} + +.generate-button:active { + transform: scale(0.98); +} + +/* Meme Card */ +.meme-container { + background-color: #ffffffcc; + padding: 20px; + border-radius: 15px; + box-shadow: 0 8px 25px rgba(0,0,0,0.2); + transition: all 0.3s ease; +} + +.meme-container:hover { + transform: translateY(-5px); + box-shadow: 0 12px 30px rgba(0,0,0,0.3); +} + +/* Meme title */ +.meme-title { + margin: 0; + font-size: 22px; + color: #2c3e50; + min-height: 30px; + transition: all 0.3s ease; +} + +/* Meme image */ +.meme-image { + width: 100%; + border-radius: 12px; + margin: 12px 0; + transition: all 0.3s ease; +} + +/* Hide image if not loaded */ +.meme-image:not([src]) { + display: none; +} + +/* Author text */ +.author { + margin: 0; + font-size: 14px; + color: #34495e; +} + +/* Responsive */ +@media (max-width: 500px) { + .generate-button { + font-size: 16px; + padding: 12px 18px; + } + .meme-title { + font-size: 20px; + } +} diff --git a/scripts/app.js b/scripts/app.js index 3cedd187..d01e07e5 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -1780,6 +1780,22 @@ class WebDev100Days { "Custom styled cards with profile photos and reviews" ] }, + { + originalDay: 170, + name: "Meme Generator", + description: "A fun web app that fetches and displays wholesome memes from an API. Users can generate a new meme at the click of a button, complete with title, image, and author info.", + demoLink: "./public/MemeGenerator/index.html", + category: "projects", + technologies: ["HTML", "CSS", "JavaScript", "Fetch API"], + features: [ + "Fetches memes from the 'wholesomememes' subreddit via API", + "Displays meme title, image, and author dynamically", + "Loading effect while fetching a new meme", + "Click button to generate a new random meme", + "Responsive design with hover and shadow effects", + "Smooth transitions for image and text changes" + ] + }, ];