diff --git a/README.md b/README.md index 76da17e..cda8db1 100644 --- a/README.md +++ b/README.md @@ -463,6 +463,17 @@ In order to run this project you need: +
  • +
    +Meme Generator +

    A fun and interactive Meme Generator app built using HTML, CSS, and JavaScript. This app fetches random memes from an API and displays them for the user to enjoy. It also provides options for users to download the meme or share it on social media.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/MemeGenerator/index.html b/Source-Code/MemeGenerator/index.html new file mode 100644 index 0000000..241acb9 --- /dev/null +++ b/Source-Code/MemeGenerator/index.html @@ -0,0 +1,24 @@ + + + + + + Meme Generator + + + +
    +

    Random Meme Generator

    +
    + Random Meme +
    +
    + + + +
    +
    + + + + diff --git a/Source-Code/MemeGenerator/script.js b/Source-Code/MemeGenerator/script.js new file mode 100644 index 0000000..b505ede --- /dev/null +++ b/Source-Code/MemeGenerator/script.js @@ -0,0 +1,47 @@ +const memeImage = document.getElementById('meme-image'); +const newMemeButton = document.getElementById('new-meme'); +const downloadMemeButton = document.getElementById('download-meme'); +const shareMemeButton = document.getElementById('share-meme'); + +// Fetch random meme from the API +async function fetchMeme() { + try { + const response = await fetch('https://api.imgflip.com/get_memes'); + const data = await response.json(); + const { memes } = data.data; + const randomMeme = memes[Math.floor(Math.random() * memes.length)]; + memeImage.src = randomMeme.url; + } catch (error) { + console.error('Error fetching meme:', error); + } +} + +// Download the meme +const downloadMeme = () => { + const memeUrl = memeImage.src; + if (memeUrl) { + const a = document.createElement('a'); + a.href = memeUrl; + a.download = 'meme.jpg'; + a.click(); + } +}; + +// Share the meme +const shareMeme = () => { + const memeUrl = memeImage.src; + if (memeUrl) { + const shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent( + memeUrl, + )}`; + window.open(shareUrl, '_blank'); + } +}; + +// Event listeners +newMemeButton.addEventListener('click', fetchMeme); +downloadMemeButton.addEventListener('click', downloadMeme); +shareMemeButton.addEventListener('click', shareMeme); + +// Load an initial meme on page load +fetchMeme(); diff --git a/Source-Code/MemeGenerator/style.css b/Source-Code/MemeGenerator/style.css new file mode 100644 index 0000000..921ae3a --- /dev/null +++ b/Source-Code/MemeGenerator/style.css @@ -0,0 +1,51 @@ +/* styles.css */ +body { + font-family: Arial, sans-serif; + background-color: #f1f1f1; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.meme-container { + text-align: center; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 80%; + max-width: 500px; +} + +h1 { + color: #333; +} + +#meme-box img { + width: 100%; + height: auto; + border-radius: 8px; + margin: 20px 0; +} + +#meme-buttons button { + background-color: #4caf50; + color: white; + padding: 10px 20px; + margin: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +#meme-buttons button:hover { + background-color: #45a049; +} + +#meme-buttons button:disabled { + background-color: #ccc; + cursor: not-allowed; +}