Add Calculation to the Character Counter Application

// CharacterCounter.jsx



// Import the function from the react package

import React, { useState } from "react";

import "./CharacterCounter.css";



function CharacterCounter() {

  // UseState() function is define the variables to handle the dynamic input

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

  

  // handleChange() function to get the text from textarea

  const handleChange = (e) => {

    setText(e.target.value);

  };



  // Calculate character count (including space as a character)

  const characterCount = text.length;



  // Calculate character count (excluding space as a character)

  const characterCountWithoutSpaces = text.replace(/\s/g, "").length;



  // Calculate word count (space as a separator)

  const wordCount = text.trim() === "" ? 0 : text.trim().split(/\s+/).length;



  return (

    <div className="container">

      <div className="input">

        <textarea

          id="input"

          placeholder="Enter a text"

          value={text}

          onChange={handleChange}

        />

      </div>

      <div className="result">

        <div className="character-count">

          // Display the character count

          <span id="characterCount">{characterCount} </span>

          <span>Characters</span>

        </div>

        <div className="character-count-without-spaces">

          <span id="characterCount">{characterCountWithoutSpaces} </span>

          <span>Characters (Excluding Spaces)</span>

        </div>

        <div className="word-count">

          // Display the word count

          <span id="wordCount">{wordCount} </span>

          <span>Words</span>

        </div>

      </div>

    </div>

  );

}



export default CharacterCounter;