Editable Text Input

Project Description

Editable Text Input is a simple React project built to practice core React concepts and showcase my frontend development skills. The project features an input field that allows users to enter text and convert it into a paragraph upon pressing the "Save" button. After saving the input, the button text changes to "Edit" for further interaction.

Goal

The goal of this simple React project is to demonstrate the use of Conditional Rendering.

Technologies Used

• React
• JavaScript
• Conditional Rendering
• Styled-Components
• Class Components

Features

• Input Field: Enter any word or sentence.
• Save Button: Converts the input into a paragraph and changes its label to "Edit".
• Edit Mode: Pressing "Edit" will toggle back to the input field for text modification.

How to Run the Project Locally

Prerequisites:

• Node.js installed on your machine (can be downloaded from here).

Set Up Instructions

Click to view

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

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

Resources

Colors

Hex: #000000

Hex: #323f4b

Hex: #f5d0fe

Hex: #d946ef

Hex: #ffffff

Hex: #cbd2d9

Font-families

• Roboto

Author:

GitHub: @bhuvan-007-github