JSFiddle - React, Tailwind, and code Playground

by ruslyrossi

HTML

<textarea id="myinput"></textarea>
<div id="charcount"></div>

CSS

textarea {
    width:400px;
    height:100px;
}

JavaScript

$('#myinput').keyup(function () {
    if (this.value.length <= 152) $('#charcount').text('We will deduct 1 credit for this message per contact'),
    $('#credit_value').val('1');
    else if (this.value.length > 152 && this.value.length < 298) $('#charcount').text('We will deduct 2 credit for this message per contact'),
    $('#credit_value').val('2');
    else if (this.value.length >= 298 && this.value.length < 450) $('#charcount').text('We will deduct 3 credit for this message per contact'),
    $('#credit_value').val('3');
    else if (this.value.length >= 450 && this.value.length < 596) $('#charcount').text('We will deduct 4 credit for this message per contact'),
    $('#credit_value').val('4');
    else if (this.value.length >= 602 && this.value.length < 754) $('#charcount').text('We will deduct 5 credit for this message per contact'),
    $('#credit_value').val('5');
})