https://github.com/balakrish001/meme-generator-styled-components

Meme Generator with React and Styled Components
https://github.com/balakrish001/meme-generator-styled-components

html-css-javascript reactjs styled-components

Last synced: 20 days ago
JSON representation

Meme Generator with React and Styled Components

• Host: GitHub
• URL: https://github.com/balakrish001/meme-generator-styled-components
• Owner: Balakrish001
• Created: 2024-09-14T04:48:07.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-14T04:55:32.000Z (2 months ago)
• Last Synced: 2024-10-10T17:22:00.728Z (about 1 month ago)
• Topics: html-css-javascript, reactjs, styled-components
• Language: JavaScript
• Homepage:
• Size: 182 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
In this project, let's build a **Meme Generator** app by applying the React Styled Components.

### Refer to the image below:






    






### Design Files

Click to view

- [Extra Small (Size < 576px) and Small (Size >= 576px)](https://assets.ccbp.in/frontend/content/react-js/meme-generator-sm-output-v0.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)](https://assets.ccbp.in/frontend/content/react-js/meme-generator-lg-output-v0.png)

### 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](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