This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. ##Text Manipulation Tool with Dark Mode & Dynamic Counter
A React.js project that offers text transformation features (uppercase, lowercase, bold, italic), dynamic word and character counters, and a fully integrated dark mode.
Text Manipulation: Convert text to uppercase or lowercase, toggle bold or italic styles. Real-Time Counters: Track the number of words, characters, and button clicks in real-time. Dark Mode: Toggle between light and dark modes with responsive styling for the entire page. Dynamic Button Styles: Button styles change after more than 10 clicks, enhancing the visual experience. Copy to Clipboard: Easily copy the manipulated text to the clipboard with a single click.
React.js: JavaScript library for building user interfaces. JavaScript (ES6+): Core language for implementing logic. CSS: Styling for the entire page, with dynamic adjustments for dark mode and button states. React Hooks: useState for state management. Clipboard API: Used to copy text directly to the clipboard.
State Management: Using useState() to manage multiple states such as text, word count, character count, and button click count. Conditional Rendering: Applied conditional rendering for button styles and dark mode themes. Event Handling in React: Implemented click events for text transformation functions. CSS for Dark Mode: Dynamically styled the application for light and dark modes based on user preference. Responsive Design: Ensured that the layout adjusts smoothly across different screen sizes.
Textarea supports real-time styling changes (bold/italic) and adapts to the light/dark theme. Buttons have custom colors and are spaced evenly for better usability. The UI updates dynamically to reflect button clicks and text changes.
To run this project locally, follow these steps:
Clone the repository:
bash Copy code git clone https://github.com/Siddiqui145/text_manipulator_reactproject.git
Navigate to the project directory:
bash Copy code cd text-manipulator_reactproject Install dependencies:
bash Copy code npm install Run the app in development mode:
bash Copy code npm start Open http://localhost:3000 to view it in the browser.
This app can be deployed on platforms like Netlify or Vercel. To deploy:
Build the app:
bash Copy code npm run build Follow the instructions of your deployment platform for further steps.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
This project is licensed under the MIT License - see the LICENSE file for details.
Including some screenshots of the app in both light and dark mode, demonstrating various text manipulations.
