PraveenGandikota/Meme-Generator

Developed an interactive Meme Generator application that allows users to create custom memes by adding text to images. This web application provides a simple and intuitive interface for users to select an image, input their desired text, and adjust the text position to create humorous and shareable memes. The project leverages modern web technologi

In this project, let's build a Meme Generator app by applying the concepts we have learned till now.

Refer to the image below:

Design Files

Click to view

• Extra Small (Size < 576px) and Small (Size >= 576px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)

Set Up Instructions

Click to view

• Download dependencies by running npm install
• Start up the app using npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

• Initially, values in the inputs elements should be empty and the selected value in the select element should be the first item in the given fontSizesOptionsList
• When non-empty values are provided for Image Url, Top Text, Bottom Text, and Font Size and the Generate button is clicked
  • The Image URL that has been provided should be applied as a background-image for the generated meme
  • The given Top and Bottom text values should be at the top and bottom of the generated meme
  • The selected font size value should be applied for both top and bottom text of the generated meme

Implementation Files

Use these files to complete the implementation:

• src/App.js
• src/components/MemeGenerator/index.js
• src/components/MemeGenerator/styledComponents.js

Important Note

Click to view

The following instructions are required for the tests to pass

• The HTML container element for the generated meme should have data-testid attribute value as meme
• When Styled Components are used, data-testid attribute should be used instead of testid attribute

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/nature-img.png

Colors

Hex: #35469c

Hex: #7e858e

Hex: #5a7184

Hex: #ffffff

Hex: #d7dfe9

Hex: #1e293b

Hex: #0b69ff

Font-families

• Open Sans

Things to Keep in Mind

• All components you implement should go in the src/components directory.
• Don't change the component folder names as those are the files being imported into the tests.
• Do not remove the pre-filled code
• Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.