JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<textarea class="limitedcharac" col="8" rows="8" maxlength='250' value="">Hello World. Im born today.</textarea>
<p class='remaining' id="test">250 characters remaining</p>

<textarea class="limitedcharac" col="8" rows="8" maxlength='250' value="">Hello World. Im born today.</textarea>
<p class='remaining' id="test">250 characters remaining</p>

<textarea class="limitedcharac" col="8" rows="8" maxlength='250' value="">Hello World. Im born today.</textarea>
<p class='remaining' id="test">250 characters remaining</p>

<textarea class="limitedcharac" col="8" rows="8" maxlength='250' value="">Hello World. Im born today.</textarea>
<p class='remaining' id="test">250 characters remaining</p>

JavaScript

document.addEventListener('keyup', function(event) {
  if (event.target.matches('textarea.limitedcharac')) {
  	let element = event.target;
    let value = element.value;
    let maxLength = element.maxLength;
    let remaining = element.nextElementSibling;

    remaining.innerText = `${maxLength - Number(value.length)} characters remaining`;

    if (maxLength - Number(value.length) == 0) {
      remaining.style.color = "red";
    } else if (maxLength - Number(value.length) <= 100) {
      remaining.style.color = "yellow";
    }
  }
}, false);