PraveenGandikota/Editable-Text-Input

The goal of this coding is to quickly get you off the ground with Conditional Rendering.

The goal of this coding exam is to quickly get you off the ground with Conditional Rendering.

Refer to the image below:

Design Files

Click to view

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Editing output
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Saved text output

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, the user should see the input element and theSave button.
• When the text is provided in the input element and the Save button is clicked
  • The text should be displayed in the paragraph instead of the input element.
  • The Edit button should be displayed.
• When the text is saved and the Edit button is clicked
  • The input element should be displayed with the value as text content of the HTML paragraph element.
  • The Save button should be displayed.

Important Note

Click to view

The following instructions are required for the tests to pass

• Use styledComponents for styling the elements

Resources

Colors

Hex: #000000

Hex: #323f4b

Hex: #f5d0fe

Hex: #d946ef

Hex: #ffffff

Hex: #cbd2d9

Font-families

• Roboto

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.