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 3Light Mode  About Box in Light Mode Environment.

Image 4Light Mode  About Box in Dark Mode Environment.

Image 5Dark Mode  About Box in Light Mode Environment.

Image 6Dark Mode  About Box in Dark Mode Environment.

Comments