Simple Word Counter in Javascript with HTML & CSS

HTML

 <div class="ui-input-container">  
  <h2>Word Count</h2>  
  <label class="ui-form-input-container">  
   <textarea class="ui-form-input" id="word-count-input"></textarea>  
   <span class="form-input-label">Message</span>  
  </label>  
  <p aria-live="polite"><strong><span id="word-count">0</span> words</strong> | <strong><span id="character-count">0</span> characters</strong>.</p>  
 </div>  

CSS

 * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
  font-family: sans-serif;  
 }  
 .ui-input-container {  
  background-color: #fff;  
  padding: 3rem;  
  border-radius: 4px;  
  width: 50%;  
  margin: 0 auto;  
 }  
 .ui-input-container h2 {  
  font-family: sans-serif;  
  margin-bottom: 20px;  
  font-weight: 700;  
  text-transform: capitalize;  
 }  
 .ui-form-input-container {  
  position: relative;  
  font-size: 1rem;  
  margin-bottom: 15px;  
  display: block;  
 }  
 .ui-form-input {  
  padding: 13px 15px;  
  border-radius: 8px;  
  border: 2px solid #1a73e8;  
  outline: 0;  
  width: 100%;  
 }  
 .form-input-label {  
  position: absolute;  
  top: -7px;  
  left: 10px;  
  color: #1a73e8;  
  font-size: 0.85rem;  
  padding-right: 0.33rem;  
  padding-left: 0.33rem;  
  background: #fff;  
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);  
  font-family: sans-serif;  
  text-transform: capitalize;  
 }  
 .ui-form-btn {  
  padding: 13px 15px;  
  border-radius: 8px;  
  background: #1a73e8;  
  outline: 0;  
  width: 100%;  
  border: none;  
  cursor: pointer;  
  font-size: 1rem;  
  color: white;  
  font-weight: 500;  
 }  
 .error .ui-form-input,  
 .error .form-input-label {  
  border-color: #d50000;  
  color: #d50000;  
 }  
 textarea {  
  min-height: 6em;  
  max-height: 50vh;  
  width: 100%;  
 }  

Javascript

<script>
 var countTarget = document.querySelector("#word-count-input");  
 var wordCount = document.querySelector("#word-count");  
 var characterCount = document.querySelector("#character-count");  
 var count = function () {  
  var characters = countTarget.value;  
  var characterLength = characters.length;  
  var words = characters.split(/[\n\r\s]+/g).filter(function (word) {  
   return word.length > 0;  
  });  
  wordCount.innerHTML = words.length;  
  characterCount.innerHTML = characterLength;  
 };  
 count();  
 window.addEventListener(  
  "input",  
  function (event) {  
   if (event.target.matches("#word-count-input")) {  
    count();  
   }  
  },  
  false  
 );  
</script>