JSFiddle - React, Tailwind, and code Playground

by steakpi

HTML

<textarea id="txtlawyerQuestion" rows="7" style="resize: none; display: block; width: 100%; box-sizing: border-box;" class="message" rows="2" cols="30"></textarea>
  <span class="countdown"></span>

JavaScript

function updateCountdown() {
    // 140 is the max message length
    var remaining = 600 - $('.message').val().length;
    $('.countdown').text(remaining + ' characters remaining.');
    
    if(remaining <= 0){
        $('#txtlawyerQuestion').css('color','#f00');
        $('.countdown').text('0 characters remaining.');
    }else{
        $('.countdown').text(' Characters Remaining: ' + remaining);
    }
}

jQuery(document).ready(function($) {
    updateCountdown();
    $('#txtlawyerQuestion').change(updateCountdown);
    $('#txtlawyerQuestion').keyup(updateCountdown);
});