Skip to content

Memes Generator is a fun and interactive web application that allows users to create, customize, and share memes easily. With this tool, you can upload your own images, use random meme templates, add custom text, and save your creations with just a few clicks.

Notifications You must be signed in to change notification settings

baberlabs/memes-generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Memes Generator

Memes Generator is a fun and interactive web application that allows users to create, customize, and share memes easily. With this tool, you can upload your own images, use random meme templates, add custom text, and save your creations with just a few clicks.

This project was pair programmed by Baber Khan and Daniel Taylor.

Live Demo

Visit baberlabs.github.io/memes-generator for a live demo.

Features

  • Upload custom images or use random images from the imgflip API
  • Add custom text to the top and bottom of the meme
  • Generate random meme text from a curated list
  • Save generated memes as PNG files
  • Responsive design for various screen sizes

Technologies Used

  • HTML5
  • CSS3
  • JavaScript (ES6+)
  • html2canvas library for image capture

Getting Started

To run this project locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/baberlabs/memes-generator.git
    
  2. Navigate to the project directory:

    cd memes-generator
    
  3. Open index.html in your preferred web browser.

Usage

  1. Upload an Image: Click on "Upload Image" to select an image from your device.
  2. Use an Image URL: Click on "Image From URL" and enter the URL of an image.
  3. Get a Random Image: Click on "Random Image" to fetch a random meme template from the imgflip API.
  4. Add Custom Text: Type your desired text in the "Top Text" and "Bottom Text" input fields.
  5. Generate Random Text: Click on "Generate Random Text" to add random meme text from our curated list.
  6. Save Your Meme: Click on "Save" to download your created meme as a PNG file.
  7. Share Your Meme: (Feature coming soon)

Project Structure

  • index.html: Main HTML file
  • style.css: CSS styles for the application
  • script.js: JavaScript file containing the main functionality
  • memes.json: JSON file containing a list of predefined meme texts

Contributing

We welcome contributions to improve the Memes Generator! If you have suggestions or find any issues, please feel free to open an issue or submit a pull request.

  1. Fork the project
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

This project is open source and available under the MIT License.

Acknowledgments

  • Thanks to the imgflip API for providing random meme templates.
  • Shout out to the open-source community for the tools and libraries used in this project.

Contact

About

Memes Generator is a fun and interactive web application that allows users to create, customize, and share memes easily. With this tool, you can upload your own images, use random meme templates, add custom text, and save your creations with just a few clicks.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published