1st Project In React

A word counter project in React.js would involve creating a React application that accepts user input, counts the number of words and characters,will count the time to read the message,clear and much more functionalities in the input, and displays the result to the user. The project would likely use React's state and props to manage the user input and display the word count.

import React, {useState}  from 'react'

function TextForm(props) {
  const handleUpClick = () => {
    let newText = text.toUpperCase();
    setText(newText);
  }
  const handleLowClick = () => {
    let newText = text.toLowerCase();
    setText(newText);
  }
  const handleOnChnage = (event) => {
    setText(event.target.value)
  }
  const clear = () => {
    setText(" ")
  }


  const [text, setText] = useState('');

  return (
    <>
      <div>
        <h1>{props.heading}</h1>
        <div className="mb-3">
          <textarea className="form-control" id="myBox" onChange={handleOnChnage} value={text} rows="8"></textarea>
        </div>

        <button className='btn btn-primary mx-2' onClick={handleUpClick}>Convert to Upper Case</button>

        <button className='btn btn-success mx-2' onClick={handleLowClick}>Convert to Lower Case</button>

        <button className='btn btn-info editor mx-2' onClick={clear}>Clear</button>

        <div className="container my-3">
          <h1>Your Text Summary</h1>
          <p>No of words {text.split(" ").length} and no of characters {text.length}</p>
          <p>{0.008 * text.split(" ").length} Minutes read</p>
        </div>
      </div>

    </>
  ) 
}

export default TextForm

import './App.css';
import TextForm from './components/TextForm';

function App() {
  return (
    <>
      <div className="container my-3">
        <TextForm heading="Enter the Text" />
        </div>
      {/* <Events /> */}
    </>
  );
}



export default App;

Here what we did is firstly take an textarea from bootstrap and store the value of text to "text" variable which is the first argument of state,with this text variable we convert the text to upper and lower case,here we add one functionality where we can clear the data from textarea using empty string.Here we use length property for calculating the total number of characters and split method for calculating the total number of words we write here.To calculate the time,we use the standard time which i take the reference from google,after knowing the time to read single wordi simply multiply the time with total number of words which i already calculated above.We can add a whole lot more functionalities like undo,redo,and much more.

1st Project In React

Word Counter