5 - Creating First React App - TextFormat

 

 Creating First React App

Create a single page application and use bootstrap in your project with two working options in navbar ( Home and About ) that can perform following functionalities :

FUNCTIONALITIES IN NAVBAR :

1-  Enable Dark or Light Mode for entire page.

FUNCTIONALITIES IN  HOME  OPTION :

1-   Take input as  text in TextBox.

2-   Convert the input text into all Uppercase, all Lowercase. Also clear textbox, copy text in textbox and Removing extra spaces in textbox.

3-   Text Summary that provides no of  characters and words in your textbox.

4-   Reading Time that gives us the total time to read entire text box if you read with certain speed.

5-   Text View that gives us view of text in entire textbox.

Image 1- Enabling  Home Option in Light Mode Environment.

Image 2- Enabling  Home Option in Dark Mode Environment.

FUNCTIONALITIES IN  ABOUT OPTION :

1-   An About Box that can enable light and dark mode  via button and text inside button can change.

2-   Definition of functionalities in home like Text Summary, Reading Time ,  Text View

Image 3 - Light Mode  About Box in Light Mode Environment.

Image 4 - Light Mode  About Box in Dark Mode Environment.

Image 5 - Dark Mode  About Box in Light Mode Environment.

Image 6 - Dark Mode  About Box in Dark Mode Environment.