my app code

Textform.js

import React,{useState} from ‘react’

export default function TextForm( props) {

     const handelUpClick = () =>{

        console.log(“uppercase was clicked” +text);

        let newText=text.toUpperCase();

        setText(newText)

         }

         const handelLoClick = () =>{

          console.log(“uppercase was clicked” +text);

          let newText=text.toLowerCase();

          setText(newText)

         }

     const handelOnChange=(event)=>{

        console.log(“on change”);

        setText(event.target.value);

     }

     const handelClClick=()=>{

      setText(”);

     }

     const handelCopy=()=>{

      var text=document.querySelector(‘#mybox’);

      text.select();

      navigator.clipboard.writeText(text.value);

     }

     const handelExtraSpace=()=>{

      let newText= text.split(/[ ]+/);

      setText(newText.join(” “))

     }

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

  return (<>

  <div className=”container”>

    <div>

        <h1>{props.heading}</h1>

  <div className=”mb-3″>

    <textarea className=’form-control’ id=’mybox’ value={text} onChange={handelOnChange} rows=’8′></textarea>

    </div>

    <button className=”btn btn-primary mx-2″ onClick={handelUpClick}>convert to uppercase</button>

    <button className=”btn btn-primary mx-2″ onClick={handelLoClick}>convert to lower case</button>

    <button className=”btn btn-primary mx-2″ onClick={handelClClick}>clear text </button>

    <button className=”btn btn-primary mx-2″ onClick={handelCopy}>copy text </button>

    <button className=”btn btn-primary mx-2″ onClick={handelExtraSpace}>remove extra space</button>

  </div>

  <div className=”container my-3″>

    <h1>your text summery</h1>

    <p>{text.split(” “).length-1} word and {text.length} character</p>

    <p>{ 0.008 * (text.split(” “).length-1)} menuts read</p>

    <h2>Preview</h2>

    <p>{text}</p>

  </div>

  </div>

  </>

  )

}

app.js

import ‘./App.css’;

// import About from ‘./components/About’;

import Navbar from ‘./components/Navbar’;

import TextForm from ‘./components/TextForm’;

import PropTypes from ‘prop-types’;

function App() {

  return (

   <>

<Navbar / >

<TextForm  heading=”enter the text” />

{/* <About /> */}

</>

  );

}

export default App;

Navbar.propTypes={title:PropTypes.string.isRequired,

linktext:PropTypes.string}

Navbar.defaultProps={title:’Word count with Manish’,

 linktext:”About”}

NavBar

import React from ‘react’

export default function Navbar( props) {

  return (

    <nav className=”navbar navbar-expand-lg navbar-dark  bg-dark”>

    <div className=”container-fluid”>

      <a className=”navbar-brand” href=”/”>{props.title}</a>

      <button className=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”>

        <span className=”navbar-toggler-icon”></span>

      </button>

      <div className=”collapse navbar-collapse” id=”navbarSupportedContent”>

        <ul className=”navbar-nav me-auto mb-2 mb-lg-0″>

          <li className=”nav-item”>

            <a className=”nav-link active” aria-current=”page” >Home</a>

          </li>

          <li className=”nav-item”>

            <a className=”nav-link” href=”/”>{props.linktext}</a>

          </li>

          <li className=”nav-item dropdown”>

            <a className=”nav-link dropdown-toggle” href=”/” role=”button” data-bs-toggle=”dropdown” aria-expanded=”false”>

              Dropdown

            </a>

            <ul className=”dropdown-menu”>

              <li><a className=”dropdown-item” href=”/”>Action</a></li>

              <li><a className=”dropdown-item” href=”/”>Another action</a></li>

              <li><hr className=”dropdown-divider”/></li>

              <li><a className=”dropdown-item” href=”/”>Something else here</a></li>

            </ul>

          </li>

          <li className=”nav-item”>

            <a className=”nav-link disabled” aria-disabled=”true”>Disabled</a>

          </li>

        </ul>

        <form className=”d-flex” role=”search”>

          <input className=”form-control me-2″ type=”search” placeholder=”Search” aria-label=”Search”/>

          <button className=”btn btn-outline-success” type=”submit”>Search</button>

        </form>

      </div>

    </div>

  </nav>

  )

}