words and characters counter

In the above code, we have a container with a heading, a textarea for user input, and a section to display the word and character counts. The JavaScript code listens to the input event on the textarea and updates the counts dynamically.

The styling is done using CSS, with a responsive layout using the Bootstrap framework. The background color, text color, and padding can be customized to your preference.

<!DOCTYPE html>

<html>

<head>

  <title>Words and Characters Counting Tool</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <style>

    body {

      background-color: #f8f9fa;

      padding: 20px;

    }

    .container {

      max-width: 600px;

      margin: 0 auto;

      background-color: #fff;

      border-radius: 5px;

      padding: 20px;

    }

    h1 {

      color: #007bff;

    }

    textarea {

      width: 100%;

      height: 150px;

      padding: 10px;

      border: 1px solid #ced4da;

      border-radius: 5px;

      resize: none;

    }

    .count-info {

      margin-top: 20px;

      font-size: 18px;

    }

    .count-info span {

      font-weight: bold;

    }

  </style>

</head>

<body>

  <div class="container">

    <h1>Words and Characters Counting Tool</h1>

    <div class="form-group">

      <label for="textArea">Enter your text:</label>

      <textarea id="textArea" placeholder="Type your text here..."></textarea>

    </div>

    <div class="count-info">

      <span id="wordCount">0</span> words, <span id="charCount">0</span> characters

    </div>

  </div>

  <script>

    const textArea = document.getElementById('textArea');

    const wordCountElement = document.getElementById('wordCount');

    const charCountElement = document.getElementById('charCount');

    textArea.addEventListener('input', () => {

      const text = textArea.value.trim();

      const words = text.split(/\s+/).filter(word => word.length > 0);

      const charCount = text.length;

      wordCountElement.textContent = words.length;

      charCountElement.textContent = charCount;

    });

  </script>

</body>

</html>