manikanta251 / reactjs-memegenerator Goto Github PK

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

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

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 given in the Image URL input should be applied as a background-image for the generated meme. - The given Top and Bottom text values in the respective input elements should be the top and bottom text for the generated meme. - The selected value in the select element should be the applied font size for both top and bottom text for the generated meme.

Use these files to complete the implementation:

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

• The following HTML attributes are required for the HTML for the tests to pass.
• The generated meme container should have data-testid as "meme".
• In previous CPs you have used testid. From now when the styled Components are used data-testid should be used instead of testid.