<label for="text">Enter your text below.</label>
<textarea id="text"></textarea>
<p aria-live="polite" aria-atomic="true" id="counterParagraph">You've written <strong>0 words</strong> and <strong>0
    characters</strong>.</p>

<script async>

  // Variables
  let textArea = document.querySelector('textarea');
  let counterParagraph = document.querySelector('#counterParagraph');

  // Methods
  function handleInput(inputElement) {
    let newArray = inputElement.value.split(/\s+/).filter(function (item) {
      return item !== '';
    })
    let wordCount = newArray.length;
    let characterCount = newArray.join('').length;
    counterParagraph.innerHTML = `You've written <strong>${wordCount} words</strong> and <strong>${characterCount}
    characters</strong>.`;
  }

  // Listeners
  textArea.addEventListener('input', function () {
    handleInput(this);
  });

</script>