TextUtils

TextUtils is a React application that allows users to manipulate text in various ways. It provides functionality to convert text to uppercase and lowercase, copy text to the clipboard, remove extra spaces, preview the text, and switch between light and dark modes. The app also includes navigation between Home and About pages.

Table of Contents

• Features
• Getting Started
  • Prerequisites
  • Installation
  • Running the Application
• Usage
  • Home Page
  • About Page
  • Theme Toggle
• Components
• Preview
• Contributing

Features

• Light/Dark Mode Toggle: Switch between light and dark themes for better visibility.
• Text Conversion: Convert text to uppercase and lowercase.
• Copy Text: Copy the entire text from the text area to the clipboard.
• Remove Extra Spaces: Remove extra spaces from the text.
• Word and Character Count: Display the number of words and characters in the text.
• Reading Time Estimation: Estimate the time it will take to read the text.
• Text Preview: Preview the text as you type.
• Navigation: Navigate between Home and About pages.

Getting Started

Prerequisites

• Node.js and npm should be installed on your machine.

Installation

1. Clone the repository:

   git clone https://github.com/TextUtils/TextUtils.git

2. Navigate to the project directory:

   cd TextUtils

3. Install the dependencies:

   npm install

Running the Application

1. Start the development server:

   npm start

2. Open your browser and navigate to http://localhost:3000.

Usage

Home Page

The Home page provides a text area where you can enter and manipulate text. The available options are:

• Uppercase: Convert the text to uppercase.
• Lowercase: Convert the text to lowercase.
• Clear: Clear the text area.
• Remove Extra Spaces: Remove extra spaces from the text.
• Copy Text: Copy the entire text to the clipboard.
• Preview: Preview the text as you type.

Additionally, the Home page displays the following statistics:

• Word Count: The number of words in the text.
• Character Count: The number of characters in the text.
• Reading Time: The estimated time it will take to read the text.

About Page

The About page provides information about the TextUtils application and its features.

Theme Toggle

You can switch between light and dark modes by clicking the toggle button in the Navbar.

Components

-> App.js

The main application component that includes the routing logic and theme toggle functionality.

-> About.js

The About page component that provides information about the application.

-> Alert.mjs

The Alert component displays alerts and notifications.

-> Navbar.mjs

The Navbar component contains the navigation links and the theme toggle button.

-> placeholdertext.css

The CSS file for styling placeholder text.

-> TextForms.js

The TextForms component includes the text area and buttons for text manipulation.

-> TextSummary.mjs

The TextSummary component displays the word count, character count, and estimated reading time.

Preview

Light Mode

Dark Mode

About Page

Contributing

Feel free to fork the repository and submit pull requests. We welcome contributions to improve the functionality and user experience of TextUtils.