Text Case Converter Application using React js

"Text Case Converter" is a React-based web application that swiftly transforms text to uppercase or lowercase based on user input. Users can effortlessly toggle between cases, track character count, and clear the input for a seamless text editing experience.

The project is a simple React application that allows users to enter text, convert it to uppercase or lowercase, clear the text, and view the character count. It's organized into components and styling files.

Steps involved in this process are as follows:

1. Create a New React App:

Run the following command to create a new React app using Create React App. Replace "text-case-converter" with the desired project name.

npx create-react-app text-case-converter

2. Change Directory to the Project Folder:

Navigate to the project folder.

cd text-case-converter

3. Create TextCaseConverter.js and Modify App.js:

Inside the src folder, create a new file named TextCaseConverter.js and copy the code for the TextCaseConverter component into it. Modify App.js to include the TextCaseConverter component.

4. Update App.js to Use the Component:

Open App.js and import the TextCaseConverter component. Use the TextCaseConverter component inside the App component.

5. Create CSS File:

Inside the src folder, create a CSS file named TextCaseConverter.css. Copy the CSS styles provided in the previous answer into this file.

6. Import CSS in TextCaseConverter.js:

Open TextCaseConverter.js and import the CSS file at the top.

import './TextCaseConverter.css';

7. Run the Application:

Run the following command to start the development server and see your app in action.

npm start

This will open a new browser window displaying the Text Case Converter application.

8. Test the Application:

Test the application by entering text, converting it to uppercase or lowercase, clearing the text, and observing the character count.

9. Build the Application:

Once you are satisfied with the application, you can build it for production using the following command:

npm run build

This command will generate a build of your application in the build folder.

10. Deployment:

You can deploy the built files to a web server, static file hosting service, or any platform suitable for hosting static websites.

Code:

TextCaseConverter.js

import React, { useState } from 'react';

function TextCaseConverter() {
  const [text, setText] = useState('');
  const [convertedText, setConvertedText] = useState('');
  const [charCount, setCharCount] = useState(0);

  const handleTextChange = (e) => {
    const inputText = e.target.value;
    setText(inputText);
    setCharCount(inputText.length);
  };

  const convertToUppercase = () => {
    setConvertedText(text.toUpperCase());
  };

  const convertToLowercase = () => {
    setConvertedText(text.toLowerCase());
  };

  const clearText = () => {
    setText('');
    setConvertedText('');
    setCharCount(0);
  };

  return (
    <div>
      <h1>Text Case Converter</h1>
      <input
        type="text"
        placeholder="Enter text"
        value={text}
        onChange={handleTextChange}
      />
      <button onClick={convertToUppercase}>Convert to Uppercase</button>
      <button onClick={convertToLowercase}>Convert to Lowercase</button>
      <button onClick={clearText}>Clear Text</button>
      <div>
        <p>Character Count: {charCount}</p>
        <p>Converted Text:</p>
        <p>{convertedText}</p>
      </div>
    </div>
  );
}

export default TextCaseConverter;

App.css

body {
  font-family: Arial, sans-serif;
  background-color: #f7f7f7;
  margin: 0;
  padding: 0;
}

.container {
  text-align: center;
  margin-top: 50px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

h1 {
  color: #007BFF;
}

input {
  padding: 10px;
  margin: 10px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  margin: 5px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

div p {
  font-size: 18px;
  margin: 10px;
}

.char-count {
  color: #888;
}

App.js

import React from 'react';
import './App.css';
import TextCaseConverter from './TextCaseConverter';

function App() {
  return (
    <div className="App">
      <TextCaseConverter />
    </div>
  );
}

export default App;